Skip to main content

​
Introduction

Shopify Custom pixels help you collect customer events on even more pages of your online store, such as the checkout and post-purchase pages. If there isn’t an app pixel available that meets your requirements, then you can use custom pixels on your store to track customer events without having to modify your theme code. Custom pixels are loaded in a Lax sandbox, designed for improved security and control over the data that you send to third parties.
Not all pixel functionality works in the sandbox. You might need to consult your third-party service provider for help.

​
Manage Custom Pixels

You can manage your custom pixels in the Customer events section of your Shopify admin.

​
Add a Custom Pixel

Before adding a custom pixel, make sure to remove or modify any existing pixels to prevent duplicate counting of customer events. Existing pixel/tag code should be manually removed from any place if it exists, such as:
  • theme.liquid
  • checkout.liquid (Plus merchants only)
  • Additional scripts in your checkout settings
1

Navigate to Customer Events

From your Shopify admin, go to Settings > Customer events.
2

Add Custom Pixel

Click the Add custom pixel button to open the event editor.
3

Name Your Pixel

In the Add custom pixel popup, enter the pixel name L5-Tracker and click Add pixel.
Each pixel name must be unique. If a custom pixel with that name already exists, you’ll be prompted to use a different name.
4

Add the Pixel Code

Once the custom pixel is created, you’ll see a code editor window. Paste the following L5 Tracker code, or copy it from your Tag Management settings under Shopify Web Pixel.
/* Start : L5 Tracker Code */
const l5AdditionalCookies = o => {
  const e = [];
  if (o.length === 0) return e;
  o.forEach(o => {
    const n = document.cookie.match(new RegExp(`${o}=([^;]*)`));
    if (n) {
      const c = decodeURIComponent(n[1]);
      e.push({ name: o, value: c });
    }
  });
  return e;
};

!(function(p, l, o, w, i, n, g) {
  if (!p[i]) {
    p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || [];
    p.GlobalSnowplowNamespace.push(i);
    p[i] = function() {
      (p[i].q = p[i].q || []).push(arguments);
    };
    p[i].q = p[i].q || [];
    n = l.createElement(o);
    g = l.getElementsByTagName(o)[0];
    n.async = 1;
    n.src = w;
    g.parentNode.insertBefore(n, g);
  }
})(window, document, "script", "https://js.l5id.com/l5v3.js", "l5plow");

window.l5plow('newTracker', 'ssc', 'id.layerfive.com', {
  appId: 'CLIENT_ID',        // Replace with your Client ID (provided by Mission Control)
  sessionCookieTimeout: 0,
  cookieDomain: 'DOMAIN',    // Replace with your domain (e.g. .myshopify.com)
});

// Subscribe to customer events
analytics.subscribe("page_viewed", async (event) => {
  window.l5plow('trackPageView', document.title, [{
    schema: "iglu:com.layerfive/page_view_custom/jsonschema/1-0-0",
    data: {
      additionalCookies: l5AdditionalCookies(['_fbp', '_fpc'])
    }
  }]);
});

analytics.subscribe("product_added_to_cart", async (event) => {
  var cartData = {
    "sku": event.data.cartLine.merchandise.id,
    "name": event.data.cartLine.merchandise.product.title,
    "category": event.data.cartLine.merchandise.product.type,
    "unitPrice": event.data.cartLine.merchandise.price.amount,
    "quantity": event.data.cartLine.quantity,
    "currency": event.data.cartLine.merchandise.price.currencyCode
  };
  window.l5plow("trackAddToCart", cartData);
});

analytics.subscribe("product_removed_from_cart", async (event) => {
  var cartData = {
    "sku": event.data.cartLine.merchandise.id,
    "name": event.data.cartLine.merchandise.product.title,
    "category": event.data.cartLine.merchandise.product.type,
    "unitPrice": event.data.cartLine.merchandise.price.amount,
    "quantity": event.data.cartLine.quantity,
    "currency": event.data.cartLine.merchandise.price.currencyCode
  };
  window.l5plow("trackRemoveFromCart", cartData);
});

analytics.subscribe("checkout_completed", async (event) => {
  var orderData = {
    "orderId": event.data.checkout.order.id,
    "affiliation": "110",
    "total": event.data.checkout.totalPrice.amount,
    "tax": event.data.checkout.totalTax.amount,
    "shipping": event.data.checkout.shippingLine.price.amount,
    "city": event.data.checkout.billingAddress.city,
    "state": event.data.checkout.billingAddress.province,
    "country": event.data.checkout.billingAddress.country,
    "currency": event.data.checkout.totalPrice.currencyCode,
  };
  window.l5plow('addTrans', orderData);
  window.l5plow('setUserId', event.data.checkout.order.customer.id);
  window.l5plow('trackTrans');
});
/* End : L5 Tracker Code */
5

Configure Your Client ID and Domain

In the code above, replace the two placeholder values:
PlaceholderReplace WithExample
CLIENT_IDYour Client ID provided by the Mission Control support teamabc123
DOMAINYour website domain (without http:// or https://, prefixed with .).example.com
If your website domain is https://example.com/, set the domain to .example.com.
6

Save the Pixel

Click the Save button to save your custom pixel.

​
Connect a Custom Pixel

After a custom pixel has been added, you need to connect it so it can start tracking customer events.
1

Navigate to Custom Pixels

From the Customer events page in your Shopify admin, click Custom pixels.
2

Connect the Pixel

Custom pixels that aren’t currently connected are displayed under Disconnected pixels. Click the ... menu on the L5-Tracker pixel line and select Connect.
The pixel status will update from Disconnected to Connected and will begin tracking customer events.

​
Tracked Events

The L5-Tracker pixel subscribes to the following Shopify customer events:
EventDescriptionData Captured
page_viewedUser views any pagePage title, additional cookies (_fbp, _fpc)
product_added_to_cartUser adds product to cartSKU, product name, category, price, quantity, currency
product_removed_from_cartUser removes product from cartSKU, product name, category, price, quantity, currency
checkout_completedUser completes checkoutOrder ID, total, tax, shipping, billing address, currency, customer ID