Google Tag Manager for Magento 2

What is Google Tag Manager?

Google Tag Manager (GTM) is a user-friendly, powerful, and essential integration for every Magento 2 store. It simplifies the process of adding, editing, and managing third-party JavaScript tags and tracking pixels on your Magento site without manual template modifications.

With GTM, you can quickly deploy Meta Pixel (Facebook), Google Ads Conversion Tracking, Google Analytics 4 (GA4), Remarketing, Microsoft Advertising (Bing UET), Pinterest Tag, TikTok Pixel, Snapchat Pixel, and custom JavaScript snippets directly through the Tag Manager container.

Want to learn more about your customers? Gain valuable insight on your customers shopping behavior, sales performance and more. Upgrade to our new Enhanced E-commerce to take full advantage of Google Analytics most valuable features.

Adding Facebook Pixel, Bing UET, or other third-party JavaScript to your site using Google Tag Manager? Learn how simple and easy it is to integrate any third party service with our new DataLayer extension.

Installation Guide

Need Help? Purchase Support

Step 1

Using Composer (recommended)

composer require magepal/magento2-googletagmanager

Using Hyvä Magento 2 Theme?

• Installing the compatibility extension is necessary if you are using Hyvä Magento 2 Theme.

composer require hyva-themes/magento2-magepal-googletagmanager

Manually (not recommended)

• Download and install our core extension
  • https://github.com/magepal/magento2-core
• Download the extension (Install Google Tag Manager version 3.0.0 or greater for Magento 2.4.0 and above)
• Unzip the file
• Create a folder {Magento 2 root}/app/code/MagePal/GoogleTagManager
• Copy the content from the unzip folder

Step 2 - Enable GTM (“cd” to {Magento root} folder)

  php -f bin/magento module:enable --clear-static-content MagePal_GoogleTagManager
  php -f bin/magento setup:upgrade

Configure Google Tag Manager Extension

Step 3 - How to Configure Google Tag Manager

Log into your Magento 2 Admin

1. Goto Stores
2. Configuration
3. MagePal
4. Google Tag Manager
5. Enter your GTM account number

Step 4 - Extension Review

Like our extensions? Would you be kind enough to leave us a Google review? It only takes a minute and we’d be eternally grateful! Just click the link to go to our MagePal Google Business page and leave us your feedback.

Extension Support

Setup your Tags, Triggers and Variables in Google Tag Manager

Google Tag Manager Container JSON Import

• Google Tag Manager JSON Import Configuration

Manually Configure Google Tag Manager + Universal Analytics

Step 5 - Log into your Google Tag Manager account

1. Click on “Tags”
2. Click “New”
3. Select “Google Analytics - Universal Analytics” for “Tag Type”
4. Select your Google Analytics Setting
5. Enable Enhanced Ecommerce Features and Data Layer
6. Select your trigger for all pages

Get more from Google Tag Manager with our add-on Extensions

GTM - Google Tag Manager for Magento 2 Extension

GA4 - Google Analytics 4 for Google Tag Manager Extension

EE - Enhanced E-commerce for Google Tag Manager Extension

DL - DataLayer for Google Tag Manager Extension

Data Layer Customization | API

Add more information to the data layer to meet your client needs is as simple as adding few lines of php and di.xml code in your custom extension.

Category Data Layer Customizing

namespace MagePal\GoogleTagManagerAddons\DataLayer\CategoryData;
    
/**
 * Class ItemBrandProvider
 * @package MagePal\GoogleTagManager\DataLayer
 * @method getCategory()
 */
class CategoryIdProvider extends \MagePal\GoogleTagManager\DataLayer\CategoryData\CategoryAbstract
{
    /**
     * @return array
     */
    public function getData()
    {
        $data =  [
            'category_id' => $this->getCategory()->getId()
        ];

        return $data;
    }
}

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="MagePal\GoogleTagManager\DataLayer\CategoryData\CategoryProvider">
        <arguments>
            <argument name="categoryProviders" xsi:type="array">
                <item name="category-id" xsi:type="object">MagePal\GoogleTagManagerAddons\DataLayer\CategoryData\CategoryIdProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Product Data Layer Customizing

namespace MagePal\GoogleTagManagerAddons\DataLayer\ProductData;
    
/**
 * Class OrderProvider
 * @package MagePal\GoogleTagManager\DataLayer
 * @method getProduct()
 */
