Google Analytics 4 for Google Tag Manager
Magento E-commerce Online Documentation
Google Analytics 4 for Google Tag Manager

Google Analytics 4 for Google Tag Manager

What is Google Analytics 4?

Upgrade to the next generation of tracking from Google. GA4 comes with a bunch of new features that make it very different, yet more powerful than Enhanced Ecommerce. Gain access to GA4 new approach to privacy-first tracking, channel measurement, and AI based predictive data with our new Google Analytics 4 extension.

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 Analytics 4 for Google Tag Manager

Using Composer (recommended)

composer require magepal/magento2-google-analytics4
composer require magepal/magento2-googletagmanager

Learn more about installing and setting up Google Tag Manager

Download Google Analytics 4 extension

Step 3

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_GoogleAnalytics4
 php -f bin/magento setup:upgrade

Configure Google Analytics 4 for Google Tag Manager

Google Tag Manager

Step 4 - Configure Google Tag Manager Extension Setting

Log into your Magento 2 Admin

  1. Goto Stores
  2. Configuration
  3. MagePal
  4. Google Tag Manager
  5. Enable Enhanced Ecommerce

Step 5 - Extension Review

Like our extensions? Please take a minute to do quick Google Review.

Please Note : Reviewing our extensions, not only help us improve our plugins but also let others know how much we care about creating the best Magento 2 extensions.

Google Tag Manager Account Setting & Configuration

Google Tag Manager Magento

The quickest way to configure your Google Tag Manager Container is to use our auto import JSON config import file for Google Tag Manager. Our configuration (.json) file is used to simplify the process, importing to generate a tag in your GTM container. For additional information, see Google’s Container export and import which provide walk-through on how to importing a sample JSON file to a new container. You can also manually configure our Enhanced eCommerce extension.

Google Tag Manager Configuration Instructions

Google Tag Manager GA4 Container JSON Import

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("mpGa4ProductClick", function (event, product, list) {

});
$("body").on("mpGa4CheckoutShippingStepValidation", function (event, isFormValid, errors) {

});
$("body").on("mpGa4CheckoutPaymentStepValidation", function (event, data) {
    data.isValid (bool)
    data.errorMsg (array)
});
$("body").on("mpGa4CheckoutEmailValidation", function (event, emailExist) {

});

Data layer attributes

In addition to all the standard data elements provided by our Google Tag Manager extension, our Google Analytics 4 extension include additional data layer element.

Google Analytics 4 Data Layer

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

One Page Checkout Custom Events

Customer Add Valid Email Address
Checkout Shipping Step Completed
Checkout Shipping Step Validation Failed
Checkout Payment Step Completed
Checkout Payment Step Validation Failed
Checkout Shipping Method Added
Checkout Payment Method Added

Global Data Layer

Debugging Google Analytics 4 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.7.1

1.7.0

1.6.0

Related Extensions

Get more from your Magento2 store!

Order Shipment Tracking

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

Enhanced Success Page

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

Magento Enhanced E-commerce

If your are using Magento + Google Analytics, then you need Enhanced E-commerce for Google Tag Manager.