Magento 2 Google Tag Manager Enhanced Ecommerce (UA/GA4) Tracking

User Guide & Documentation

Installation from Command Line (Recommended)

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
• Copy directory contents and paste it in your Magento installation root directory. This extension will not replace existing code or file structure
• Enter the following at the command line:
  
  php bin/magento setup:upgrade
  php bin/magento setup:static-content:deploy (only if site is in production mode)

 

 

dataLayer[] Preview

This extension cannot be evaluated online, but we have prepared a preview of the dataLayer[] object throughout an ecommerce site.

 

 

 

Configuration

Before configuring the module you may need:

Your Google Analytics UA-ID
UA-ID can be obtained from your Google Analytics account in Admin -> Tracking info -> Tracking code

Your Google Tag Manager Account ID
Account ID can be obtained from your Google Tag Manager account in Admin -> Account settings

Your Google Tag Manager Container ID (numeric representation)
Container ID can be obtained through the module itself

 

To configure the module go to your Magento Admin -> Stores -> Configuration -> Anowave Extensions -> Google Tag Manager and configure the following:

1. 1. Insert your license key. To obtain a license key watch the short video link next to the license key input
2. 2. Insert your GTM snippet. GTM snippet can be obtained from your Google Tag Manager account in Admin -> Install Google Tag Manager
3. 3. Insert your Universal Analytics ID
4. 4. Save configuration
5. 5. Once configuration is saved, expand section called "Google Tag Manager API"
6. 6. Click "Sign in to Google" and authorize the application. You will be redirected back to your Magento admin interface
7. 7. Insert your Account ID
8. 8. Insert your Universal Analytics ID and leave Container ID empty
9. 9. Click "Save config". Upon saving, you will get redirected back to same page
10. 10. Go again to "Google Tag Manager API" section. You can now pick your container ID from the dropdown.
11. 11. Click "Save config". Once configuration is saved 4 checkboxes will appear in "Google Tag Manager API" section.
12. 12. Check all 3 checkboxes e.g. Create variables, triggers and tags. You can also check Create Universal Analytics tag if you don't have such tag yet
13. 13. Set Throttle to 0.2 and Click "Save config". Operation could take a while so be patient.
14. 14. Once the process completes, find all tags/triggers and variables automatically created in your account at Google Tag Manager
15. 15. Publish your container version. This is important, otherwise created tags will not fire. You have to publish changes after every update to your tags, triggers or variables
     

Find below a few screenshot(s) of how to use the Google Tag Manager API.

 

Google Tag Manager Tag Configuration

Unlike other similar solutions, this product comes with full support for Google Tag Manager API allowing you to create all tags, triggers and variables in an instant with the click of a button, directly from Magento admin panel. The extension will do all the hard work automatically hence why tag specification has been omitted in this documentation.

 

Watch a quick video on YouTube - https://www.youtube.com/watch?v=U8dK95FRP1w

 

Google Analytics configuration

To get proper Enhanced Ecommerce, Google Analytics should be configured as well. There are 2 keypoints here

1. Enable Enhanced Ecommerce

To enable Enhnaced Ecommerce go to GA -> Admin -> E-commerce settings -> E-commerce Setup and enable Ecommerce and Enhanced Ecommerce reporting

2. Configure Funnel

To configure funnel steps go to GA -> Admin -> E-commerce settings and under Checkout labeling enter the following steps:

Step 1 - Shipping
Step 2 - Payment
Step 3 - Place order

Note that if you use 3rd party checkout solution, steps could be different. In this case, contact helpdesk for further clarification

 

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).

 

AdWords Conversion Tracking & AdWords Dynamic Remarketing

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.

 

Facebook Pixel Configuration

Facebook Pixel tracking is built-in, you do not need to create any tags in GTM itself. Configuration is simple and it only requires you to insert your Facebook Pixel snippet in module's config screen under Facebook Pixel Tracking panel. Once snippet is inserted, the module will automatically insert the FB snippet on your pages and fire events such as AddToCart, Purchase, RemoveFromCart etc. automatically.

 

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

 

Cookie Consent / GDPR

The latest version of the extension comes with built-in Cookie Consent directive. This allows visitors to choose whether they allow site owner to collect and store cookies. A cookie is a small piece of data that a website asks your browser to store on your computer or mobile device. The cookie allows the website to "remember" your actions or preferences over time.