class ProductProvider extends \MagePal\GoogleTagManager\DataLayer\ProductData\ProductAbstract
{
    /**
     * @return array
     */
    public function getData()
    {
        $data =  [
            'brand' => $this->getProduct()->getManufacturer()
        ];

        return $data;
    }
}

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="MagePal\GoogleTagManager\DataLayer\ProductData\ProductProvider">
        <arguments>
            <argument name="productProviders" xsi:type="array">
                <item name="product-id" xsi:type="object">MagePal\GoogleTagManagerAddons\DataLayer\ProductData\ProductProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Quote Item Data Layer Customizing

namespace MagePal\GoogleTagManagerAddons\DataLayer\QuoteItemData;
    
/**
 * Class OrderItemProvider
 * @package MagePal\GoogleTagManager\DataLayer
 * @method getQuote()
 * @method getTransactionData()
 */
class QuoteItemProvider extends \MagePal\GoogleTagManager\DataLayer\QuoteData\QuoteItemAbstract
{
    /**
     * @return array
     */
    public function getData()
    {
        $data =  [
            'brand' => $this->getItem()->getProduct()->getManufacturer()
        ];

        return $data;
    }
}

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="MagePal\GoogleTagManager\DataLayer\OrderData\OrderItemProvider">
        <arguments>
            <argument name="orderItemProviders" xsi:type="array">
                <item name="item-brand" xsi:type="object">MagePal\GoogleTagManagerAddons\DataLayer\QuoteData\QuoteItemProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Quote Data Layer Customizing

namespace MagePal\GoogleTagManagerAddons\DataLayer\QuoteData;
    
/**
 * Class QuoteProvider
 * @package MagePal\GoogleTagManager\DataLayer
 * @method getQuote()
 * @method getTransactionData()
 */
class QuoteProvider extends \MagePal\GoogleTagManager\DataLayer\QuoteData\QuoteAbstract
{
    /**
     * @return array
     */
    public function getData()
    {
        $data =  [
            'tax' => $this->getQuote()->getTax()
        ];

        return $data;
    }
}

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="MagePal\GoogleTagManager\DataLayer\QuoteData\QuoteProvider">
        <arguments>
            <argument name="quoteProviders" xsi:type="array">
                <item name="order-item-provider-brand" xsi:type="object">MagePal\GoogleTagManagerAddons\DataLayer\QuoteData\QuoteProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Order Item Data Layer Customizing

namespace MagePal\GoogleTagManagerAddons\DataLayer\OrderItemData;
    
/**
 * Class OrderProvider
 * @package MagePal\GoogleTagManager\DataLayer
 * @method getItem()
 */
class ItemBrandProvider extends \MagePal\GoogleTagManager\DataLayer\OrderData\OrderItemAbstract
{
    /**
     * @return array
     */
    public function getData()
    {
        $data =  [
            'brand' => $this->getItem()->getProduct()->getManufacturer()
        ];

        return $data;
    }
}

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="MagePal\GoogleTagManager\DataLayer\OrderData\OrderItemProvider">
        <arguments>
            <argument name="orderItemProviders" xsi:type="array">
                <item name="item-brand" xsi:type="object">MagePal\GoogleTagManagerAddons\DataLayer\OrderData\OrderItemProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Order Data Layer Customizing

namespace MagePal\GoogleTagManagerAddons\DataLayer\OrderData;
    
/**
 * Class OrderProvider
 * @package MagePal\GoogleTagManager\DataLayer
 * @method getItem()
 * @method getOrder()
 * @method getListType()
 */
class OrderProvider extends \MagePal\GoogleTagManager\DataLayer\OrderData\OrderAbstract
{
    /**
     * @return array
     */
    public function getData()
    {
        $data =  [
            'tax' => $this->getOrder()->getTax()
        ];

        return $data;
    }
}

di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="MagePal\GoogleTagManager\DataLayer\OrderData\OrderProvider">
        <arguments>
            <argument name="orderProviders" xsi:type="array">
                <item name="order-provider-tax" xsi:type="object">MagePal\GoogleTagManagerAddons\DataLayer\OrderData\OrderProvider</item>
            </argument>
        </arguments>
    </type>
</config>

jQuery Events | API

$("body").on("mpCustomerSession", function (event, customer, cart, datalayer){

});

Data layer attributes

Our Magento extension provide a vast array of over 60 preconfigure data layer elements to make integrating your Magento store with any third-party service a breeze using Google Tag Manager.

• Trigger: event equals gtm.dom
  • pageType (i.e catalog_category_view)
  • list (cart, category, detail, other)

Customer

• Trigger: event equals mpCustomerSession
  • customer.isLoggedIn
  • customer.id
  • customer.groupId
  • order.email_sha1**
  • order.email**
  • order.customer_id**

Product Impression

• Trigger: event equals productImpression
  • ecommerce.impressions[].name*
  • ecommerce.impressions[].id*
  • ecommerce.impressions[].price*
  • ecommerce.impressions[].list*
  • ecommerce.impressions[].position*
  • ecommerce.impressions[].category*

