Google Tag Manager for Magento

What is Google Tag Manager?

Google Tag Manager (GTM) is a user-friendly, powerful and must have integration in every Magento store. It simplifies the process of adding, edit and manage third-party JavaScript tags and other snippets of code on your Magento site. With GTM, you can quickly and easily add Facebook tags, AdWords Conversion Tracking, Re-marketing, Bing UET, SnapChat, DoubleClick code, Google Analytics and many more in a breeze without the need for a developer to make changes to your Magento code providing the data is available to Google Tag Manager.

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