Integrate with Shopify
Connect Shopify Checkout Extensibility to Monetate

This content is for Monetate clients that are also Shopify Plus clients.
Shopify has announced that on August 13, 2024, it will no longer support its checkout.liquid layout on its clients' information, shipping, and payment checkout pages. Furthermore, on August 28, 2025, it will no longer support checkout.liquid on its clients' "Thank You" and order status pages as well as turn off apps using script tags and additional scripts under the post-purchase and order status pages. Therefore, any Shopify Plus client that customizes its checkout flow using checkout.liquid must upgrade to Shopify's checkout extensibility platform features suite.
See Shopify's checkout extensibility upgrade documentation for the prerequisites and steps to upgrade from checkout.liquid to checkout extensibility.
In addition to moving its checkout flow customizations from checkout.liquid to checkout extensibility, each Monetate—Shopify Plus client must also create a custom pixel to implement code that tracks all product_added_to_cart and checkout_completed events and sends the appropriate data to Monetate.
Before publishing your draft checkout profile created using checkout extensibility, follow these steps to create a custom pixel containing code to send customer data from Shopify to Monetate.
Click Settings in Shopify admin.
﻿
Click Customer events on the Settings panel.
﻿
Click Add custom pixel.
﻿
In the Add custom pixel modal, type a descriptive name into Pixel name, and then click Add pixel.
﻿
Copy and paste the custom pixel's code﻿ into the code editor and then click Save.
﻿
Click Connect.
﻿
Click Connect in the advisory modal.
﻿
Because Shopify's custom pixels run in a sandbox environment, the data passed to Monetate through a custom pixel isn't visible in Monetate Inspector. However, you can view on your Monetate account's platform dashboard analytics based on the data sent from Shopify.
Code Sample
Copy and paste this code into the code editor of the custom pixel.
This code doesn't account for any discounts you may offer on your site. You may need to customize this code to track discounts.
Code to Track All product_added_to_cart and checkout_completed Events
var monetateT = new Date().getTime();
const script = document.createElement('script');
script.type = 'text/javascript';
script.src =
  '//se.monetate.net/js/2/a-b099aae4/p/monetate-demo-site.myshopify.com/entry.js';
const target = document.getElementsByTagName('script')[0];
target.parentNode.insertBefore(script, target);

window.monetateQ = window.monetateQ || [];

analytics.subscribe('product_added_to_cart', (event) => {
  const lineItem = event.data.cartLine;

  window.monetateQ.push([
    'addCartRows',
    [{
      productId: lineItem.merchandise.product.id,
      quantity: lineItem.quantity,
      unitPrice: lineItem.merchandise.price.amount,
      sku: lineItem.merchandise.sku,
      currency: lineItem.merchandise.price.currencyCode,
    }, ],
  ]);

  window.monetateQ.push(['trackData']);
});

analytics.subscribe('checkout_completed', (event) => {
  const lineItems = event.data.checkout.lineItems;

  const purchasedItems = lineItems.map((lineItem) => {
    return {
      purchaseId: event.data.checkout.order.id,
      productId: lineItem.variant.product.id,
      quantity: lineItem.quantity,
      unitPrice: lineItem.variant.price.amount,
      sku: lineItem.variant.sku,
      currency: lineItem.variant.price.currencyCode,
    };
  });

  window.monetateQ.push(['setPageType', 'purchase']);
  window.monetateQ.push(['addPurchaseRows', purchasedItems]);
  window.monetateQ.push(['trackData']);
});
var monetateT = new Date().getTime();
const script = document.createElement('script');
script.type = 'text/javascript';
script.src =
  '//se.monetate.net/js/2/a-b099aae4/p/monetate-demo-site.myshopify.com/entry.js';
const target = document.getElementsByTagName('script')[0];
target.parentNode.insertBefore(script, target);

window.monetateQ = window.monetateQ || [];

analytics.subscribe('product_added_to_cart', (event) => {
  const lineItem = event.data.cartLine;

  window.monetateQ.push([
    'addCartRows',
    [{
      productId: lineItem.merchandise.product.id,
      quantity: lineItem.quantity,
      unitPrice: lineItem.merchandise.price.amount,
      sku: lineItem.merchandise.sku,
      currency: lineItem.merchandise.price.currencyCode,
    }, ],
  ]);

  window.monetateQ.push(['trackData']);
});

analytics.subscribe('checkout_completed', (event) => {
  const lineItems = event.data.checkout.lineItems;

  const purchasedItems = lineItems.map((lineItem) => {
    return {
      purchaseId: event.data.checkout.order.id,
      productId: lineItem.variant.product.id,
      quantity: lineItem.quantity,
      unitPrice: lineItem.variant.price.amount,
      sku: lineItem.variant.sku,
      currency: lineItem.variant.price.currencyCode,
    };
  });

  window.monetateQ.push(['setPageType', 'purchase']);
  window.monetateQ.push(['addPurchaseRows', purchasedItems]);
  window.monetateQ.push(['trackData']);
});
﻿
﻿
Updated 25 Sep 2024
Integrate with Shopify
Monetate JavaScript API FAQ
Docs powered by Archbee
TABLE OF CONTENTS
Code Sample