Google Tag Manger for Magento2
Online Documentation

Leave the setup & debugging to us,
so that you can focus your time on what you do best.

Purchase Support

Related Extensions

Get more from your Magento2 store!

Enhanced Transactional Emails

Enhanced Transactional Emails

Get more from your order confirmation emails by promoting other complementary products.

Enhanced Success Page

Enhanced Success Page

Add cross-sell, upsell, related products, social media links and other elements to your order confirmation.

Order Shipment Tracking

Order Shipment Tracking

Providing your customer with a beautiful and functional order package tracking without leaving your site.

Total Downloads Latest Stable Version GitHub stars GitHub forks

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

Step 1

composer require magepal/magento2-googletagmanager

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

Google Tag Manager

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

Extension Support

Like all other open source projects, sometimes things work and sometimes they don't for one reason or another.

We receive multiple emails & support tickets almost daily asking for help and we would love to help but in most cases, these issues have nothing to do with our extension and mostly caused by lack of basic Magento knowledge.

At MagePal our main focus is designing great Magento Extension and due to our limited resources, we simply can not provide free support for a free product.

Our affordable technical support include help with installation, usage, configuration, and troubleshooting for our Free Community Edition extensions.

Setup your Tags, Triggers and Variables in Google Tag Manager

Google Tag Manager

Step 4 - 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 Analytic Setting
  5. Enable Enable Enhanced Ecommerce Features and Data Layer
  6. Select your trigger for all pages

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.

Customer

Product Impression

Category

Product Detail Page

Cart

Add to Cart
Remove from Cart

Global Data Layer

Order

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

Google Tag Manager

Enable preview mode

To enable 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.

Google Tag Manager

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.