Analytics & Tracking Extensions

Analytics & Tracking Magento 2 Extensions

Magento 2 Google Tag Manager (GTM) GA4 Ecommerce Tracking

Installation and User Guide for Magento 2 Google Tag Manager Pro Tracking Extension

Table of Contents

  1. Installation
    • Installation via app/code
    • Installation via Composer
    • Installation via Composer(Hyvä Theme)
    • Installation via Composer(Breeze Theme)
  2. Configuration Settings for Tracking Base
    • General Settings
    • Checkout Behaviour
  3. Configuration Settings for Google Tag Manager Pro
    • General Settings
    • Cookies From Query Params
  4. JSONs/Script provided with extension package
  5. Importing JSONs into GTM
  6. Setting variable information in GTM
  7. Publishing Tags in GTM
  8. Set up Google Analytics 4
  9. Set up Google Adwords Conversion
  10. Setup Enhanced Conversion
    • Enable Enhanced Conversions in Google Adwords
    • Set up Enhanced Conversion with the Module
  11. Cookies From Query Params
  12. Upgrading the Module From 3.0.1 and Below
  13. Secure Execution of Inline Scripts in GTM via CSP Nonce
  14. Front-end Screenshots
    • Order Total of Product without VAT
    • Order Total of Product with VAT
    • Send SKU of Child Product
    • Send SKU of Parent Product Only
    • Send Parent Category
    • Primary Category
  15. Set up Consent Mode V2 with GTM

Installation

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

https://docs.scommerce-mage.com/magento-2-extensions/installation-via-composer/installation-via-composer

composer require hyva-themes/magento2-scommerce-googletagmanagerpro
composer require scommerce/breeze-googletagmanagerpro

Configuration Settings for Tracking Base

Go to Admin > Stores > Configuration > Scommerce Configuration > Tracking Base

General Settings

gen_trackingbase.jpg

gen_trackingbase2.jpg

gen_trackingbase4.jpg

image.png

Checkout Behaviour

check_behaviour.jpg

Configuration Settings for Google Tag Manager Pro

Go to Admin > Stores > Configuration > Scommerce Configuration > Google Tag Manager Pro

General Settings

gen_gtm.png

gen_gtm2.png

gen_gtm3.png

Cookies From Query Params

gen_gtm4.png

JSONs/Script provided with extension package

NOTE:- Please make sure to import the JSON files again after every upgrade of the module as we keep changing these files time to time and keep them updated with our latest data layers.

The extension package contains JSONs which can be imported in GTM to set up required Tags, Triggers and Variables.

Finding JSON files

Please follow the steps below to download the module:-

Step 1:- Login to your account and go to the My Account Section

finding_json.pngStep 2:- Click on My Downloadable Products

finding_json2.png

Step 3:- Click on the extension and from the dropdown menu select download

finding_json3.png

Go to the extension file m2-google-tag- manager-pro and then to the Data Folder (Path - m2-google-tag-manager-pro/data/) to find these files.

The JSONs can be used to set up

Note:- Please import only one Pinterest JSON file depending upon the extension configuration you are using. If you are only using GA4 and no UA then you can use the Pinterest GA4 JSON file. Also if you have 'Send Product Impression on Scroll ' enabled in Admin>Stores>Configuration>Scommerce Configuration>Tracking Base then use the Pinterest GA4 JSON file as well otherwise you can use the original Pinterest JSON file.

Importing JSONs into GTM

To import JSONS provided with extension package follow below steps:

importing_json.jpg

importing_json2.jpg

importing_json3.jpg

importing_json4.jpg

Setting variable information in GTM

Once the GTM container file has been imported, you need to change variable information with correct value corresponding to the site. To access variables, go to workspace where you have imported the JSONs and click on variables on left hand side navigation.

setting_variable.png

Variables Created with JSON’s

setting_variable2.png

setting_variable3.png

setting_variable4.png

setting_variable5.png

setting_variable6.png

setting_variable7.png

setting_variable8.png

setting_variable9.png

setting_variable10.png

setting_variable11.png

setting_variable12.png

setting_variable13.png

setting_variable14.png

Publishing Tags in GTM

Once all set up is done and verified, need to Publish the tags to make it live on the website.

Step 1 − Click the SUBMIT button at the top right corner of the screen.

It will show the following screen.

setting_variable15.png

Step 2 − Enter an identifiable Version name so that it can be easily understood for the changes made.

With the version description, you can be as elaborate as possible on the changes/additions of the tag in that version.

Step 3 − Scroll down to the Workspace Changes, you will see all the changes made in the tags, which are unpublished or in the PREVIEW mode.

