MyLifeBBS

The world with no boundaries

Implementing Google Analytics Asynchronous Snippet in DotNetNuke – the simple ways.

by

UPDATE: The method below does not work anymore. You’re advised to upgrade your DNN to version 5.6.1 or above for fool proof solution.

Recently, Google Analytics launched its third generation of tracking script that fully support asynchronous loading which speed up the page rendering speed of modern browsers. If you use Google Page Speed tool to analyze your web page that is using old snippet, you will see something like below

asynchronously-load

Implementing Google Analytics always a bit tricky and become every ‘messy’ if you’re using old type of module insertion on every pages.

Here’s the 3 simplest ways to implement Google Analytics:

1. Edit the SiteAnalytics.config file. Since version 5, DotNetNuke shipped with core Google Analytics module which located under Admin section. If you entered your tracking ID, the config file will be loaded into your web pages.

By default, the script will be loaded just before </body> tag. The asynchronous however highly suggest us to put the snippet just before </head> tag.

To do this, we need to customize the SiteAnalytics.config file a bit to look like this:

<?xml version="1.0" encoding="utf-8" ?>


<AnalyticsEngineConfig>


    <Engines>


        <AnalyticsEngine>


            <EngineType>DotNetNuke.Services.Analytics.GoogleAnalyticsEngine, DotNetNuke</EngineType>


            <ElementId>Head</ElementId>


            <InjectTop>False</InjectTop>


            <ScriptTemplate>


                <![CDATA[


<script type="text/javascript">


  var _gaq = _gaq || [];


  _gaq.push(["_setAccount", [TRACKING_ID]]);


  _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>


            ]]>


            </ScriptTemplate>


        </AnalyticsEngine>


    </Engines>


</AnalyticsEngineConfig>


Note: make sure to change the value of ElementId tag from body to head.


<ElementId>Head</ElementId>


And that’s it!


Btw, the config file is located in the root of your DNN installation. Here’s a copy of the above sample, you’re safe to replace it directly…


 


2. Second method basically is to put the snippet into default.aspx file. Both methods has a limitation where you cannot exclude it from certain pages or user role like administrator.


3. While third method is to get some third party modules (which most of it still running older generation of snippet) that support custom role filtering .