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

Integrate Snapchat with Google Tag Manager

Please Note: The settings below require our Datalayer for Google Tag Manager for Magento and some features also require our Enhanced Ecommerce extension.

MagePal - Snapchat - All Page View
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Pages

HTML

<script>
require(['DataLayerCustomerApi'], 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>
MagePal - Snapchat - Product Page
Tag Configuration
Tag type : Custom Html

Trigger Configuration
Trigger: All Custom Events
Event Name: productPage
Advanced Settings:
 - Tag Sequencing
   - Fire a tag before 'MagePal - Snapchat - Product Page' fires
     - MagePal - Snapchat - All Page View

HTML

<script>
require(['DataLayerProductApi'], function (dataLayerProductApi) {
    var product = dataLayerProductApi();
    
    snaptr('track', 'VIEW_CONTENT', {
        'currency': product.getCurrencyCode(),
        'item_ids': product.getProductSkus()
    });
});
</script>
MagePal - Snapchat - 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>

*Enhanced Ecommerce extension required for this functionality.

MagePal - Snapchat - 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>
MagePal - Snapchat - 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.getOrderTotal(),
        'transaction_id': purchase.getOrderId(),
        'item_ids': purchase.getSkus(),
        'number_items': purchase.getItemCount()
    });
});
</script>
Related

Related Extensions

Get more from your Magento2 store!

DataLayer for Tag Manager

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

HTML Minifier for Magento2

Minification is the process of removing all unnecessary characters and spacing from your source code without changing its functionality.

Catalog Hover Image for Magento

Quickly previewing alternative product images on your category list page.