Step 5 − Click PUBLISH and you will be presented with a summary for this version.

Set up Google Analytics 4

set_ga4.jpg

set_ga42.jpg

set_ga43.jpg

set_ga44.jpg

set_ga45.jpg

Now for the final step import our Google Analytics 4 JSON file in your GTM to get all the configurations for GA4. Once done you will see data flowing into Google Analytics 4. Learn more about Google Analytics 4.

Set up Google Adwords Conversion

To setup Google Adwords Conversion, please make sure you add GTM-google_ads_conversion_tracking.json (data folder of the extension) file in your GTM container and add Conversion Label and Conversion ID which you should be able to get from Google Adwords account under Conversion section. This import will create the following tags -:

ads_conversion.png

Setup Enhanced Conversion

To enable enhanced conversions we first need to enable enhanced conversions in Google Adwords then complete the extension setup.

Enable Enhanced Conversions in Google Adwords

  1. Sign in to your Google Ads account.
  2. In the upper right corner of your account, click the tools icon , and under "Measurement," click Conversions.
  3. Open the conversion action you want to use for setting up enhanced conversions.
  4. In the “Enhanced conversions” section at the bottom, click Turn on enhanced conversions.
  5. Select ”Google tag or Google Tag Manager” to set up enhanced conversions.
  6. Click Agree to the compliance statement. By turning on enhanced conversions you confirm that you comply with our policies. The Google Ads Data Processing Terms apply to your use of enhanced conversions.
  7. Click Check URL to check your website for a Google tag.
  8. In “Tag type” you should be defaulted to Google Tag Manager if that is how you track conversions for this conversion action. Because you used Google Tag Manager to set up website tags, you need to use it to set up enhanced conversions. Follow the instructions below to set up enhanced conversions manually with Google Tag Manager.
  9. Click Save.

Note: Once you have accepted the Terms of Service, it can take up to 5 days for your Google Tag Manager account to be enabled for enhanced conversions. Make sure your conversion tracking tag is set up in Google Tag Manager and then check back in 5 days to see the enhanced conversions functionality enabled. Please CLICK HERE for more details.

Setup Enhanced Conversion with the Module

Go to Stores>Configuration>Scommerce Configuration>Tracking Base and set "Enable Enhanced Conversion" to "Yes". Import the JSON file either enhanced conversion using data layers or the normal enhanced conversion JSON that fetches the PII data from the global Javascript object.

enhanced_conversion.png

Once done import the JSON file named "GTM-google_ads_enh anced_conversion_tracking.json" if or import "GTM-google_ads_enhanced_conversion_tracking_using_datalayers.json" provided with the extension(data folder) in your GTM container . Change the 'conversion label' and 'conversion ID' in the "Google Ads Conversion Tracking" tag. Finally publish the changes to finish the setup.

Cookies From Query Params

Cookies from query Params configuration can be used to create new cookie parameters which can be stored in the users browser as per the valid time configured. for eg:- We have created a clickref cookie in the configuration. Now if the cookie parameter is passwed with the URL then that cookie will be created in the browser.

http://magento2.scommerce-mage.co.uk/?clickref=ab101 :- In this url we passed the cookie parameter "clickref" with the value "ab101". We can see this cookie being created in the below image:-

cookies_query_param.jpg

Upgrading the Module From 3.0.1 and Below

If you are using an older version of the extension(3.0.1 and below) where a common data layer is used to populate data to both UA and GA4 then upon updating to the latest version you need to make the following changes in GTM.

Remove these Tags, Triggers and Variables from GTM container

TAGS

Variables

Triggers

Now follow the steps below to import the latest GA4 settings for GTM

Step 1:- Acquire the latest GA4 JSON file provided with the module.

Step 2:- Go to your GTM container then click on admin>Import Container.

upgrading.png

Step 3:- Click on Choose container file and choose the JSON file acquired in step 1 then select the workspace new/existing. Also select Merge>Rename conflicting tags, triggers, and variables so that no crucial setting is lost.

upgrading2.png

Step 4:- Lastly, click confirm to finish the import. Once it's done you will have the latest tags, triggers and variables for GA4 in your GTM.

Secure Execution of Inline Scripts in GTM via CSP Nonce

To enhance compatibility with Content Security Policies (CSP), a nonce attribute for Google Tag Manager (GTM) has been added. When enabled, the module injects a unique nonce value into a script tag on every page, allowing secure execution of inline scripts in GTM while complying with CSP directives.


