<p>With the Cosmic Extension functionally, anyone can embed their own custom app inside the Cosmic Dashboard!</p><p>In this article I will show you how to configure and use this Google Analytics Extension to view Google Analytics insights directly in your Cosmic Bucket Dashboard.&nbsp;</p><h2>TL;DR</h2><p><a href="https://cosmicjs.com/extensions/google-analytics" rel="noopener noreferrer" target="_blank">Go to the Google Analytics Extension page</a><br><a href="https://github.com/cosmicjs/google-analytics-extension" rel="noopener noreferrer" target="_blank">View the full codebase on GitHub</a><br><a href="https://cosmicjs.com/login" rel="noopener noreferrer" target="_blank">Install the Extension in your Bucket in Your Bucket &nbsp;&gt; Extensions &gt; Browse Extensions</a><br><a data-href="https://cosmicjs.com/docs/extensions" href="https://cosmicjs.com/docs/extensions" rel="noopener noreferrer" target="_blank">View the Extension documentation</a> for more information on building an Extension</p><h2>The Extension we&#39;re building</h2><p>We&#39;re integrating a simple Extension that allows you to view your Google Analytics data in your Cosmic Bucket. All you need to do is login with your Google Account and add your VIEW_ID.</p><h2>Usage</h2><ol><li>Go to your google analytics dashboard. Select the project which you want to use. Go to the admin settings &gt; View Settings and copy the view ID.<br><br><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/31c8abb0-4d4f-11e8-a927-a51792689ecd-view id.PNG" style="width: 508px;" class="fr-fic fr-dib"><br></li><li>Click on the Analytics menu on the left nav in your cosmic dashboard. Authorize using your google account.<br><br><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/98069210-4d50-11e8-86d8-d7fbaaaa60e5-access.PNG" style="width: 456px;" class="fr-fic fr-dib"><br></li><li>Enter the View ID you copied above and submit.<br><br><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d8593ed0-4d50-11e8-86d8-d7fbaaaa60e5-IMG_01052018_190708_0.png" style="width: 507px;" class="fr-fic fr-dib"><br></li><li>You will see your Analytics here :)<br><br><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9d72f040-4edb-11e8-b4df-9b304cc9bad1-Screen Shot 2018-05-03 at 8.54.59 AM.png" style="width: 300px;" class="fr-fic fr-dib"></li></ol>

Google Analytics Extension

<p name="4824">Check out this <a href="https://github.com/cosmicjs/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">website boilerplate</a> built on <a href="https://github.com/zeit/next.js/" rel="noopener noreferrer" target="_blank">Next.js</a> and <a href="https://cosmicjs.com">Cosmic</a>. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.</p><h2>TL;DR</h2><p><a href="https://github.com/cosmicjs/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Download the Next.js Website Boilerplate GitHub repo</a>.<br><a href="https://cosmicjs.com/apps/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Check out the demo.</a></p><h3>Features</h3><p>1. Fully responsive down to mobile w/ <a href="http://getbootstrap.com" rel="noopener noreferrer" target="_blank">Bootstrap</a> frontend<br>2. SEO ready<br>3. A contact form that sends an email to your email(s) of choice and to <a href="https://cosmicjs.com">Cosmic</a> for easy reference<br>4. Full-site search functionality<br>5. All content is easily managed in <a href="https://cosmicjs.com">Cosmic</a> including pages, blog and contact info. Sign up for <a href="https://cosmicjs.com">Cosmic</a> to install the demo content and deploy this website.&nbsp;</p><h3>Get started</h3><pre>git clone https://github.com/cosmicjs/nextjs-website-boilerplate
cd medical-professional-next-js  
npm install</pre><p>Import the <strong>bucket.json</strong> file into your Cosmic Bucket. &nbsp;To do this go to Your Bucket &gt; Settings &gt; Import / Export Data. &nbsp;Or install the app via the <a href="https://cosmicjs.com/apps/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Next.js Website App page</a>.&nbsp;</p><p><br></p><p><img src="https://cosmicjs.com/uploads/4edef890-52e6-11e6-9a1c-233e4e7aa20d-ZadK2PbDDR.gif " style="width: 605px;" class="fr-fic fr-dib"></p><p><br></p><h3>Run in production</h3><pre>COSMIC_BUCKET=your-bucket-slug npm start </pre><p>Go to <a href="http://localhost:3000">http://localhost:3000</a>&nbsp;</p><h3>Run in development</h3><pre> npm run dev</pre><p>&nbsp;Go to <a href="http://localhost:5000">http://localhost:5000</a>.&nbsp;</p><h3>Config&nbsp;</h3><p>Contact email Because Next.js doesn&#39;t have a mail server, the contact form uses mailgun to send the email. So add the following constants in the config file.</p><p><br></p><div class="fr-embedly               " data-original-embed="<a href='https://gist.github.com/WaqasArshad777/8529e5d78284a053b9497050cc25558a' class='embedly-card'></a>"><a href="https://gist.github.com/WaqasArshad777/8529e5d78284a053b9497050cc25558a" class="embedly-card"></a></div>

