Magento 2 GTM (Google Tag Manager)

GTM Extension for Magento 2. GTM allows you to quickly and easily update tracking codes and related code fragments to help manage the lifecycle of e-marketing tags

Installation

Step-by-step to install the Magento 2 extension through Composer:

1. Locate your Magento 2 project root.

2. Install the Magento 2 extension using Composer

composer require dmitrykazak/magento-google-tag-manager 

3. After installation is completed the extension:

# Enable the extension and clear static view files
$ bin/magento module:enable DK_GoogleTagManager --clear-static-content

# Update the database schema and data
$ bin/magento setup:upgrade

# Recompile your Magento project
$ bin/magento setup:di:compile

# Clean the cache 
$ bin/magento cache:flush

Manually (not recommended)

• Download the extension of the required version
• Unzip the file
• Create a folder {root}/app/code/DK/GoogleTagManager
• Copy the files this folder

Magento Google Tag Manager Features

• Measuring Product Impressions
• Measuring Product Clicks
• Measuring Views of Product Details
• Measuring Additions or Removals from a Shopping Cart
• Measuring a Checkout
• Measuring Checkout Options
• Measuring Purchases

More Details

General Configuration

• Login to Magento Admin, Configuration > Sales > Google API > Google Tag Manager.
• Enter your GTM account number

• Setup tags, triggers and variable in Google Tag Manager

Data Layers

• Product Impressions

{
  "ecommerce": {
    "currencyCoce": "USD",
    "impressions": [
      {
        "id": "WT09",
        "name": "Breathe-Easy Tank",
        "price": "34.0000",
        "category": "Bras & Tanks",
        "brand": "Breathe-Easy Tank",
        "path": "Bras & Tanks/Women Sale/Erin Recommends/Default Category",
        "list": "Search Results",
        "position": 1
      },
      {
        "id": "WT09",
        "name": "Breathe-Easy",
        "price": "31.0000",
        "category": "Bras & Tanks",
        "brand": "Breathe-Easy Tank",
        "path": "Bras & Tanks/Women Sale/Erin Recommends/Default Category",
        "list": "Search Results",
        "position": 2
      }
    ]
  }
}

• Product Clicks

{
  "event": "productClick",
  "ecommerce": {
    "click": {
      "actionField": {
        "list": "Search Results"
      }
    },
    "products": [
      {
        "id": "WT09",
        "name": "Breathe-Easy Tank",
        "price": "34.0000",
        "category": "Bras & Tanks",
        "brand": "Breathe-Easy Tank",
        "path": "Bras & Tanks/Women Sale/Erin Recommends/Default Category",
        "list": "Search Results",
        "position": 1
      }
    ]
  }
}

• Product Details

{
  "ecommerce": {
    "detail": {
      "actionField": {
        "list": "Bras"
      }
    },
    "products": [
      {
        "id": "WT09",
        "name": "Breathe-Easy Tank",
        "price": "34.0000",
        "category": "Bras & Tanks",
        "brand": "Breathe-Easy Tank",
        "path": "Bras & Tanks/Women Sale/Erin Recommends/Default Category"
      }
    ]
  }
}

• Add to Cart

{
  "event": "addToCart",
  "ecommerce": {
    "add": {
      "products": [
        {
          "id": "WT09",
          "name": "Breathe-Easy Tank",
          "price": "34.0000",
          "quantity": 1,
          "category": "Bras & Tanks",
          "brand": "Breathe-Easy Tank",
          "path": "Bras & Tanks/Women Sale/Erin Recommends/Default Category",
          "variant": "Color:Red | Size:X"
        }
      ]
    }
  }
}

• Remove from Cart

{
  "event": "removeFromCart",
  "ecommerce": {
    "remove": {
      "products": [
        {
          "id": "WT11",
          "name": "Breathe-Easy Tank",
          "price": "69.0000",
          "quantity": 1,
          "category": "Bras & Tanks",
          "brand": "Breathe-Easy Tank",
          "path": "Bras & Tanks/Women Sale/Erin Recommends/Default Category",
          "variant": "Color:Red | Size:X"
        }
      ]
    }
  }
}

• Checkout

{
  "event": "checkout",
  "ecommerce": {
    "currencyCode": "USD",
    "checkout": {
      "actionField": {
        "step": 1,
        "option": "cart"
      },
      "products": [
        {
          "id": "WT09",
          "name": "Breathe-Easy Tank",
          "price": "34.0000",
          "category": "Bras & Tanks",
          "brand": "Breathe-Easy Tank",
          "path": "Bras & Tanks/Women Sale/Erin Recommends/Default Category",
          "variant": "Color:Red | Size:X"
        }
      ]
    }
  }
}

• Checkout options

{
  "event": "checkout",
  "ecommerce": {
    "checkout": {
      "actionField": {
        "step": 3,
        "option": "Flat Rate - Fixed"
      }
    }
  }
}

• Purchases

{
  "event": "purchase",
  "ecommerce": {
    "currencyCode": "USD",
    "purchase": {
      "actionField": {
        "id": "000000033",
        "affiliation": "Main Website Store",
        "revenue": "82",
        "tax": "0",
        "shipping": "5.0000",
        "coupon": "NEW"
      },
      "products": [
        {
          "id": "WT06",
          "name": "Breathe-Easy Tank",
          "price": "77.0000",
          "quantity": "1.0000",
          "category": "Bras & Tanks",
          "brand": "Breathe-Easy Tank",
          "path": "Bras & Tanks/Women Sale/Erin Recommends/Default Category",
          "variant": "Color:Red | Size:X"
        }
      ]
    }
  }
}

Support

If you encounter any problems or bugs, please open an issue on GitHub.

Customization

if you want to add additional fields for product dto

• Add a new DataProvider in di.xml

<type name="DK\GoogleTagManager\Model\DataLayer\DataProvider\DataProviderList">
    <arguments>
        <argument name="dataProviders" xsi:type="array">
            <item name="DK\GoogleTagManager\Model\DataLayer\Dto\Product" xsi:type="array">
                <item name="category-id" xsi:type="object">DK\GoogleTagManager\Model\DataLayer\DataProvider\CategoryId</item>
            </item>
        </argument>
    </arguments>
</type>

• Add Custom DataProvider for fields

declare(strict_types=1);

namespace DK\GoogleTagManager\Model\DataLayer\DataProvider;

class CategoryId implements DataProviderInterface
{
    public function getData(array $params = []): array
    {
        return [
            'categoryId' => 1,
        ];
    }
}

Links

• Contact with me