Magento Google Tag Manager Enhanced Ecommerce (UA) Tracking

User Guide & Documentation

Installation

This extension can be installed in a few minutes, by going through the following steps:

• Download/purchase the extension
• Unzip the file in a temporary directory
• Turn your Magento cache ON (if uploading to live site)
• Copy folder and paste it in your Magento installation root directory. This extension will NOT replace existing code.
• Go to your admin panel and clear cache.
• Go to System -> Configuration -> Anowave Extensions
• Click "Google Tag Manager"
• Enter your license key
• Enter your GTM Install snippets (head and body). The code can be found in your GTM account under Admin -> Install Google Tag manager
• Enter your UA tracking ID (from Google Analytics)
• Save configuration

 

Configuration

To configure the extension go to System -> Configuration -> Anowave Extensions -> Google Tag Manager and fill in the available configuration fields depending on your personal settings. See Fig. 0

Fig. 0

 

About Data Layer (dataLayer[]) object

To ensure maximum flexibility, portability, and ease of implementation, Google Tag Manager functions best when deployed alongside a data layer. A data layer is an object that contains all of the information that you want to pass to Google Tag Manager. Information such as events or variables can be passed to Google Tag Manager via the data layer, and rules can be set up in Google Tag Manager based on the values of variables (e.g. fire a remarketing tag when purchase_total > $100) or based on the specific events. Variable values can also be passed through to other tags (e.g. pass purchase_total into the value field of a tag).

In order to measure data through Google Tag Manager, you must create specific tags in your Google Tag Manager account. Once tags are created, they can be fired by the Data Layer when certain events occur. Most actions such as "Add to cart", "Remove from cart" etc. are events fired by the Data Layer. They require certain tags to be created and configured in Google Tag Manager which act like "listeners" to these events. Once an event occurs, the corresponding tag will be fired. If tag does not exists, it cannot be fired when event occurs.

 

About GTM Tags

Tags are tiny bits of website code that let you measure traffic and visitor behavior, understand the impact of online advertising and social channels, use remarketing and audience targeting, test and improve your site, and more.

To learn more about tags watch this short video by Google - https://www.youtube.com/watch?v=KRvbFpeZ11Y

 

Testing tags / Preview mode

dataLayer[] is a special object containing additional tracking information. Once the GTM code is initialized, it checks the dataLayer for statically or dynamically defined rules and tries to match those rules with the existing tags within your GTM account at Google. If a tag is matched, it gets fired automatically including sending additional tag related information.

A proper configuration is imperative for tags to fire, otherwise you may not be able to gather important information regarding your customers, products etc. The extension comes with built-in Google Tag Manager API that can be used to create all required tags effortlessly and without any errors. (See bottom of page)

To test tags you can run GTM in Preview mode. Once GTM is set to Preview mode, go back to your site and refresh the page. A console would appear showing useful information on the dataLayer[] object status, current tags fired etc. You can use this approach to test the entire site and check where tags fire, if they fire at all and if dataLayer[] is correctly initialized.

 

Tags configuration

The extension is the only one to support Google Tag Manager API, allowing you to create all required tags automatically and directly from your Magento admin panel. In rare cases where one would like to create tags by himself/herself, the following tags should be created. Please note that this is the minimum set of required tags for Enhanced Ecommerce to work properly. We strongly recommend using the API implementation as this will ensure no user errors can occur and will save you a lot of time. Learn how to use the API by watching a special video prepared for our customers - https://www.youtube.com/watch?v=vO8aN_rHXRk&t=103s

