DataLayer for Google Tag Manager
How To Configure
DataLayer for Google Tag Manager

Integrate Segment with Google Tag Manager

Please Note: The settings below require our Datalayer for Google Tag Manager for Magento 2.

Segment is a customer data infrastructure (CDI) platform that helps you collect, clean, and control your customer data. Learn more at https://segment.com/docs/spec/ecommerce/v2/#event-lifecycles

Search Page
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: searchPage

HTML

<script>
require(['DataLayerSearchApi'], function (DataLayerSearchApi) {
    var search = DataLayerSearchApi();

   analytics.track('Products Searched', {
      query: search.getSearchTerm()
   });
});
</script>
Product List Viewed
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: categoryPage

HTML

<script>
require(['DataLayerCategoryApi'], function (dataLayerCategoryApi) {
    var category = dataLayerCategoryApi();
    
    var segmentProductFormat = {
        renameFieldTo: {
            p_id: 'product_id',
            id: 'sku',
            name: 'name',
            price: 'price',
            position: 'position',
            category: 'category',
            url: 'url',
            image_url: 'image_url'
        },
        appendIndex: false
    };
    
    analytics.track('Product List Viewed', {
      list_id: 'category_page',
      category: category.getCategory('name'),
      products: category.getItems(segmentProductFormat)
    });   
});
</script>
Product Clicked
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: productClick

HTML

<script>
require(['DataLayerProductApi'], function (dataLayerProductApi) {
    var product = dataLayerProductApi();
    
    var renameFieldTo = {
        p_id: 'product_id',
        id: 'sku',
        name: 'name',
        price: 'price',
        position: 'position',
        category: 'category',
        url: 'url',
        image_url: 'image_url'
    };
        
    analytics.track(
        'Product Clicked',
         product.getProductClickDetail(renameFieldTo)
    });
       
});
</script>
Product Page View
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: productPage

HTML

<script>
require(['DataLayerProductApi'], function (dataLayerProductApi) {
    var product = dataLayerProductApi();
    
    analytics.track('Product Viewed', {
      product_id: product.getId(),
      sku: product.getSku(),
      category: product.getCategory(),
      name: product.getName(),
      //brand: 'MagePal',
      //variant: '200 pieces',
      price: product.getPrice(),
      //quantity: 1,
      //coupon: 'MAYDEALS',
      currency: product.getCurrencyCode(),
      position: product.getDataItem('list_position', 1),
      //value: 18.99,
      url: product.getUrl(),
      image_url: product.getProduct('image_url')
    });    
});
</script>
Add To Cart
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Custom Events
  Event Name : addToCart

HTML

<script>
require(['DataLayerProductApi'], function (dataLayerProductApi) {
    var product = dataLayerProductApi();
    
    var segmentProductFormat = {
        renameFieldTo: {
            p_id: 'product_id',
            id: 'sku',
            name: 'name',
            variant: 'variant',
            price: 'price',
            quantity: 'quantity',
            position: 'position',
            category: 'category',
            url: 'url',
            image_url: 'image_url'
        },
        appendIndex: false
    };
    
    var items = product.getAddedToCartItems(segmentProductFormat);
    
    for (index in items) {
        analytics.track('Product Added', items[index]);
    }

});
</script>
Product Removed
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Custom Events
  Event Name : removeFromCart

HTML

<script>
require(['DataLayerProductApi'], function (dataLayerProductApi) {
    var product = dataLayerProductApi();
    
    var segmentProductFormat = {
        renameFieldTo: {
            p_id: 'product_id',
            id: 'sku',
            name: 'name',
            variant: 'variant',
            price: 'price',
            quantity: 'quantity',
            position: 'position',
            category: 'category',
            url: 'url',
            image_url: 'image_url'
        },
        appendIndex: false
    };
    
    var items = product.getRemovedFromCartItems(segmentProductFormat);
    
    for (index in items) {
        analytics.track('Product Removed', items[index]);
    }

});
</script>
Related

Related Extensions

Get more from your Magento2 store!

Enhanced Success Page

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

DataLayer for Tag Manager

Whether you are integrating Bing, Facebook, SnapChat, Pinterest, or any other services our extension make it easy.

Magento Enhanced E-commerce

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