Most browsers support cookies, but users can set their browsers to decline them and can delete them whenever they like.

 

Cookie Consent Configuration

To enable this feature go to Stores -> Configuration - Anowave Extensions -> Google Tag Manager -> Cookie Consent Directive and set "Enable Cookie Consent" to "Yes". Configure other settings as per your requirments.

Enabling Cookie Consent however isn't sufficient because some of your tag may still fire. In most cases, the Universal Analytics tag that fires on all pages will still fire. To prevent this, you need to change the tag trigger from All pages to custom event e.g. cookieConsentGranted. This event will be fired once visitor accepts cookie usage and on every page from then on.

Important: If cookie consent is disabled the Universal Analytics tag trigger should be reverted back to "All pages", otherwise it won't fire thus losing essential tracking data such as page views, transactions etc.

 

Developer reference

Find below a list of the custom events dispatched by our module. These can be used to interact with the dataLayer[] object from your own modules and push/modify data covering your own requirements.

 

ec_get_widget_click_attributes
Allows 3rd party modules to modify widget click attributes e.g. data-attributes="{[]}"

ec_get_widget_add_list_attributes
Allows 3rd party modules to modify widget add to cart attributes e.g. data-attributes="{[]}"

ec_get_click_attributes
Allows 3rd party modules to modify product click attributes e.g. data-attributes="{[]}"

ec_get_add_list_attributes
Allows 3rd party modules to modify add to cart from categories attributes e.g. data-attributes="{[]}"

ec_get_click_list_attributes
Allows 3rd party modules to modify category click attributes e.g. data-attributes="{[]}"

ec_get_remove_attributes
Allows 3rd party modules to modify remove click attributes e.g. data-attributes="{[]}"

ec_get_add_attributes
Allows 3rd party modules to modify add to cart attributes e.g. data-attributes="{[]}"

ec_get_search_click_attributes
Allows 3rd party modules to modify search list attributes e.g. data-attributes="{[]}"

ec_get_checkout_attributes
Allows 3rd party modules to modify checkout step attributes e.g. data-attributes="{[]}"

ec_get_impression_item_attributes
Allows 3rd party modules to modify single item from impressions

ec_get_impression_data_after
Allows 3rd party modules to modify impressions array []

ec_get_detail_attributes
Allows 3rd party modules to modify detail attributes array []

ec_get_impression_related_attributes
Allows 3rd party modules to modify related attributes

ec_get_impression_upsell_attributes
Allows 3rd party modules to modify upsell attributes

ec_get_detail_data_after
Allows 3rd party modules to modify detail array []

ec_order_products_product_get_after
Allows 3rd party modules to modify single transaction product []

ec_order_products_get_after
Allows 3rd party modules to modify transaction products array

ec_get_purchase_attributes
Allows 3rd party modules to modify purchase attributes

ec_get_search_attributes
Allows 3rd party modules to modify search array attributes

ec_api_measurement_protocol_purchase
Allows 3rd party modules to modify payload for measurement protocol

ec_get_purchase_push_after
Allows 3rd party modules to modify the purchase push

 

Performance optimisation

The module is developed in a way that dataLayer[] object gets initialized prior to sending a Pageview. While this brings more natural way of sending data to Google Analytics, it may bring minor performance issues mainly due to the fact that GTM snippet is located in HEAD section and this is where Pageview is fired. To get the dataLayer[] object initialized correctly, the module does some data pre-fetching. Performance impact is minimal on all pages except for category pages where payload could be significant especially in categories with lots of products. To improve performance you can pick from 2 types of dataLayer[] initializations e.g. Before Pageview and After Pageview. The latter one improves performance drastically however it requires additional adjustments in GTM tags and triggers. By delivering those 2 selectable types of initializations the module allows you to pick between more natural dataLayer[] initialization and improved performance.

To set dataLayer[] initialization model go to Stores -> Configuration -> Anowave Extensions -> Google Tag Manager -> Enhanced Ecommerce Tracking Preferences -> Impression Payload Model. In there we have included a User Guide that explains this feature in detail and the changes you need to do depending on the chosen initialization model.

Another bottleneck could be deeply nested category hierarchy and also number of categories. On sites with 2000+ categories, performance could be improved by disabling a setting called Use category segments from our module. When disabled, the module will not send the category as slash separated string but only the very category that product exists.

 

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.