Enhanced E-commerce for Google Tag Manger
Online docs
Purchase Extension

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.

Enhanced Ecommerce for Google Tag Manager

What is Enhanced E-commerce?

Enhanced Ecommerce provides useful metrics and reports that standard Google Analytics do not provide. These reports provide new insight on how your customer are interacting with your products by tracking product impressions, product detail views, add to cart actions, remove from cart actions, check out steps and items purchased. Our Magento 2 extension provide the necessary integration and data layer for Google Tag Manager so that you can quickly and easily add Enhanced E-Commerce to your Magento store.

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

Review license.txt

Step 2

Install Google Tag Manager (version 2.3.0 or greater)

composer require magepal/magento2-googletagmanager

Learn more about installing and setting up Google Tag Manager

Step 3

Install Enhanced E-commerce for Google Tag Manager

Step 4

Enable Module (from {Magento root} folder)

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

Configure Enhanced E-commerce for Google Tag Manager

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. Enable Enhanced Ecommerce

Setup your Tags, Triggers and Variables in Google Tag Manager

Google Tag Manager

Step 4 - Log into your Google Tag Manager account

Google Tag Manager

After logging into your Google Tag Manager account, you will need to configure Google Tag Manager to send the information to Google Analytics once the various event happen. To do this you will need to follow the following instruction below.

  1. Choose “Tags”
  2. Then click “New”
  3. Click “Choose a tag type to begin setup”
  4. Click on “Google Analytics - Universal Analytics” for “tag type”
  5. Enter setting below for Track Type, Category, Action, Non-Interaction
  6. Click “Choose a trigger to make this tag fire…”
  7. Then click on the “+” sign to add a new “Trigger Configuration”
  8. Click “Choose a trigger type to begin setup…”
  9. Choose “Custom Event”
  10. Enter the “Event Name”
  11. Then save configuration.
Add to Cart
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Add to Cart
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : addToCart
Checkout
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Checkout
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : checkout
Checkout Option
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Checkout Option
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : checkoutOption
Product Click
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Product Impression
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : productClick
Product Detail
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Product Detail
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : productDetail
Product Impression
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Product Impression
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : productImpression
Purchase
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Purchase
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : purchase
Remove from Cart
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Remove from Cart
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : removeFromCart
Refund (Admin)
Tag Configuration
  Tag type : Google Analytics - Universal Analytics
  Track type : Event
  Category : Ecommerce
  Action : Refund
  Non-Interaction Hit : True

Trigger Configuration
  Trigger: All Custom Events
  Event Name : refund

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.

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\OrderItemProvider">
        <arguments>
            <argument name="orderItemProviders" xsi:type="array">
                <item name="order-item-provider-brand" xsi:type="object">MagePal\GoogleTagManagerAddons\DataLayer\OrderData\OrderProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Learn more about customizing our Google Tag Manager extension

jQuery Events | API

$("body").on("mpCustomerSession", function (event, type, products, datalayer) {

});
/*
 * @type AddToCart | RemoveFromCart
 */
$("body").on("mpCartItem", function (event, type, products) {

});
$("body").on("mpCheckout", function (event, index, title, code, products) {

});
$("body").on("mpCheckoutOption", function (event, step, checkoutOption) {

});
$("body").on("mpProductClick", function (event, product) {

});

Data layer attributes

In addition to all of the standard data elements provided by our Google Tag Manger extension, our Enhanced E-commerce extension include additional data layer element.

Enhanced E-commerce Data Layer

Product Page
Category Page / Product Impression
Add to Cart
Remove from Cart

Global Data Layer

Debugging Enhanced E-commerce for 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.

For general debugging information see how to debug Google Tag Manager

How to debug productClick event not triggering

Enhanced Ecommerce for Magento

Unlike other Enhanced Ecommerce extensions that add hundreds of lines of JavaScript to your site, our extension was designed to minimize the amount of code injected in your site. Our extension was design to use Magento HTML and CSS classname to function correctly. In rear situation third party themes, extensions or developers my change the default Magento structure which cause our extension to not fire all events. Fixing this is as simple as remapping your site HTML structure in our extension.

In Chrome or any other browser, go to your Elements tabs and find the item collection elements.

Class Name | Selector
Container Class Name | Selector

You can quickly test your selector you run the code below in your browser’s console.


//should return each product link
jQuery('.products-grid .product-item a[class*="product-item-"]')

//should return the parent container for each item
jQuery('.products-grid .product-item')

Version History | Change Log

1.2.0


1.1.6


1.1.5


1.1.4


1.1.3


1.1.2


1.1.1