Category

• Trigger: event equals categoryPage
  • category.id
  • category.name
  • category.path

Product Detail Page

• Trigger: event equals productPage
  • product.id
  • product.name
  • product.sku
  • product.parent_sku
  • product.price
  • product.product_type
  • attribute_set_id
  • product.path
• Trigger: event equals productDetail
  • ecommerce.currencyCode*
  • ecommerce.products[].id*
  • ecommerce.products[].name*
  • ecommerce.products[].category*
  • ecommerce.products[].price*

Cart

• Trigger: event equals cartPage
  • cart.hasItems
  • cart.items[].sku
  • cart.items[].parent_sku
  • cart.items[].product_type
  • cart.items[].name
  • cart.items[].parent_name
  • cart.items[].price
  • cart.items[].quantity
  • cart.total
  • cart.itemCount
  • cart.itemQty
  • cart.hasCoupons
  • cart.couponCode

Add to Cart

• Trigger: event equals addToCart
  • ecommerce.add.products[].id*
  • ecommerce.add.products[].name*
  • ecommerce.add.products[].price*
  • ecommerce.add.products[].quantity*
  • ecommerce.add.products[].parent_sku*
  • ecommerce.add.products[].variant*
  • ecommerce.add.products[].category*

Remove from Cart

• Trigger: event equals removeFromCart
  • ecommerce.remove.products[].id*
  • ecommerce.remove.products[].name*
  • ecommerce.remove.products[].price*
  • ecommerce.remove.products[].quantity*
  • ecommerce.remove.products[].variant*
  • ecommerce.remove.products[].category*

Global Data Layer

• Trigger: event equals addToCart
  • cart.add.products[].id*
  • cart.add.products[].name*
  • cart.add.products[].price*
  • cart.add.products[].quantity*
  • cart.add.products[].parent_sku*
  • cart.add.products[].variant*
  • cart.add.products[].category*
• Trigger: event equals removeFromCart
  • cart.remove.products[].id*
  • cart.remove.products[].name*
  • cart.remove.products[].price*
  • cart.remove.products[].quantity*
  • cart.add.products[].parent_sku*
  • cart.remove.products[].variant*
  • cart.remove.products[].category*

Order

• Trigger: event equals gtm.orderComplete (Google Analytics)
  • transactionId
  • transactionAffiliation
  • transactionTotal
  • transactionShipping
  • transactionTax
  • transactionCouponCode
  • transactionDiscount
  • transactionSubTotal
  • transactionProducts[].sku
  • transactionProducts[].parent_sku
  • transactionProducts[].product_type
  • transactionProducts[].name
  • transactionProducts[].price
  • transactionProducts[].quantity
• Additional Order Date (Generic)
  • order.order_id
  • order.store_name
  • order.total
  • order.subtotal
  • order.shipping
  • order.tax
  • order.coupon_code
  • order.coupon_name
  • order.discount
  • order.payment_method.title
  • order.payment_method.code
  • order.shipping_method.title
  • order.shipping_method.code
  • order.is_virtual
  • order.is_guest_checkout
  • order.email_sha1**
  • order.email**
  • order.customer_id**
  • order.has_previous_order**
  • order.is_first_order**
  • order.previous_order_count**
  • order.is_new_customer**
  • order.items[].sku
  • order.items[].id
  • order.items[].parent_sku
  • order.items[].product_id
  • order.items[].name
  • order.items[].parent_name
  • order.items[].price
  • order.items[].quantity
  • order.items[].subtotal
  • order.items[].product_type
  • order.items[].discount_amount
  • order.items[].discount_percent
  • order.items[].tax_amount
  • order.items[].is_virtual
  • order.items[].variant
  • order.items[].categories

* - Data layer provide by our Enhanced Ecommerce Extension

** - Data layer provide by our Data Layer Extension

Debugging Google Tag Manager

Even the most advanced Google Tag Manager users often run into issues while setting up new tags. Frustrated by the process we often ask ourselves, why doesn’t my tag fire, what data is sending to Google Analytics and why didn’t this trigger work?

One of the most overlooked, yet important steps while working with GTM is its preview and debugging mode. Google Tag Manager’s preview mode allows you to preview your container code as if the current container draft was deployed so that you can test your configuration before it is published.

Enable preview mode

To enable Google Tag Manager preview mode, click Preview. Google Tag manager will display a banner across the top of the workspace overview page to indicate that preview mode is active.

Once preview mode is enabled a debug pane will display at the bottom of your browser content, which display all the fired tags fired, which data is available on the data layer at that moment in time and the order the tags are firing.