Next.js Website Boilerplate

<p>Check out this <a href="https://github.com/cosmicjs/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">website boilerplate</a> built on <a href="https://nuxtjs.org/" rel="noopener noreferrer" target="_blank">Nuxt.js</a> and <a href="https://cosmicjs.com/">Cosmic</a>. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.</p><h2>TL;DR</h2><p><a href="https://github.com/cosmicjs/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a><br><a href="https://cosmicjs.com/apps/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Check out the demo.</a></p><h3><strong>Features</strong></h3><p>1. Fully responsive down to mobile w/ <a href="http://getbootstrap.com" rel="noopener noreferrer" target="_blank">Bootstrap</a> frontend<br>2. SEO ready<br>3. A contact form that sends an email to your email(s) of choice and to <a href="https://cosmicjs.com">Cosmic</a> for easy reference<br>4. Full-site search functionality<br>5. All content is easily managed in <a href="https://cosmicjs.com">Cosmic</a> including pages, blog and contact info. Sign up for <a href="https://cosmicjs.com">Cosmic</a> to install the demo content and deploy this website.&nbsp;</p><h3><strong>Get started&nbsp;</strong></h3><pre>git clone https://github.com/cosmicjs/nuxtjs-website-boilerplate
cd nuxtjs-website-boilerplate
npm install</pre><p>Import the <strong>bucket.json</strong> file into your Cosmic bucket. To do this go to Your Bucket &gt; Settings &gt; Import / Export Data.&nbsp;</p><p><br></p><p><img src="https://cosmicjs.com/uploads/4edef890-52e6-11e6-9a1c-233e4e7aa20d-ZadK2PbDDR.gif " style="width: 605px;" class="fr-fic fr-dib"></p><p><br></p><h3><strong>&nbsp;Run in production&nbsp;</strong></h3><pre>COSMIC_BUCKET=your-bucket-slug npm start </pre><p>Go to <a href="http://localhost:3000">http://localhost:3000</a>&nbsp;</p><h3>Run in development&nbsp;</h3><p>Create a <strong>config/development.js</strong> file and match it to <strong>config/production.js&nbsp;</strong>with your values.&nbsp;</p><pre> npm run development </pre><p>&nbsp;Go to <a href="http://localhost:5000">http://localhost:5000</a>.&nbsp;</p><h3>Env vars</h3><p>As it states on the <a href="https://nuxtjs.org/faq/host-port/" rel="noopener noreferrer" target="_blank">Nuxt.js website</a>, you will need to set the environment variable HOST to 0.0.0.0. &nbsp;This is already done in the package.json script for you, but you could also set this on the &quot;Set Environment Variables&quot; section located in Your Bucket &gt; Settings &gt; Deploy Web App.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ba959ac0-30e9-11e8-8a87-1d4e79eefafa-env.PNG" style="width: 593px;" class="fr-fic fr-dib"></p><p><br></p><h3>Config&nbsp;</h3><p>Because Node.js doesn&#39;t have a mail server, the contact form uses <a href="https://www.mailgun.com/" rel="noopener noreferrer" target="_blank">mailgun</a> to send the email. So add the following constants in the config file.</p><p><br></p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/WaqasArshad777/8529e5d78284a053b9497050cc25558a' class='embedly-card'></a>"><a href="https://gist.github.com/WaqasArshad777/8529e5d78284a053b9497050cc25558a" class="embedly-card"></a></div>

Blogs by Waqas Arshad

Start building today