Magento 2 Google Analytics 4 (GA4) GTM Extension

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)

 

Installation and updating with Composer

You can install this extension via Composer only after purchasing a Composer support package

• Run the following Composer commands
  
  composer require anowave/package
  composer require anowave/ec
  composer require anowave/ec4
  
  bin/magento setup:upgrade
  bin/magento setup:static-content:deploy (only if site is in production mode)

 

Google Analytics 4 EVENTS / Google Analytics 4 Event tag

Enhanced Ecommerce tracking is done by sending enhanced measurement events via the so called Google Analytics 4 Event tag. We have outlined some of the essential events supported by the module which are sufficient for proper Enhanced Ecommerce tracking.

view_promotion Measures promotion view	select_promotion Measures click on a promotion
view_item_list Measures product/item list views/impressions	refund Measures refunds
select_item Measures product click (from categories)	view_item Measures product detail views
add_to_cart Measures click on "Add to Cart" button	add_to_wishlist Measures click on "Add to Wishlist" button
remove_from_cart Measures click on "Remove from cart" button	view_cart Measures cart view
begin_checkout Measures checkout start	add_shipping_info Measures selected shipping method
add_payment_info Measures selected payment method	purchase Measures transactions on success page

 

Google Analytics 4 Configuration tag

The Google Analytics: GA4 Configuration tag initializes Google Analytics for your Google Analytics 4 property on a particular page. It handles behavior such as setting of Google Analytics cookies, sending automatic and enhanced measurement events, and declaration of common settings. In effect this is the tag that does 90% of the work and installs Google Analytics 4 on the site.

The built-in API will create this tag for you automatically

 

 

Google Analytics 4 (Installation/Configuration)

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

Anowave_Ec4 module works on top of our Anowave_Ec module, it's designed to modify the dataLayer[] object as per GA4 specification (https://developers.google.com/tag-manager/ecommerce-ga4)

When installed:

1. A new field called Measurement ID appears in Google Tag Manager API configiration section. This is obtained from Google Analytics 4 and it's in the following format: G-XXXXXXXXXX

2. A 3 new checkboxes appear that allow you to:

a) Create GA4 variables
b) Create GA4 triggers
c) Create GA4 tags (creates also the Google Analytics 4 configuration tag)

3. Google Analytics 4 Configuration tag

The Google Analytics: GA4 Configuration tag initializes Google Analytics for your Google Analytics 4 property on a particular page. It handles behavior such as setting of Google Analytics cookies, sending automatic and enhanced measurement events, and declaration of common settings. This is in effect what tracks Pageviews and installs Google Anlaytics 4 on your site

4. dataLayer[] modifications

dataLayer[] object gets modified as per GA4 specification (https://developers.google.com/tag-manager/ecommerce-ga4)

5. To our understanding, it's better to create a new empty container and use the API to configure it for GA4 by clicking only the GA4 checkboxes from our API, this will create the GA4 variables,triggers and tags including the Google Analytics 4 Configuration tag. Having the container inflated with the old tags is not a mistake but they won't fire or if some of them fires it could duplicate and/or corrupt data.

6. There are certain limitations of GA4 (due to being in beta mode probably) to be aware of:

a) Checkout can no longer be tracked in terms of checkout steps. There are a few events dispatched:

begin_checkout
add_payment_info
add_shipping_info

b) Product list attribution no longer works, it's simply not available yet in GA4
c) There are no more product-scoped dimensions.

 

Configuration steps

Configuration is really simple but it will require some pre-config steps. In order to track stuff properly, you have to have a GTM container configured with the required tags/triggers and variables. You can do this configuration really easy using the built-in API. It requires no technical expertise whatsoever.

We have outlines a few configuration steps below required for module to work properly:

 

1. Install the module

2. Enter a license key in Stores -> Configuration -> Anowave Extensions -> Google Tag Manager GA4 and set Enable to "Yes"

3. Go to Stores -> Configuration -> Anowave Extensions -> Google Tag Manager and expand the Google Tag Manager ^API section

4. Enter your Account ID and click Sign in

5. Once singed in, pick the Container ID which you want to configure. It is recommended to configure an empty/new container to avoid messing with UA tags

6. Enter your Measurement ID

7. Click ONLY GA4 related checkboxes e.g. Create variables (GA4)/Create triggers (GA4)/Create tags (GA4). Make sure not to click the first 3 checkboxes because they will create also standard UA tags in your container

