Google Analytics! It used to be a simple add this snippet of code to your page and you’re finished. Now depending on the options you want there could be a lot more work to do. You could be using classic google analytics or universal analytics. You could be using the ecommerce plugin or enhanced ecommerce or none. You could be using the data layer or macros. You could be using any combination of those with google tag manager. And depending on which combination you use you will have to code it differently.
I’ll show you how I setup analytics using Universal Analytics and Tag Manger with Enhanced Ecommerce and the Data Layer.
Finding the correct documentation for the analytics combination I’m using was frustrating. Here is a list of the docs that were helpful to me.
- Set Up Universal Analytics
- Enable Enhanced Ecommerce for Universal Analytics
- Google Tag Manager Getting Started
- Google Tag Manage Dev Guide
- Google Tag Manage Enhanced Ecommerce
First off if you haven’t used Google Tag Manager I would read:
Getting Started and
How It Works
Basically once the javascript snippet is deployed to the site, it allows non-developers to manage what data they want to collect from the site without involving the developers.
For example. Let’s say a website has a button to login. This button has an ID of “login-btn”. Now a user can use the tag manager to add a tag called “Log In” with a rule that when a user clicks on an element with an ID of “login-btn” it will fire the tag. The rule would look like this: {{element id}} equals login-btn. Depending on the type of tag you use you might also need to add to the rule {{event}} equals gtm.click.
Now your site will start collecting data every time a user clicks on the login button without your developer having to make any changes to the code.
** Once you cross over to the Ecommerce world, a developer is going to be required.
The Basic Steps:
- Setup Google Analytics Account.
- Setup Google Tag Manager. (https://www.google.com/tagmanager/)
- Add Javascript Snippet to your website.
We will add the Tag Manager snippet not the tracking code from google analytics.
Click on the container you created in the tag manager, click on the Admin section and click on “Install GTM”. This is the javascript code that you want to add to your site.
Google Tag Manager
The data that is used by the Tag Manager and then sent to google analytics is retrieved from the Data Layer or Macros. The recommended approach is to use the Data Layer.
I recommend going over the development docs if you haven’t already. https://developers.google.com/tag-manager/devguide
In their docs they mention two ways to populate the data layer and fire the tags:
- Declare all needed information in the data layer above the container snippet
- Use HTML Event Handlers
If you have the traditional Multi Page Application you most likely will use option 1 . If you have a Single Page Application (SPA) you will need to use option 2. Personally I’ve been using this on a SPA with Angular so I never used option 1.
If you are using option 1, you would create a tag in Google Tag Manager with these attributes:
Tag type : Universal Analytics
Track type : Pageview
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Basic Settings – Document Path: {{url path}}
Firing Rule: {{event}} equals gtm.js
In this case you would make sure the all the data was in the dataLayer before the snippet.
dataLayer = [{
'ecommerce': {
'impressions': [{
'name': productObj.name, // Name or ID is required.
'id': productObj.id,
'price': productObj.price,
'brand': productObj.brand,
'category': productObj.cat,
'variant': productObj.variant,
'list': 'Search Results',
'position': 1
}]
}
}];
For option 2 you would create a tag like this:
Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Product Click
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Basic Settings – Document Path: {{url path}}
Firing Rule: {{event}} equals productClick
Then in your javascript you would send the data by pushing it to the dataLayer object like this:
dataLayer.push({
'event': 'productClick',
'ecommerce': {
'click': {
'actionField': {'list': 'Search Results'}, // Optional list property.
'products': [{
'name': productObj.name, // Name or ID is required.
'id': productObj.id,
'price': productObj.price,
'brand': productObj.brand,
'category': productObj.cat,
'variant': productObj.variant
}]
}
}
});
I recommend using a generic event to help keep things manageable. I’m using the angular javascript framework with angulartics (http://luisfarzati.github.io/angulartics/). The readme here (https://github.com/luisfarzati/angulartics#for-google-tag-manager) explains what tags, rules and macros need to be setup. Even if you aren’t using angular the setup is the same for a generic event.
Also for both of those tags, make sure you check both “Enable Enhanced Ecommerce Features” and “Use Data Layer”.
** If you are using angulartics you’ll need to make sure it handles ecommerce. You just need to make sure one of the top level keys is ‘ecommerce’. I just over wrote the module and did this:
$analyticsProvider.registerEventTrack(function(action, properties){
var dataLayer = window.dataLayer = window.dataLayer || [];
var data = {
'event': 'interaction',
'target': properties.category,
'action': action,
'target-properties': properties.label,
'value': properties.value,
'interaction-type': properties.noninteraction
};
if(properties.ecommerce)
data['ecommerce'] = properties.ecommerce;
dataLayer.push(data);
});Make sure you look at the docs for google tag enhanced ecommerce. It will show you what attributes to use when you push your data to the data layer. https://developers.google.com/tag-manager/enhanced-ecommerce
Viewing the data you sent in google analytics.
Go to Reporting and go to the Conversions section. Under there you’ll see the Ecommerce reports.
* When you push your products to the dataLayer the id field maps to the Product SKU.
Dynamic Remarketing
In Google Tag Manager for each tag you want to use this feature for check the “Enable Display Advertising Features” box.
In Google Analytics, go to the Admin section. Select the property you want and then click on “Dynamic Attributes”. Then for Step 2 for Product ID select “Product SKU”. https://support.google.com/analytics/answer/6002231
Debugging Locally
Click on each tag you created to edit it. Under the “More settings” click on “Cookie Configuration”. For Cookie Domain type “none”.
You can also setup another view in Google Analytics and in Tag Manager you can create a macro for the Tag’s Tracking Code like here.
A couple useful articles about Google Tag Manager Macros:
http://www.simoahava.com/analytics/macro-guide-google-tag-manager/
http://www.simoahava.com/analytics/macro-magic-google-tag-manager/
I know this can be confusing and there is a lot of questions that I didn’t answer. The biggest thing for me is to know where I can find the answers so hopefully this article along with the links I posted will help you forge ahead through the world of google analytics.