Introduction

In the previous posts of this series we have seen how to install and run Umbraco using Visual Studio, how to setup uSync to provide a synchronization mechanism between source control, how to set up blog using Articulate blog engine, how to publish the blog website to azure, how to setup Open Live Writer with Articulate, how to integrate Disqus comments platform with Articulate. In this post we will set up Google Analytics account and integrate it with Articulate blog engine that we have used.

Prerequisites

  • Have covered the previous posts in this series
  • Have a google account. If you don’t have one then you can create it here.

What is Google Analytics

Google Analytics is a web analytics service offered by Google. At high level its a service that tracks, records and provide insights about the traffic on a website.  You can get full details here.

Signing up for Google Analytics and get tracking id for the website

Sign in to your Google account. In the top right corner select the Google Apps icon and continue to click on More button at bottom till you are taken to google products page as shown in image below.

image 

On all products page look for Grow your business –> Analytics as shown in image below. You will be taken to Sign up page as shown in image below.

image

The above image shows the steps to create, integrate with website and start seeing data about the traffic on the website. Click on Sign up button as shown in above image. You will be taken to to the Sign up details page as shown in below image.

image

 

You can create account for website or mobile app. For this post we will focus on website (dotnettek.com) that we have been setting up in this series of posts. It is important to note that there are 2 levels for setup:

  • Account: Its the main account under which you can have many properties.
  • Property: think a property to be one website where you will integrate Google Analytics and see the reports and data independent of other properties.

Fill in the information as shown in above image and then click “Get Tracking Id” button at the bottom of the page. You will be then taken to the newly created account page prepopulated with the property information and tracking id which is created above. The account page is shown in below image:

image

In the above image highlighted portions show the tracking details which are available under Admin menu and the respective property (in dropdown). Copy the Tracking Id from the account page. We will use this later in the Umbraco back office for the Articulate blog.

 

Configure Google Analytics for Articulate in Umbraco back office

Lets go to the Umbraco back office to configure the tracking id in the blog settings. Navigate to the blog root page –> Blog tab and look for Google Analytics settings as shown in below image

image

Articulate author has already added the scripts for Google Analytics on the webpage. The above settings will be replaced in the script file dynamically and website will start sending information to Google Analytics. Fill in the “Google Analytics Id” as created in previous step.

“Google Analytics Name” is the domain name for which cookie needs to be set. For this post we have used auto as we are setting the cookie for dotnettek.com root domain. So basically auto or dotnettek.com are equivalent in context of my blog and this post.

IMP: Auto will always create the cookie for root domain even if you are hosting your site with subdomain (like subdomain.dotnet.com). For full details check the documentation of analytics.js Cookies and User identification here.

 

Script generated with above values is as below. I have included this sample using the View page source for dotnettek.com.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-104101565-1', 'auto');
  ga('send', 'pageview');
</script>

After filling the information click “Save and publish” button.

 

Now lets check if we can see the data in google analytics. For demo purposes I have opened a couple of dotnettek.com pages from different devices and browsers.

Login back to Google Analytics portal and navigate to Reports –> Real-Time –> Overview as shown in below image

image

In the above image we can see the active traffic in the portal, distribution of traffic from mobile & desktop. There are many different ways to see the data in other Reporting sections which is outside the scope for this post. Right now there is hardly any traffic to my blog as I have created it just last week. I am looking forward to generate more useful content and hope that will result in increased traffic to my blog.

Great, now we have integrate Google Analytics with the blog website. However in near future, for dotnettek.com I would like to replace Google Analytics with Google Tag Manager. I will need to update the Articulate theme source code to add Google Tag Manager section.

This was the last post of this series and now looking forward to write about many other topics in .Net space.