Step 1: Enable Nonce Injection

  1. Navigate to Stores → Configuration → Scommerce GTM Settings.
  2. Enable the "Push Nonce Value to GTM" flag.
  3. Save the configuration.

Step 2: Verify Script Tag Injection

After enabling the feature, confirm the following script appears in the <span class="editor-theme-code"><span class="editor-theme-code"><head></span></span> section of all pages:

html

<script id="scomGtmVar" data-scom-gtm-var="<?= $block->getHelper()->getNonceValue() ?>"></script>

Note: The <span class="editor-theme-code"><span class="editor-theme-code">data-scom-gtm-var</span></span> attribute contains the dynamically generated nonce value.

Step 3: Create a GTM Variable for Nonce
Use ONE of these methods to capture the nonce value in GTM:

Method A: Custom JavaScript Variable (Recommended)

  1. In GTM, create a new Custom JavaScript variable.
  2. Name it (e.g., <span class="editor-theme-code"><span class="editor-theme-code">Nonce Value</span></span>).
  3. Paste this code:

javascript

function() {
  var el = document.getElementById("scomGtmVar");
  return el ? el.getAttribute("data-scom-gtm-var") : undefined;
}

Method B: DOM Element Variable

  1. Create a DOM Element variable.
  2. Configure:
    • Selection Method: ID
    • Element ID: scomGtmVar
    • Attribute Name: data-scom-gtm-var

Step 4: Modify GTM Tags with Nonce

For every Custom HTML tag using inline scripts:

  1. Add the <span class="editor-theme-code"><span class="editor-theme-code">nonce</span></span> attribute to the <span class="editor-theme-code"><span class="editor-theme-code"><script></span></span> block using the GTM variable:

html

<script nonce="{{Nonce Value}}">  
  // Your inline code here  
</script>
  1. Critical: Enable "Support document.write" in the tag’s Advanced Settings.
  2. Save and publish the container.

Step 5: Validation & Troubleshooting

Verify Successful Implementation

Nonce in Page Source:

Inspect the page’s <head> to confirm data-scom-gtm-var contains a value (e.g. bTIzb3B5Y2pobDZvamJtamZoaHdrYnRxcXI5b3owcW4<span class="editor-theme-code"><span class="editor-theme-code">=</span></span>). \

Tag Execution:

CSP Errors:

Front-end Screenshots

Order Total of Product without VAT

Go to Stores > Configuration > Scommerce > Google Tag Manager Pro. Scroll down to option Order Total Include Vat and toggle it to ‘No’. When turned ‘No’ the total order value data sent to Google analytics will not include VAT.

front_gtm.png

Order Total of Product with VAT

Go to Stores > Configuration > Scommerce > Google Tag Manager Pro. Scroll down to option Order Total Include Vat and toggle it to ‘Yes’. When turned ‘Yes’ the total order value data sent to Google analytics will also include VAT.

front_gtm2.png

Send SKU of Child Product

Go to Stores > Configuration > Scommerce > Google Tag Manager Pro. Scroll down to the option Always Send Parent SKU and toggle it to ‘No’. When turned ‘No’ if the customer selects a configurable product then the SKU data sent to Google analytics will be of the child product.

front_gtm3.png

Send SKU of Parent Product Only

Go to Stores > Configuration > Scommerce > Google Tag Manager Pro. Scroll down to the option Always Send Parent SKU and toggle it to ‘Yes’. When turned ‘Yes’ if the customer selects a configurable product then only the SKU of the parent product will be sent to Google analytics.

front_gtm4.png

Send Parent Category

Go to Stores > Configuration > Scommerce > Google Tag Manager Pro. Scroll down to the option Send Parent Category and toggle it to ‘Yes’. When turned ‘Yes’ if the customer selects a product then it will send the entire category path to the analytics if “No” then it will only send the category name.

front_gtm5.png

Primary Category

Go to Catalog > Products and select any product. Then Scroll down to the option Primary Category.

image - 2025-07-15T183615.302.jpg

Here you can set the primary category for any product. If you do not wish to send the assigned category to analytics, then you select which category path or name you want to send.

primary.png

Here you can set the primary category for any product. If you do not wish to send the assigned category to analytics, then you select which category path or name you want to send.

Set up Consent Mode V2 with GTM

Please follow the below guide to set up consent mode v2 with GTM, also you would need to have both GTM and GDPR modules to complete this setup.

GDPR:- https://www.scommerce-mage.com/magento-2-gdpr.html

Consent Mode:- https://docs.scommerce-mage.com/magento-2-extensions/analytics-and-tracking-extensions/magento-2-consent-modes-setup-guide