8. Click "Save config" (note that saving could take a while so be patient)

 

Google Ads Conversion Tracking and Google Ads Dynamic Remarketing

To configure Google Ads, check the steps/guide outlined below.

General Setup

1. Google Ads Conversion Tracking

In our extension configuration screen go to Google Ads Conversion Tracking tab and insert your conversion id and conversion label (obtained from Google Ads). 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. Google  Conversion Tracking is built-in in our module for customer ease.

2. Google Ads 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 Google Ads)
b) Go to GTM -> Variables and edit "ee conversion label" variable. Insert your conversion label (obtained from Google Ads)

c) Publish new container version

This will activate Google Ads Dynamic Remarketing.

ENHANCED CONVERSIONS support

Our latest versions support Enhanced Conversions Enhanced conversions is a feature that can improve the accuracy of your conversion measurement. It supplements your existing conversion tags by sending hashed first-party conversion data from your website to Google in a privacy-safe way.

Before you begin, watch a short video on YOUTUBE - https://support.google.com/google-ads/answer/9888145

Enhanced Conversion tracking is supported in multiple ways via our module.

gtag.js based

1) If you switch to gtag.js based conversion tracking (selected from Implementation dropdown in config screen), Enhanced Conversion tracking will be enabled by default

To switch to gtag.js based conversion tracking:

a) Go to Stores -> Configuration -> Anowave Extensions -> Google Tag Manager -> Beta panel and set Beta to Yes
b) Go to Stores -> Configuration -> Anowave Extensions -> Google Tag Manager -> Google Ads and set "Implementation" to "Using gtag.js"
c) Insert your gtag.js global site tag snippet INCLUDING opening and closing SCRIPT tags. If you are to enable Enhanced Conversions you must also modify the gtag snippet to include the following configuration:

d) Insert "Send to" parameter (it is available in your account at Google Ads -> Tools & Settings -> Conversions -> (Select conversion) -> Tag Setup -> Install the tag yourself -> Event snippet

Custom implementation

2) If you'd like to do your own implementation, our module defines a global JS variable - enhanced_conversion_data

The global JS variable enhanced_conversion_data is a JSON object with the following properties.

 

Google Ads End Configuration

Google PART

Enabling Enhanced Conversions for Conversion Actions

1. Go to Goals -> Conversions -> Settings
2. Expand Enhanced Conversions
3. Click Turn On Enhanced Conversions
4. Under 'Choose a method for setting up and managing user-provided data' select 'Google Tag'
5. Click Tag details
6. Check Specify CSS selectors or JavaScript variables
7. Activate each selector, next to each selector select 'Global Javascript variable', then insert enhanced_conversion_data.email (example is for email)

Other values may include:

enhanced_conversion_data.email
enhanced_conversion_data.phone_number
enhanced_conversion_data.first_name
enhanced_conversion_data.last_name
enhanced_conversion_data.street
enhanced_conversion_data.city
enhanced_conversion_data.region
enhanced_conversion_data.country
enhanced_conversion_data.postal_code

8. Once all fields are filled, click Save.

Common Troubleshooting

1. Error type: Missing user data fields / Not enough matches for your conversion

Fix: Configure the conversion in Google Ads to only use the email and the phone fields, and not the address. Region field could be null for UK purchases and the diagnostics would be flagging that the data being sent was incomplete.

 

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 GA4 Configuration tag that fires on all pages will still fire. To prevent this, you need to change the tag trigger from Initialization 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 GA4 configuration tag trigger should be reverted back to "Initialization All pages", otherwise it won't fire thus losing essential tracking data such as page views, transactions etc.

 

Google Consent Mode V2 configuration

If you use Google Consent mode for your tags and/or have Additional Consent Checks you need to edit your GA4 Configuration tag (Google Tag) and change it's trigger from All Pages to Event Equals Cookie Consent Granted. This will allow this tag to fire whenever consent is granted. Otherwise, the tag will fire on all subsequent requests therefore you will lose the initial HIT.

Testing Consent Mode / GDRP features involves the following steps:

1. Hit F12 in your browser, then go to Console -> Storage and remove any cookies  prefixed 'cookie' e.g. 'cookieConsentGranted' etc.
2. Go to Console -> Local Storage and remove 'consentMode' value
3. Once done, put GTM in Preview mode and refresh your site.
4. Accept cookies and check if GA4 Configuration (Google Tag) is firing.
5. Optionally (as a developer) you can check Console -> Network requests for any requests to https://region1.google-analytics.com/g/collect?v=

