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 or Google Analytics 4 extensions.

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 and/or Ga4 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!

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.

HTML Minifier for Magento2

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