ENHANCED ECOMMERCE TAGS
Universal Analytics Tag type : Universal Analytics Tracking ID: <Your tracking ID> Track type : Pageview Enable Display Advertising Features: Check Enable Enhanced Ecommerce Features: true Use Data Layer: true Firing Rule: All pages	Product Event - Click Tag type : Universal Analytics Track type : Event Event Category: Ecommerce Event Action: Product Click Event Label: (See Section Event Label) Enable Enhanced Ecommerce Features: true Use Data Layer: true Firing Rule: {{event}} equals productClick	Product Event - Add to Cart Tag type : Universal Analytics Track type : Event Event Category: Ecommerce Event Action: Add to Cart Event Label: (See Section Event Label) Enable Enhanced Ecommerce Features: true Use Data Layer: true Firing Rule: {{event}} equals addToCart
Product Event - Remove from Cart Tag type : Universal Analytics Track type : Event Event Category: Ecommerce Event Action: Remove from Cart Event Label: (See Section Event Label) Enable Enhanced Ecommerce Features: true Use Data Layer: true Firing Rule: {{event}} equals removeFromCart	Product Event - Checkout step Tag type : Universal Analytics Track type : Event Event Category: Ecommerce Event Action: Checkout Enable Enhanced Ecommerce Features: true Use Data Layer: true Firing Rule: {{event}} equals checkout	User Timing NEW Tag type : Universal Analytics Track type : Timing Category: timingCategory (dataLayer variable) Value: timingValue (dataLayer variable) Label: timingLabel (dataLayer variable) Firing Rule: {{event}} equals trackTime
ADWORDS REMARKETING TAGS AND SOCIAL ACTIVITY TAGS
AdWords Dynamic Remarketing NEW Tag type : AdWords Remarketing Use Data Layer: true Data Layer Variable: {{google_tag_params}} Basic Settings - Document Path: {{url path}} Firing Rule: {{event}} equals fireRemarketingTag	Social Interaction Macros NEW Macro type : Data Layer Variable Data Layer Variable Name: socialNetwork Data Layer Version: 1	Social Activity NEW Tag type : Universal Analytics Track type : Social Use Data Layer: true Data Layer Variable: socialNetwork Social Tracking Parameters - Network: {{Social network}} - Action: {{Social action}} - Action Target: {{Social target}} Firing Rule: {{event}} equals socialInt

 

Event Label

Event label value varies depending on the product being clicked, added or removed from cart. This requires it's value to be populated dynamically. For this reason, we've designed the extension to create a dataLayer variable called eventLabel passed everytime event gets triggered. This allows tag configuration to read this variable directly from the dataLayer object and in effect assign dynamic event label. To configure tags to read this variable from dataLayer create a new dataLayer variable in GTM called Product label. It must be dataLayer variable (Version 1) with Data Layer Variable name set to eventLabel.

Once this variable is available, adjust event tags to use {{Product label}} as Event label value.

 

Tag configuration (GTM v.2)

The new GTM v.2 interface requires the same tag configuration as in GTM v.1 with the following exceptions:

a) Event based tags e.g "Add to Cart", "Remove from Cart", "Checkout" etc. require custom JavaScript event as triggering rule. See an example bellow of how "Add to Cart" event trigger looks like in GTM v.2

Tag names

Find below a screenshot of how your tags might look like if properly configured. Make sure your tag names are meaningful and make sense to anyone. See Fig. 1

Fig. 1

 

Tag Example

Find below example of how "Product Add to Cart" tag might look like. Tag settings are as follows:

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Add to Cart
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Firing Rule: {{event}} equals addToCart

See Fig.2

Fig.2

 

 

Watch Video on how to create and configure GTM tags in Google Tag Manager V2 API Interface

Our module comes with a built-in API implementation for Google Tag Manager API. You can use it to create all tags, variables and triggers in an instant and without errors. Watch this short video - https://www.youtube.com/watch?v=vO8aN_rHXRk (available in 1080p) on how to use the API to quickly create and configure your GTM account.

Important: The only tag that the API will NOT create is the Universal Analytics tag. This is to avoid duplication if this tag already exists. If you don't have such tag, simply create one and remember to enable Enhanced Ecommerce under tag's "More settings" panel.

 

Finding Google Tag Manager Account ID

Google Tag Manager account id is located in your GTM account under Admin -> Account settings menu (see below)

 

 

AdWords Dynamic Remarketing Tag

To configure AdWords, check the steps/guide outlined below.

1. AdWords Conversion Tracking

In our extension configuration screen go to AdWords Conversion Tracking tab and insert your conversion id and conversion label (obtained from AdWords). The word "purchase" is default and should be replaced with your own label. Once these are inserted, flush cache and conversion tracking should work out of the box. You don't need to define anything in terms of GTM tag/configuration. AdWords Conversion Tracking is built-in in our module for customer ease.

