DataLayer for Google Tag Manager
How To Configure
Purchase Extension

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.

Magento Enhanced E-commerce

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

Catalog Hover Image for Magento

Quickly previewing alternative product images on your category list page.

Integrate Snapchat with Google Tag Manager

Product Page View
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Pages

HTML

<script>
require(['DataLayerProductApi'], function (dataLayerCustomerApi) {
    var customer = dataLayerCustomerApi();
    
    var snapchatOptions = {};
    var email = '';
    
    if (email = customer.getEmail()) {
        snapchatOptions = {user_email: email};
    }
    
    (function(win, doc, sdk_url){
      if(win.snaptr) return;
      var tr=win.snaptr=function(){
      tr.handleRequest? tr.handleRequest.apply(tr, arguments):tr.queue.push(arguments);
    };
      tr.queue = [];
      var s='script';
      var new_script_section=doc.createElement(s);
      new_script_section.async=!0;
      new_script_section.src=sdk_url;
      var insert_pos=doc.getElementsByTagName(s)[0];
      insert_pos.parentNode.insertBefore(new_script_section, insert_pos);
    })(window, document, 'https://sc-static.net/scevent.min.js');
    
    snaptr('init','xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', snapchatOptions);
    snaptr('track','PAGE_VIEW');
});
</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();
    
    snaptr('track', 'ADD_CART', {
        'currency': product.getCurrencyCode(),
        'item_ids': product.getAddedToCartItemSkus()
    });
});
</script>
Initiate Checkout
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Custom Events
  Event Name : checkoutPage

HTML

<script>
require(['DataLayerCheckoutApi'], function (dataLayerCheckoutApi) {
    var checkout = dataLayerCheckoutApi();
     
    snaptr('track', 'START_CHECKOUT', {
        'currency': checkout.getCurrencyCode(),
        'item_ids': checkout.getSkus(),
        'number_items': checkout.getItemCount()
    });
});
</script>
Purchase
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Custom Events
  Event Name : purchase

HTML

<script>
require(['DataLayerPurchaseApi'], function (dataLayerPurchaseApi) {
    var purchase = dataLayerPurchaseApi();
    
    snaptr('track', 'PURCHASE', {
        'currency': purchase.getCurrencyCode(),
        'price': purchase.getOrder('total'),
        'transaction_id': purchase.getOrder('order_id'),
        'item_ids': purchase.getSkus(),
        'number_items': purchase.getItemCount()
    });
});
</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.