Configuring Google Analytics for a Sitecore Website

Hello Sitecore Family,

A few weeks back, I had a nice small task to work on, the title of the above post – Configuring Google Analytics for a Sitecore Website. Lets see how easy it can be to configure. Yes, you are right,  the first question that would come to the mind of any Sitecorian, is why Google Analytics and not Sitecore DMS. That proves you are a Sitecorian — but again sometimes, the requirement is such – such as in my case, where the client was using Google Analytics for a number of other sites of his.

So he also wanted the Analytics of the current site to be there in Google Analytics – So be it!

How does Google do to show us the Analytics data?

Basically, we need to copy a Javascript from Google into all our pages along with the Tracking Code generated by Google for us, so that whenever the page loads on the client side, it send its related data back to Google and finally we can see and analyze it.

Configuring Google Analytics, is as simple for Sitecore as for any other Site – so lets divide it into two steps to understand it better:

• Basics of Google Analytics:

For a beginner who wants to know how to configure Google Analytics, the steps are as given in this link – https://support.google.com/analytics/answer/1008080?hl=en

There are two ways in which Google does it and we can choose any one of them.

Google’s Classic Analytics code (ga.js)

[code language=”javascript”]
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-XXXXX-X’]);
_gaq.push([‘_trackPageview’]);

(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

</script>[/code]

Google’s Universal Analytics code (analytics.js)

[code language=”javascript”]
<!– Google Analytics –>
<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-XXXX-Y’, ‘auto’);
ga(‘send’, ‘pageview’);

</script>
<!– End Google Analytics –>
[/code]

As of now, if you are adding Google Analytics to a website, Google recommends to add the Universal Analytics code.

•  Basics of Configuring Google Analytics in Sitecore:

Basic/Beginner Steps:

1. Create a Sublayout in our Sitecore Solution.
2. Copy one of the above given code (preferably Universal analytics) to the Sublayout.
3. Statically bind the Sublayout to all (one or more) main layouts of the Sitecore Site.(http://varunvns.wordpress.com/2014/07/03/sitecore-beginner-static-and-dynamic-binding/)
4. Replace the UA-XXXX-Y with the Google Analytics code for the client website. The client might have given you a code starting with UA. If in case he hasn’t ask him for it. (how to get the Google Analytics code:  https://support.google.com/analytics/answer/1008080)
5. Let’s Open our page/s in browser and check in Realtime Tab on the left side to see the data that appears.

This is in normal case that any developer would do.

Now lets consider a case, that we have a multi-site Sitecore Solution. As per the best practices of Programming, we would definitely want to reuse the code.

Advanced Steps:

1. Make in a section of Global Sublayouts (which would be shared for all the sites in the solution), let’s create a Sublayout for Google Analytics.
2. Copy the Universal Analytics code to the Sublayout, with just one change – adding a Property to fetch the Google Analytics code on runtime – as below screenshot:
3. Statically bind the Sublayout to all (one or more) main layouts of the Sitecore Site.(http://varunvns.wordpress.com/2014/07/03/sitecore-beginner-static-and-dynamic-binding/)
4. In the Template of HomePage of the website or in a Global Settings Section template of a site (whichever we feel we are comfortable with, as per the Site structure – nothing is good or bad, right or wrong, Sitecore is so good in architecture, that we can configure as per our requirement and that thing becomes right!) create a field to store the Google Analytics code of a website.
5. Add the code to the specified field of the corresponding item.
6. In the code behind of the Sublayout, write the function to fetch the value of the Google Analytics code, from the item.

Oh, you want to check the code? — Here it is!

[code language=”javascript”]
<!– Google Analytics –>
<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’, ‘<%= GaTrackingCode %>’, ‘auto’); // Replace with our property ID.
ga(‘send’, ‘pageview’);

</script>
<!– End Google Analytics –>

[/code]

[code language=”csharp”]

protected string GaTrackingCode { get; private set; }

protected void Page_Load(object sender, EventArgs e)
{
Item SettingsItem = Sitecore.Context.Database.GetItem(Sitecore.Context.Site.RootPath + Sitecore.Context.Site.StartItem + "/Settings");

GaTrackingCode = SettingsItem["Google Analytics Code"];
}

[/code]

Happy Tracking data of our Sitecore Site in Google Analytics! 🙂