2. AdWords Dynamic Remarketing

If you used our API to create all triggers, then you should have a tag called EE AdWords Dynamic Remarketing and 2 variables in GTM -> Variables e.g. "ee conversion id" and "ee conversion label"

a) Go to GTM -> Variables and edit "ee conversion id" variable. Insert your conversion id (obtained from AdWords)
b) Go to GTM -> Variables and edit "ee conversion label" variable. Insert your conversion label (obtained from AdWords)
c) Publish new container version

This will activate AdWords Dynamic Remarketing.

 

AdWords Conversion Tracking

The extension comes with a built-in AdWords Conversion tracking support. If you'd like to know which of your keywords best leads to clicks and conversions, such as sales, conversion tracking can help you. The built-in AdWords Conversion Tracking for Magento will automatically insert a tracking snippet in your confirmation page and track conversions effectively. See below a proof of concept and sample preview of how tracking variables values might look like after a successful purchase. See Fig. 3 (preview contains also variables related to AdWords Dynamic Remarketing as well)

Fig. 3

 

How to test if tags are actually working

There are essenatially 2 types of tags. The first type of tags are those sent on Pageview. They include information that is gathered upon page load and sent automatically with the GA Pageview. The other type of tags are those fired after the page is loaded. They usually require user action such as click of a button etc.

To learn more about testing tags visit https://support.google.com/tagmanager/answer/2695660?hl=en

Previewing in debug mode allows you to check which tags are fired and which are not fired. If a certain tag isn't fired then make sure it's configuration matches the required one described in this documentation. (See Tag configuration).

 

Custom Dimensions

Custom dimensions and metrics allow you to bring additional data into Google Analytics that can help you answer new questions about how users are interacting with your content and products. The extension supports 5 predefined custom dimensions however these can be increased up to 18 by request.

To start tracking custom dimensions follow the instructions below:

1. 1. Go to Google Analytics -> Admin
2. 2. In the "Property" column click "Custom definitions"
3. 3. Click "Custom dimensions"
4. 4. Click "New custom dimension"
5. 5. Name your dimension. Supported values include "Customer ID", "Number of whishlist items", "Customer gender", "Customer group", "Customer number of orders prior to purchase"
6. 6. Set "Scope" to "Product"
7. 7. Make sure "Active" checkbox is checked.
8. 8. Click "Create"
9. 9. Repeat steps 4 to 8 for all 5 possible values described in Step 5

Once custom dimensions are created in Google Analytics they need to be activated in the extension configuration options. To activate steps, follow the instructions below:

1. 1. Go to System -> Configuration -> Anowave Extensions -> Google Tag Manager
2. 2. Expand section "Custom definitions" (if collapsed)
3. 3. Set "Enable custom dimensions" to "Yes"
4. 4. Adjust each of the 5 custom dimensions to match the dimension names created in Google Analytics.
5. 5. Save configuration

That's it. The extension will now send additional custom dimension with each product upon purchase.

There are some technical limitations to consider with regards to custom dimensions.

1. Custom dimensions appear as primary dimensions in Custom reports and in Segments. They do not appear in Standard reports. Custom metrics appear in Custom reports and in Segments.

2. Custom dimensions cannot be deleted, but you can disable them. We recommend you avoid trying to reuse custom dimensions. When you edit the name, scope, and value of a custom dimension, both the old and the new values can be paired with the either the old or the new dimension name. This conflates data in your reports in a way that cannot be accurately separated with a filter.

3. Custom dimensions and metrics are only available for properties that have either been enabled for Universal Analytics or contain at least one app reporting view.

4. When a new dimension is created an index of 1 to 20 is used and it's name becomes "dimensionN" where N is a digit between 1 and 20 for normal analytics account and 1 to 200 for premium analytics accounts. Once a dimension is created e.g "Customer gender" it gets a name like "dimension3". It's imporant not to change dimension name in your Analytics account as this may result in inaccurate reporting. See pt. 2 above. It's also important to match the dimension names with those supported by the extension because the extension will always set dimension3's value to the customer gender regardless of the dimension name be it Customer Gender or Customer Group etc.

