Magento 2 Google Analytics 4 Enhanced Ecommerce tracking (GTM)

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)

 

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

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

refund
Measures refunds (not implemented yet)

 

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)

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)

 

Running GA4 and UA in parallel

When you activate GA4, UA will not work properly simply because dataLayer[] object is modified to match the GA4 specification in terms of event names, however we have designed the dataLayer[] to hold the data required by both UA and the GA4.

To run them both, a change is required in the triggers for UA tags. Since GA4 events are different, some of the event based tags in UA will not fire automatocally.

For example:

For example addToCart in UA is add_to_cart in GA4. Thus Event Equals Add To Cart trigger will not fire. To get the EE Add To Cart trigger working, you must change it's trigger from Event Equals Add To Cart to GA4 Event Equals Add To Cart. The same logic applies for other tags such as EE Remove From Cart etc.

Tag changes required:

1. 1. EE Add To Cart tag must be changed to fire on GA4 Event Equals Add To Cart trigger
2. 2. EE Remove From Cart tag must be changed to fire on GA4 Event Equals Remove From Cart
3. 3. EE Product Click tag must be changed to fire on GA4 Event Equals Select Item
4. 4. EE Async Impression tag must be changed to fire on GA4 Event Equals View Item List
5. 5. EE Promotion view tag must be changed to fire on GA4 Event Equals Select Promotion
6. 6. EE Promotion Click tag must be changed to fire on GA4 Event Equals View Promotion

If you plan to have GA4 and UA configured in separate containers, it is possible to add both snippets in the GTM head field from the configuration. This will load them both on frontend.

 

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. 1. 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. 2. From technical perspective, the following things should be checked and verified
3. 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.
4. 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.

1. items
2. transaction_id
3. value
4. currency
5. shipping
6. tax
7. affiliation

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