If you have a question related to this extension please check out our FAQ Section first. If you can't find the answer you are looking for then please contact support@scommerce-mage.com.

Magento 2 missing orders or transactions in Google Analytics (GA)

Installation and User Guide for Magento 2 Google Analytics Synchronization Extension

Table of Contents

  1. Installation
    • Installation via app/code
    • Installation via Composer
  2. Configuration Settings for Google Analytics Synchronization
    • General Settings
    • GA4
    • Select Store View
  3. Verify/Test Synced Transactions
    • GA4 Sync Log grid
    • GA4 Sync Log File
    • Google Analytics 4 Real Time Reports
    • Google Analytics 4 Custom Reports
  4. Order Tracking Information
  5. Create Project in Google Developer Console for GA Reporting API
  6. Getting View ID (Universal Analytics)
  7. Getting Property ID (GA4)
  8. Command to run the Synch Manually

Installation

https://docs.scommerce-mage.com/magento-2-extensions/installation-via-composer/installation-via-composer

Configuration Settings for Google Analytics Synchronization

Go to Admin > Stores > Configuration > Scommerce Configuration > Google Analytics Synchronization

General Settings

image (149).png

image (150).png

image (151).png

image (152).png

image (153).png


GA4

image (173).png

Select Store View

image (155).png

image (157).png

image (158).png

image (159).png

GA4

image (172).png

Verify/Test Synced Transactions

The synced transactions can be verified in two ways. Either checking the GA Sync logs or by checking the Real time reports in GA4 (as it takes 24 to48 hrs for GA4 to attribute data to reports realtime is the quickest way to verify).

image (178).png

After clicking on "GA Sync Logs", user would see the generated logs in the Sync Log Grid.

image (179).png

User can also use filters to check a particular log in the grid.

image (180).png

image (181).png

After downloading/viewing the file, user can check the logs. This file contains details of each synced transaction alongwith the order data that was sent, please refer to the image below:-

image (182).png

Google Analytics 4 Real Time Reports

Go to your Google Analytics 4 Property then from left menu click on reports:

image (3) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png

Next, select realtime from the left menu and under the event name column you can find the purchase event by clicking on that you can verify the transaction ID that was sent through the sync module.

image (3) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png

Google Analytics 4 Custom Reports

You can create a transaction report in GA4 using custom reports to verify the transactions received. For more information, please Click Here

Order Tracking Information

The order tracking info is captured against each order which is later used to sync the transactions to GA4 attributing them to correct sessions and dates to improve report accuracy. The order tracking info can be viewed by going into Admin>Sales>Order>Edit any order. Please refer to the screengrab below.

image (185).png

Create Project in Google Developer Console for GA Reporting API

Please follow the steps below to create project in Google developer console for GA reporting API and to obtain "application name" and "security key JSON File": -

Go to https://console.developers.google.com/. Click on the dropdown on the left as shown in the image below and a popup will appear on your screen.

image (163).png

Click on New Project

image (166).png

Enter your project name and Location then click on create.

image (165).png

Click on Enable APIS and SERVICES

image (167).png

In the next window search for Google Analytics Reporting API, this API gets used for GA4 along with Analytics Data API

image (168).png

Click on Enable to enable the API

image (169).png

Similarly enable the below API's as well:-

Click on Credentials from the left window then click on Create Credentials and choose service account.