Also when checking browser requests in the F12 -> Console -> Network tab, you can inspect 1 important parameter:

gcs - Encodes the current state of the user’s consent. The gcs parameter always begins with “G1” and is followed by two other digits, either 1 or 0. The G1 is a constant that indicates that the parameter is a GA4 consent mode parameter, so the first 1 doesn’t tell us anything.

G100     No consent has been granted.
G110     Google Ads has consent, Google Analytics does not.
G101     Google Analytics has consent, Google Ads does not.
G111     Both Google Ads and Google Analytics have consent.

 

3rd PARTY Consent Configuration

The feature provides a mechanism to include third party script into consent mode compliance. To do so, you need to add some data-* attributes tagging to those scripts. The following changes are required:

1. Remove 'async' attribute
2. Change 'type' attribute from 'text/javascript' to 'text/template' e.g. type='text/template'. If type attribute is missing, add it as 'text/template'
3. Add data-consent="true" attribute to the SCRIPT tag
4. Add data-segment="cookieConsentGranted" attribute to SCRIPT tag. Segments include: cookieConsentGranted, cookieConsentMarketingGranted, cookieConsentUserdata, cookieConsentPersonalization, cookieConsentPreferencesGranted, cookieConsentAnalyticsGranted

 

Review granted permissions

You can review all granted permissions in a separate menu in admin panel under Admin -> Reports -> GDRP Consent (see below)

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.

 

Server-side tracking

Our module provides supports for server-side tracking for events such as 'purchase','refund' and reverse transactions. This tracking is optional and needs to be enabled in config.

 

General comfiguration

Server-side tracking is based on using Google Analytics 4 Measurement protocol. In order to work properly, the API needs to be configured with proper Measurement ID and Measurement API secret. These are inserts under Stores -> Configuration -> Anowave -> Google Tag Manager GA4 -> Google Tag Manager API

Measurement ID - Measurement ID for a GA4 data stream. Format: G-XXXXXXXXXX
Measurement API Secret - To create a new secret, navigate in the Google Analytics UI to: Admin > Data Streams > choose your stream > Measurement Protocol > Create

These are mandatory for server-side tracking

 

Tracking offline orders

To enabled offline/admin orders tracking go to Stores -> Configuration -> Anowave -> Google Tag Manager GA4 - Measurement Protocol Google Analytics 4 -> Set Track offline orders to 'Yes'. This will enable tracking for orders placed in admin panel

Tracking cancelled orders

To enabled offline/admin orders tracking go to Stores -> Configuration -> Anowave -> Google Tag Manager GA4 -> Measurement Protocol Google Analytics 4 -> Set Track cancelled orders to 'Yes'. This will enable tracking for orders that are cancelled in admin panel. This will in effect send a reverse transaction to Google Analytics 4

Tracking refunded orders

To enabled offline/admin orders tracking go to Stores -> Configuration -> Anowave -> Google Tag Manager GA4 -> Measurement Protocol Google Analytics 4 -> Set Track refunds to 'Yes'. This will enable tracking for orders that are refunded in admin panel. Refund request is send to GA4 when a CREDIT MEMO is created.

Tracking frontend orders using server-side implementation

To enabled offline/admin orders tracking go to Stores -> Configuration -> Anowave -> Google Tag Manager GA4 -> Measurement Protocol Google Analytics 4 -> Set Track server-side ONLY to 'Yes'. This will enable tracking for orders placed on frontend using server-side request.

 

Assessing installation

If installed properly, Google Tag Manager should contain (at minimum) the tags shown in the figure below.

Testing & Debugging

Unlike Universal Analytics, testing Google Analytics 4 could be tricky and time consuming. We have prepared a few steps below to use as a guide on how to test and debug Google Analytics 4.

1. Prepare GTM for debugging

In order to start the debugging process you must prepare GTM for debugging. To do so, edit GA4 Configuration tag and under Fields to set add new Field with Field name: debug_mode and Value: true (as shown below)

 

 

Once done, Publish new container version so changes could take effect.

2. Run GTM in Preview mode

To run GTM in Preview mode, go to GTM and click Preview. You will be requested to enter your domain and from then on GTM will open a new debug window.

