Art Noir // Professionally setting up Google Analytics in three steps

About

Google Analytics is a free web analytics service of Google Inc. that provides statistics and professional analytical tools for search engine optimization (SEO), website and content optimization as well as marketing purposes. Following are our principles and practices for setting up Google Analytics (GA) the professional way in three steps.

1. Google Analytics Code Implementation: The link between your website and your Google Analytics account starts with the implementation of the Google Analytics tracking code snippet. To do this, the Google Analytics code snippet must be integrated into every site's source code that you consider to track. We recommend to use a Tag Management System like Google Tag Manager (GTM) to do this. Google Tag Manager is a free and powerful Tag Management System for triggering events on your website, tracking code snippets or your AdWords campaigns. It is not a web analysis tool like Google Analytics but a powerful ally to deploy website tags all in one place (and worth another blog post).

The current GA tracking code snippet looks like this:


<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-XXXXXXXX-X‘, 'auto');
ga('send', 'pageview');

</script>

To read the minified code in a more understandable way lets pass it through a little makeover to make it more readable.


<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-XXXXXXXX-X‘, 'auto');
ga('send', 'pageview');

</script>

Basically, the code is a small function that adds another Java Script tag (window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); to the Document Object Model (DOM) of your website and assigning it some attributes and parameters such as source and async = true and finally inserting it before the first script tag m.parentNode.insertBefore(a, m), so the browser could start loading it.

For the Google Tag Manager snippet it is basically the same. The current GTM minified code snippet looks like this:


<script>

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX’);</script>

</script>

Again, lets pass it through a beautifier to make it more readable.


<script>

(function(w, d, s, l, i) {
w[l] = w[l] || [];

w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});

var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';

j.async = true;
j.src ='https://www.googletagmanager.com/gtm.js?id=' + i + dl;

f.parentNode.insertBefore(j, f);
})

(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX’);

</script>

The minified GTM snippet declares an anonymous function with five parameters function(w,d,s,l,i) which are called at the end of the function. Furthermore, the function then creates the dataLayer object, pushes the first event 'gtm.js' into it and loads the external gtm.js library which processes the tag container ID and finally adds the new JavaScript https://www.googletagmanager.com/gtm.js?id=' + i + dl; to your page. The function is automatically executed.

The minified GTM snippet declares an anonymous function with five parameters which are called at the end of the function.

In addition to the basic tracking code snippet provided by Google Analytics, make sure you complete your tracking code with the Analytics extension ga('set', 'anonymizeIp', true); to ensure that IP addresses are collected anonymously (known as IP masking). To do so just copy the following single line of code ga('set', 'anonymizeIp', true); to your GA code snippet. In GTM you can set your variable configuration of your Google Analytics settings variable with the field name 'anonymizeIp' and the value of 'true':


<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-XXXXXXXX-X‘, 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);

</script>

With your GA tracking implemented you can now start tracking your website visitors.

2. Google account and properties settings: For your account we advise you to agree to Google's data releases on products and services, benchmarking and technical support. You should also verify your overall user administration. Who has access? Who has what rights? In general, your account should distinguish between structure and data representation. It could be structured in an overall web account, specific properties and data views. Considering multiple subdomains, languages or countries of your website, the Google Analytics account structure should follow a clear division between properties per country or subdomain (including one global web property), data views per language and additional sub data views of working, backup and testing profiles to be able to backup your data or to evaluate country and/or language specific aspects of your website.

The Google Analytics account structure should follow a clear division between properties, data views and additional sub data views.

We mostly set up at least three GA-specific profiles for specific data evaluation and overall data integrity: A live or working profile with all your filters, segmentations, dashboards etc. applied; a test profile for testing filters and event tracking parameters and at least one backup profile with your original 100% data and free of any filters, segmentations and the like. For a website relaunch consider to set up an additional temporary staging profile for pre-live tests and evaluations. This way you also assure to manage user rights as well as additional services such as Google AdWords, AdSense or Search Console in one specific property.

Technically your account and properties settings should look like this (from main account to property to data view):

My Website Account Name > Global Website Property/Subdomain Property/Country Property > Backup Profile/Working Profile/Test Profile/Staging Profile

3. Working profile settings: With your adjusted GA account you can now focus on your profile settings. Firstly, set up your tracking or conversion goals, i.e. your website's contact form should be set up as a specific conversion goal within Google Analytics. In addition, identify all other objectives and record their achievement as conversion goals. We recommend using the Google Tag Manager for triggering page events and conversion goals as well as an online marketing workshop upfront where you focus on your overall business objectives, derive online marketing strategies and finally develop and dissipate appropriate tactics that can later be transferred into a Google Analytics measurement plan. Lastly, set up your e-commerce tracking if you host an e-commerce website and/or basic data filters to exclude internal traffic or analytics spam. For a website relaunch we also recommend to set up filters to exclude pre live or staging tracking data from your profile.

Consider a marketing workshop as a basis for creating a Google Analytics measurement plan.

Last but not least a few recommendations for using Google Tag Manager. For your website account setup we recommend using one GTM web container with its own container ID if you have multiple languages, countries or subdomains. With your container applied you now can setup your variables, tags and triggers. Setting up your variables should include global variables for all your code snippets such as Google Analytics or Google AdWords etc. They contain your tracking ID so that you don't need to write it down over and over again. Other variables might contain custom JavaScript code, i.e data video URLs or to complete your tracking code settings with the Analytics extension ga('set', 'anonymizeIp', true); to ensure that IP addresses are collected anonymously.

Key takeaways:

Set up your Google Analytics account and implement the Google Analytics tracking code snippet into your website.
Complete your tracking code snippet with the Analytics extension ga('set', 'anonymizeIp', true); to ensure that IP addresses are collected anonymously.
Check your website tracking status in Google Analytics.
Set your account structure wisely: website subdomains, countries etc. as a single property including specific data views such as one backup profile, a live/working profile and a test profile.
Adjust your profile settings such as conversion goals, events, custom alerts, e-commerce tracking, excluding internal traffic and filters.
Consider a marketing workshop as a basis for creating a Google Analytics measurement plan that clarifies your overall website goals and conversion parameters.

Share on Facebook | Share on Twitter

Professionally setting up Google Analytics in three steps→←

2017/07/22 – Strategic Marketing by Christian Kahl

About