image (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png

In the next window, fill in your service account name and description then click on Create. An email will be automatically created as per your name. We need to add this email in google analytics. We will do it in the steps down below. Your service name will be your Application Name that you will enter in the configuration.

image (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png

Click on continue without selecting a role.

image (2) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png

image.png

image.png

image.png

Getting View ID (Universal Analytics)

Login to Your Google Analytics account and go to Admin>View Settings. You will be able to see your view Id there. You need to input this into the configuration as well.

image.png

Getting Property ID (GA4)

image.png

Command to run the Synch Manually

php bin/magento scommerce:analyticssync:synchronize

If you have a question related to this extension please check out our FAQ Section first. If you can't find the answer you are looking for then please contact support@scommerce-mage.com.

Magento 2 Google Global Site Tag (gtag.js) with GA4(Google Analytics 4) Enabled

Installation and User Guide for Magento 2 Global Site Tag (gtag.js) Extension

Table of Contents

  1. Installation
    • Installation via app/code
    • Installation via Composer
    • Installation via Composer( (Hyvä Theme):
  2. Configuration Settings for Tracking Base
    • General Settings
    • Checkout Behaviour
  3. Configuration Settings for Global Site Tag (gtag.js)
    • General Settings
  4. Set up Google Analytics 4
  5. Set Up Cross Domain Measurement
  6. Front-end Site view
    • Home Page with Tags
    • Gtag.js Code
    • Gtag.js Brand Name

Installation

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

https://docs.scommerce-mage.com/magento-2-extensions/installation-via-composer/installation-via-composer

composer require hyva-themes/magento2-scommerce-gtag

Configuration Settings for Tracking Base

Go to Admin > Stores > Configuration > Scommerce Configuration > Tracking Base

General Settings

gtag_config_1.png

image.png

image (1).png


Checkout Behaviour

image (2).png

Configuration Settings for Global Site Tag (gtag.js)

Go to Admin > Stores > Configuration > Scommerce Configuration > Global Site Tag (gtag.js)

General Settings

image (3).png

image (4).png

Set up Google Analytics 4

image.jpg

Set Up Cross Domain Measurement

Step 1:- Go to Google Analytics 4 Admin>Data Streams>Select your stream>Configure Tag Settings >Configure Your Domains, here add your domains or subdomains that you want to track.

image (5).png

Step 2:- Add the all domains added above in the configuration "Domains to link" comma separated. Now if you have any links taking you from your main site to the linked site, _gl cookie is automatically apended to the URL that contains several information such as source website, source campaign etc hereby accomplishing the cross domain measurement. an example of such URL is as follows: 

https://magento2demo.scommerce-mage.co.uk/?_gl=1fzl3bd_gaMTk3ODY0NTU1Mi4xNzIyODQzNDc3_ga_FWXJFY956H*MTcyMjg1OTYxOC40LjEuMTcyMjg1OTYzNS4wLjAuMA..

Front-end Site view

image (1) (1).png

image (2) (1).png

image (1).jpg

If you have a question related to this extension please check out our FAQ Section first. If you can't find the answer you are looking for then please contact support@scommerce-mage.com.

Magento 2 Consent mode's setup guide

IN MAGENTO

  1. Once you have installed the modules “Google Tag Manager Pro Tracking”, “Tracking Base”, ”Cookie Popup” and “GDPR”, enable them and enter the correct license key.

0 (1) (1).png

  1. After that, go to “Customers” -> “Manage Cookie Choices” and click on “Add new Cookie Choice” to set up cookie choices in the Cookie Popup extension.

1 (9).png

2a. You can do the setup of a new cookie as shown in the below image or you can create your own cookie/s. Please note that “Cookie Name” and “Set by default” are the most important fields as they would be used in the cookie mapping as described in the later steps.

2 (5).png

2b. Once you have created a cookie or multiple cookies, your setup should resemble the below image-

3 (5).png

  1. Now, go to “System”->”Configuration”->“Tracking Base”. Scroll down and you would see the field “Enable Consent Mode”, enable it in order to enable the consent mode. Then, go to “Cookie mapping”, add the “Consent Param” that are given in the description”(personalization_storage, functionality_storage, security_storage are not mandatory for correct consent setup), set the “Default value” of the consent parameter as “granted” or “denied” based on the “Set by default” (step 2a) value of the cookie. Use the “Cookie Name” that you used while creating the cookies. For example- analytics_storage, if you want to do mapping of this consent param with Analytics cookie then in the field “Cookie name” add “analytics_cookie” because this cookie name was used when you were creating cookies (step 2a). While creating the cookie (in this case Analytics cookie), if the value of “Set by default” is set to “No” then while doing the mapping the “Default value” of the consent param (in this case analytics_storage) that is associated with that cookie should be set to “denied” or vice versa.

4 (4).png

On Magento’s end consent mode setup is complete.

In GTM

  1. Open the container that is connected with our GTM module, go to “Admin”->“Container Settings” and enable consent overview present in the additional settings.

5 (2).png

6 (1) (1).png

  1. Go to “Workspace”->”Tags” -> click on “Consent Overview” (shield) and set up consent for each tag. Make sure to select “No additional consent required” for Tags that already have “Built-In Consent”. These tags are generally Google related tags.

7 (1) (1).png

8 (1) (1).png

2a. In order to add “Additional Consent”, click on the tag name and go to ”Consent Settings” and choose “Require additional consent for tag to fire” and add the consent param that you want as “Additional Consent”. If cookies related to the consent parameter that is chosen as an additional consent are not accepted then that tag would not fire.

9 (1) (1).png

Verification

  1. In order to verify whether the consent mode is working as per the configuration you have set or not, you can preview your changes and compare them with the frontend as shown in the below images. All the values should be the same.

10 (1) (1).png

11 (1) (1).png

12 (1) (1).png

13 (1) (1).png

14 (1) (1).png