Version History | Change Log

3.0.3

• Fixed bugs:

  • Fix getParentBlock() returning false for custom blocks (issue #92)

3.0.2

• New Features:

  • Add support for PHP 8.5 and Magento 2.4.9

3.0.1

• New Features:

  • Add support for Magento 2.4.8 and PHP 8.4
  • Update company URLs to use HTTPS

3.0.0

• Fixed bugs:

  • Add Content Security Policy (CSP) support (issue #87)

2.7.8

• New Features:

  • Add support for PHP 8.3

2.7.7

• Fixed bugs:

  • Fix data layer tracking with custom domains

2.7.6

• Fixed bugs:

  • Fix data layer tracking with custom domains

2.7.5

• New Features:

  • Add support for custom domain using GTM JS client

• Fixed bugs:

  • Improve error checking

2.7.4

• New Features:

  • Add support for Netopia payment

2.7.3

• New Features:

  • Add support for Magento 2.4.6 and PHP 8.2

2.7.2

• New Features:

  • Add GA4 to suggested extension list

• Fixed bugs:

  • Fixed category naming convention for GA4 extension

2.7.1

• New Features:

  • Add support for PHP 8.1
  • Add missing img-src policy for www.googletagmanager.com

2.7.0

• New Features:

  • Add support for GA4 and Enhanced Ecommerce simultaneously

2.6.2

• Fixed bugs:

  • Fix invalid JSON at widget initialization

2.6.1

• Fixed bugs:

  • Fix inconsistency in escaping product name characters

2.6.0

• New Features:

  • Update price tracking logic for GA4

• Fixed bugs:

  • Fix: Invalid argument supplied for foreach()

2.5.5

• New Features:

  • Add support for GTM environments and Magento Content Security Policies

2.5.2

• New Features:

  • Rewrite PDP price logic

• Fixed bugs:

  • Fix return type

2.5.1

• New Features:

  • Add support for Magento 2.4.0

2.5.0

• New Features:

  • Performance improvement
  • Add jQuery events before/after GTM load
  • Remove static for formatPrice method, and so, make customization possible

• Fixed bugs:

  • Issue #63 - Varnish and GDPR issue

2.4.0

• Fixed bugs:

  • Issue #60 and bug fixes

2.3.1

• New Features:

  • Add support for PHP 7.3
  • Add item tax to the data layer

2.3.0

• New Features:

  • Add GDPR options

2.2.9

• New Features:

  • Update Composer requirements for Magento 2.3.1 compatibility
  • Add support for Magento 2.3 and PHP 7.2

2.2.8

• Fixed bugs:

  • Issue #5 - PHP 7.2 Support & Magento 2.3.0

2.2.7

• New Features:

  • Ensure to load datalayer script once customer-data is loaded

2.2.6

• New Features:

  • Add Enhanced E-commerce link

2.2.5

• New Features:

  • Add store scope

2.2.2

• Fixed bugs:

  • Fix compatibility with HTML minification

2.2.0

• New Features:

  • Prevent duplicate event
  • Reset order products array
  • Convert price to float

• Fixed bugs:

  • Fix order number converting to int

2.1.1

• Add a Google Tag Manager event

2.0.7

• New Features:

  • Update the body tag in layout XML

2.0.6

• Fixed bugs:

  • Fix Composer dependency requirements for Magento 2.2

2.0.4

• New Features:

  • Add support for Magento 2.2 and PHP 7.1
  • Add Method Visibility (‘protected’) to class

2.0.3

• Fixed bugs:

  • Fix transaction data in the order data layer

2.0.2

• Fixed bugs:

  • Fix an AJAX error

2.0.1

• Fixed bugs:

  • Issues #20 - Fix dependency-injection compilation failure

2.0.0

• New Features:

  • Add a JavaScript layer to push cart and customer data to the data layer

1.2.3

• New Features:

  • Add the data layer and JavaScript to the page header

1.2.2

• Fixed bugs:

  • Issue #7 - Undefined variable: items

1.2.1

• New Features:

  • Removed isUserNotAllowSaveCookie() method
  • Add varnish support

• Fixed bugs:

  • Magento 2 Caching bug workaround
  • Issues #8 - Undefined variable: items

1.1.2

• New Features:

  • Add varnish support

• Fixed bugs:

  • Magento 2 Caching bug workaround
  • Issues #8 - Undefined variable: items
  • Issue #7 - Add Data Layer for VAT/Tax, Coupon, Discount and Subtotal

1.1.0

• New Features:

  • Add support for Magento 2.1

1.0.2

• New Features:

  • Add support for custom data layers through events

1.0.1

• First release