3. Open Google Anlaytics 4 DebugView

Go to Google Analytics -> Confiure -> Debug view. This will open GA4's debug view screen where you can observe the events fired in real time. If everything is set correctly, you should see your browser in DEBUG DEVICE dropdown.

 

 

If all 3 points above are done, you can now start testing. Browse the site as regular user, check what tags fire in GTM Preview console, check what events fire in DebugView in GA4. You can also place a test order and check if both EE4 Purchase tag is fired and the 'purchase' event is shown in DebugView.

 

Avoiding Google Analytics 4 Discrepancies

Google Analytics 4 despite being new stuff, proved to be hard to work with and has potentially steep learning curve. We're learning new stuff ourselves everyday so let's check the following stuff that could be causing incorrect reports. Function-wise our extension is designed and working as per Google's specifications displayed here - https://developers.google.com/tag-manager/ecommerce-ga4, dataLayer[] object is initialized with all the required parameters and the payload that is being pushed for every event meets the requirements. Still, there are few things that could be causing missing or invalid data in your GA4 property.

1. LATENCY

Google Analytics for has insane data latency, sometimes up to 48 hours or even more. If you've placed a test order today or yesterday, they might not appear yet in your reports.

2. TECHNICAL REQUIREMENTS

From technical perspective, the following things should be checked and verified

2.1 Check what version you have of Anowave_Ec4 module (check app/code/Anowave/Ec4/CHANGELOG.md). If lower than ## [100.4.3] - 17/05/2022, upgrade both Anowave_Ec and Anowave_Ec4 to latest versions.

2.2 Check if you have the following TAGS in your GTM container:

EE AdWords Dynamic Remarketing
EE4 Add Payment Info
EE4 Add Shipping Info     
EE4 Add To Cart     
EE4 Add To Compare
EE4 Add To Wishlist    
EE4 Begin Checkout    
EE4 Purchase    
EE4 Refund    
EE4 Remove From Cart    
EE4 Select Item    
EE4 Select Promotion    
EE4 View Cart    
EE4 View Item    
EE4 View Item List    
EE4 View Promotion    
GA4 Configuration

2.3 Edit EE4 Purchase tag and check if ALL of the following Event parameters are set.

items
transaction_id
value
currency
shipping
tax
affiliation

Missing 'currency' parameter will cause revenue to show as $0.00 instead of the actual revenue.

2.4 DUPLICATE events/transactions

There are multiple reasons that could be causing this, I have described most common ones below.

We highly recommend this article - https://www.analyticsmania.com/post/duplicate-events-in-google-analytics-4-and-how-to-fix-them/

It describes most of the potential reasons for duplicate stuff.

3. VERIFYING & TESTING

Confirming that GA4 is tracking data properly is usually done by a combination of running GTM in Preview mode and setting GA4 in DebugView

To use the DebugView report:

3.1 Enable debug mode

To enable debug mode, edit GA4 Configuration tag and under Fields to set, add new field with Field name set to "debug_mode" and Value set to "true". Once done, publish the container

3.2 Observe events as they are tracked

To check events run GTM in Preview mode and then go to your Google Analytics 4 Property -> Configure > DebugView

You should see all events here the moment they fire on your site, you can now place a test order and see if the 'purchase' event is fired and if it has all the parameters required for successful tracking.

Transactions are tracked by the EE4 Purchase tag. Make sure that this tag appears in the list of fired tags on your success page. This will ensure that transaction data is sent to Google Analytics 4 successfully

4. VERIFYING & TESTING (AS A DEVELOPER)

In addition to stuff described in pt. 3 (see above), as a developer you can use the browser console to check if transactions are tracked properly.

4.1 To test it in the browser, hit F12 to display Developer Tools (in Firefox or Chrome)
4.2 Select Network tab which displays all network requests and type a manual filter e.g. "collect?v=" to filter Google Analytics 4 requests only.
4.3 Place a test order and inspect the network requests. There should be at least one POST request with the following headers:

pr1iddownloadable
~nmDownloadable
~br
~qt3
~pr2400
~k0currency
~v0USD
~caProducts
~k1item_category_2
~v1Accessories
ep.debug_mode true
ep.transaction_id 000000060
epn.value 7220
epn.shipping 0
epn.tax 1200
ep.affiliation Default Store View