IMPORTANT

Google Analytics customers are prohibited from sending personal information to Google.

The Google Analytics terms of service, which all Google Analytics customers must adhere to, prohibits sending personally identifiable information (PII) to Google Analytics (such as names, social security numbers, email addresses, or any similar data), or data that permanently identifies a particular device (such as a mobile phone’s unique device identifier if such an identifier cannot be reset), even in hashed form. Your Google Analytics account could be terminated and your data destroyed if you use any of this information.

 

Facebook Pixel Tracking

Our module comes with a built-in support for Facebook Pixel. Get started at https://developers.facebook.com/docs/facebook-pixel/using-the-pixel
Once you have your pixel properties, simply insert them in extension's configuration screen and Facebook Pixel tracking will work automatically for you. No need to setup additional GTM tags or anything else at all.

 

Promotions & Promotion tracking

This module can track promotion views and promotion clicks. However, different customers use different promotions e.g. banners, sliders, static images etc. which makes it impossible to track them all. To solve this we have introduced a smart way to enable promotions in your site by doing a few code changes at HTML level. Althought this is DYI, it's very easy to achieve.

To make an object promotion simply add data-promotion="true" attribute. Then add the rest of the attributes from Enhanced Ecommerce specification related to promotions e.g.

1. data-promotion-creative="squareBanner"
2. data-promotion-name="Square Banner"
3. data-promotion-position="1"
4. data-promotion-id="SQUARE_BANNER"

Note: Values are fictional. Fill in your own values.

A typical HTML element would look like shown in the figure below.

 

data-promotion-* attributes can be applied to any element on the page.

 

Advanced Developer Configuration / Selectors

Parts of the tracking related to event tracking may involve adjusting a few configuration selectors. Under Advanced Developer Configuration we have exposed a few selectors which provide a flexible mechanism of detecting elements on your page and binding the corresponding tracking e.g. productClick, addTocart etc. These selectors are XPath selectors. XPath uses path expressions to select nodes or node-sets in an XML document. The node is selected by following a path or steps.

In effect these selectors describe the path to specific elements on your page and allow the module to hook to them dynamically. There are several important selectors.

1. Impression list selector - Used to detect a list of products in categories
2. Impression click selector - Used to detect a clickable element e.g. product title, image from categories
3. Add to cart selector from categories - Used to detect direct "Add to cart" button from categories

There are also other less important selectors with self-explanatory names.

One may find this part of the configuration a bit technical so if you're unsure how to configure or if these need to be adjusted at all, please contact our help desk. Support engineers will clarify on this.

For technical person, it should be relatively easy to adjust these as long as you're aware on the following.

a) "//" double slash means an absolute selector, if selector starts with double slash e.g. // it will be applied on the whole content, in some cases could be the whole page or the listings HTML

b) If a selector starts with element, it's then a relative selector and will be applied on the content matched from the previous/dependable selector. Impression click selector for example depends on impression list selector. The first one must be absolute selector while latter one should be relative.

A good example would be:

a) Presume category products are listed in ORDERED LIST e.g. OL/LI, OL has ID - products, in this case the Impression list selector becomes: //ol[contains(@class,"products")]/li which reads "pick ALL LI elements which are direct children of OL element with attribute ID equal to "products"

b) Presume that product link which we need to track productClick exists in OL/LI/DIV/A with class "product-image", the Impression click selector becomes: DIV/A[contains(@class,"product-image")] which reads "pick A element which is child of DIV element which is direct child of previously matched LI element

 

A/B Content experiments and split testing

Content experiments are essential part of conversion rate optimization. They provide a way to test what works and what doesn't work. As of version 10.0.3 we have introduced content experiments for Magento. They allow store owners to experiment with different content and see which one performs better.

 

Enabling experiments

To start with content experiments go to System -> Configuration -> Anowave Extensions -> Google Tag Manager -> A/B Content Experiments and set Enabled to "Yes"

 

Creating Experiments

To create experiments go to System -> A/B testing and add few experiments. For example Experiment A and Experiment B. Experiments can be active for each store individually to allow for different experiments in multistore environment.

With experiments created, go back to Manage products and edit any of your existing products. You should see now extra fields next to Description, Name and Short description allowing you to insert alternative content. This is the data that customer will see if Experiment A is triggered. (See below)

Triggering an experiment

Experiments are triggered randomly based on the number of current experiments. For example, if you have 2 experiments e.g. Experiment A and Experiment B, then 50% of the customers will see Experiment A and 50% of the customers will see Experiment B. If we have another experiment e.g. Experiment C, then the number goes to 33% and so on.

 

Experiment reporting

When experiments it triggered, a new variable "experiment" is pushed to the dataLayer[] object which besomes persistent for this user. By using a cookie, the system ensures that the same customer sees the same experiment everytime.

With the dataLayer.experiment variable available, then each enhanced ecommerce tag should be configured to set a custom dimension with value set dynamically from the dataLayer. This way every action on the site can be associated with the current running experiment.

 

 

 

 

dataLayer[] Preview

 

Since this extension cannot be demonstrated online, find below a few screenshots of the dataLayer[] object contents in some of the essential pages.

 

 

 

 

Assessing installation and tracking

 

Assessing the installation is important part of ensuring that tracking works and it covers all aspects of enhanced ecommerce. There are multiple ways to assess the installation, but we will describe the most common ones.

 

1. Assessing as customer

As a customer you may not have coding skills so there are a few simple steps to follow. We have outlined them below.

1. 1. Go to your Google Tag Manager account and check if you have created all tags, triggers and variables
2. 2. Check if you have published your container
3. 3. Run your container in "Preview" mode and go back to your site.
4. 4. Browse pages such as Home Page, Category, Product detail page and ensure that Universal Analytics tag fires on all of them.
5. 5. Click on a product from your categories and ensure that "Product click" event appears in the GTM preview console (bottom of the browser)
6. 6. Click on "Add to cart" button and ensure "Add to cart" event is fired. Follow the same procedure for "Remove from cart"
7. 7. Go to Checkout, and see if checkout steps are tracked (again by looking to the preview console).
8. 8. Place an order and click on the dataLayer from the preview console. Ensure that dataLayer[] object contains all the data such as revenue, transaction, products array etc.
9. 9. Play with the entire site when in preview mode and ensure that dataLayer[] object is initialized as per the specification descrived here - https://developers.google.com/tag-manager/enhanced-ecommerce
10. 10. Last but not least, contact our support engineers and ask them to evaluate the installation.

2. Assessing as developer (advanced)

As a developer you could use some tools to assess the installation. We have outlined them below.

1. 1. Assess the installation as customer (see pt. 1 above)
2. 2. Open browser's developer console and inspect AEC and dataLayer objects. They should be defined.
3. 3. Monitor network and requests made to https://www.google-analytics.com/collect?v=
4. 4. Inspect elements such as category images, add to cart buttons etc. for data-* attributes such as data-id, data-brand, data-catgory etc.
5. 5. Make sure GTM is inserted only once in the page HTML source
6. 6. Make sure standard Google Analytics is turned off entirely.

 

Considerations

Even properly installed the extension may fail to send data to Google in certain cases. See below possible situations that may result in data loss:

1. Transaction tag(s) are fired on order confirmation page and if for any reason the customer doesn't get to confirmation page, NO transaction data will be recorded.
2. Some customers reported doubled amount of transaction value. This could happen if GA transaction tracking is enabled in Magento. It will in effect send transaction data twice resulting in incorrect transaction amount reported in Google Analytics. Our recommendation is to disable all 3rd party extension related to GA and leave stuff to GTM. It's main purpose is to allow site owners to add features to the site without editing code whatsoever.
3. Inaccruate bounce rate has been repored on few occasions. This usually happens when there are more then one tag fired on 'pageview' with results in sending data twice to Google thus bounce rate getting lower then 1%. To test if your site doesn't sent 'pageview' twice to Google, use browser's console and search for requests containing the keyword "collect" There should be only 1 such request per page view.