[Shopify Customer Pixel] How to Track Shopify Purchase Event Using Google Tag Manager and Facebook Pixel

Learn how to track the Shopify Purchase Event using Google Tag Manager and Facebook Pixel. This comprehensive guide includes step-by-step instructions for configuring customer pixels, data layers, and event tracking.

Shahzada Ali Hassan

3 min read0 views

Watch on YouTube

Check your site's tracking

Enter your website to see how good its tracking is, and whether Meta is likely restricting it.

Run a free audit

Tracking purchase events on Shopify can feel overwhelming, but with the right approach, it's a straightforward process. In this guide, I'll walk you through the exact steps I've used to set up purchase event tracking for over 40 Shopify stores in just four months. We'll use Google Tag Manager, Shopify's customer pixel feature, and Facebook Pixel integration.

To make things simple, we'll divide this process into four main sections:

  1. Setting Up the Data Layer Event
  2. Installing Google Tag Manager on Shopify
  3. Creating Tags, Triggers, and Variables for Facebook Pixel
  4. Testing Purchase Event Tracking

Let's get started!

1. Setting Up the Data Layer Event

The first step is creating a data layer event to collect detailed purchase information, such as item IDs, transaction IDs, item names, and more.

Steps:

  1. In Shopify's admin, navigate to Settings > Customer Events.
  2. Click Add Custom Pixel at the top.
  3. Name the pixel something descriptive, such as "Meta Purchase Data Layer".
  4. Adjust these settings: Permissions: Set to "Not Required". Data Sale: Set to "Does Not Qualify as Data Sale".
  5. Add the provided code snippet (found in the description or accompanying blog post) into the Code Snippet section.
  6. Save the pixel configuration.
purchase.js
1// Initialize the dataLayer 2window.dataLayer = window.dataLayer || []; 3(function (w, d, s, l, i) { 4 w[l] = w[l] || []; 5 w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" }); 6 var f = d.getElementsByTagName(s)[0], 7 j = d.createElement(s), 8 dl = l != "dataLayer" ? "&l=" + l : ""; 9 j.async = true; 10 j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; 11 f.parentNode.insertBefore(j, f); 12})(window, document, "script", "dataLayer", "GTM-EXAMPLE"); 13function logEventToConsole(dataLayerEvent) { 14 const customStyle01 = 15 "color: #FFFF00; background-color: #000000; font-size: 10px; font-weight: bold; padding: 2px 0;"; 16 console.log("%cDataLayer Event: purchase ", customStyle01, dataLayerEvent); 17} 18analytics.subscribe("checkout_completed", (event) => { 19 const getEventData = (obj, path, fallback = "") => { 20 return ( 21 path.split(".").reduce((acc, part) => { 22 if (acc && part.includes("[")) { 23 const [key, index] = part.replace("]", "").split("["); 24 return acc[key] ? acc[key][index] : undefined; 25 } 26 return acc ? acc[part] : undefined; 27 }, obj) || fallback 28 ); 29 }; 30 const page_data = { 31 hostname: getEventData(event, "context.document.location.hostname"), 32 location_query_string: getEventData(event, "context.document.location.href"), 33 path: getEventData(event, "context.document.location.pathname"), 34 referrer: getEventData(event, "context.document.referrer"), 35 page_title: getEventData(event, "context.document.title"), 36 url: getEventData(event, "context.document.location.href"), 37 }; 38 const user_data = { 39 id: event.clientId, 40 customer_id: getEventData(event, "data.checkout.order.customer.id"), 41 phone: getEventData(event, "data.checkout.shippingAddress.phone"), 42 email: getEventData(event, "data.checkout.email"), 43 address: { 44 city: getEventData(event, "data.checkout.shippingAddress.city"), 45 address: getEventData(event, "data.checkout.shippingAddress.address1"), 46 state: getEventData(event, "data.checkout.shippingAddress.state"), 47 country: getEventData(event, "data.checkout.shippingAddress.country"), 48 postal_code: getEventData(event, "data.checkout.shippingAddress.zip"), 49 first_name: getEventData(event, "data.checkout.shippingAddress.firstName"), 50 last_name: getEventData(event, "data.checkout.shippingAddress.lastName"), 51 }, 52 language: getEventData(event, "context.navigator.language"), 53 userAgent: getEventData(event, "context.navigator.userAgent"), 54 }; 55 const event_data = { 56 timestamp: event.timestamp || "", 57 id: event.id || "", 58 }; 59 const ecommerce_data = { 60 currency: getEventData(event, "data.checkout.currencyCode"), 61 value: getEventData(event, "data.checkout.totalPrice.amount"), 62 transaction_id: getEventData(event, "data.checkout.order.id"), 63 tax: getEventData(event, "data.checkout.totalTax.amount"), 64 shipping: getEventData(event, "data.checkout.shippingLine.price.amount"), 65 coupon: getEventData(event, "data.checkout.discountApplications[0].code", ""), 66 items: event.data.checkout.lineItems.map((item, index) => ({ 67 item_id: getEventData(item, "variant.product.id"), 68 item_name: getEventData(item, "variant.product.title"), 69 item_brand: getEventData(item, "variant.product.vendor"), 70 item_category: getEventData(item, "variant.product.type"), 71 price: getEventData(item, "variant.price.amount"), 72 item_variant: 73 getEventData(item, "variant.title") || getEventData(item, "variant.untranslatedTitle"), 74 item_list_name: "Checkout", 75 index: index + 1, 76 product_id: getEventData(item, "variant.id"), 77 product_image: getEventData(item, "variant.image.src"), 78 product_url: getEventData(item, "variant.product.url"), 79 product_untranslatedTitle: getEventData(item, "variant.product.untranslatedTitle"), 80 product_sku: getEventData(item, "variant.sku"), 81 quantity: getEventData(item, "quantity"), 82 })), 83 }; 84 const dataLayerEvent = { 85 event: "purchase", 86 user_data: user_data, 87 event_data: event_data, 88 ecommerce: ecommerce_data, 89 page_data: page_data, 90 }; 91 const newUrl = new URL(dataLayerEvent.page_data.location_query_string, window.location.origin); 92 const newTitle = dataLayerEvent.page_data.page_title; 93 if (newUrl && newTitle) { 94 history.pushState(null, newTitle, newUrl.toString()); 95 } 96 dataLayer.push({ ecommerce: null }); 97 window.dataLayer.push(dataLayerEvent); 98 logEventToConsole(dataLayerEvent); 99});

This setup will trigger a purchase event across the store and collect data in the required format.

2. Installing Google Tag Manager on Shopify

Google Tag Manager (GTM) simplifies tracking multiple events across your store.

Steps:

  1. Access your GTM container and copy its ID.
  2. In Shopify, ensure the GTM code is embedded on all pages. If the GTM placeholder (e.g., "GTM-Example") exists, replace it with your actual container ID.
  3. Save changes, then connect the customer pixel to Shopify by clicking Connect in the customer pixel settings.

3. Creating Tags, Triggers, and Variables for Facebook Pixel

Setting Up Variables

We need to create specific variables to capture purchase event data.

  1. Meta Pixel ID:
  • Create a Constant Variable in GTM.
  • Retrieve the Facebook Pixel ID from Facebook Events Manager.
  • Paste the ID and save it as "Meta Pixel ID".
  1. E-commerce Items Array:
  • Create a Data Layer Variable in GTM.
  • Name it "DLV E-commerce Items Array".
  • Map it to ecommerce.items.
  1. E-commerce Parameter Generator:
  • Import the provided parameter generator template (download link available).
  • Set "E-commerce Items Array" as its source.
  • Save it as "E-commerce Parameter Generator for Meta".
Ecommerce-Parameter-Generator.tpl

Creating a Trigger

  1. Set up a Custom Event Trigger in GTM:
  • Name it "Custom Event - Purchase".
  • Set the event name to purchase.

Creating the Facebook Pixel Tag

  1. Add a new tag in GTM and configure it as follows:
  • Select the Facebook Pixel Tag Template.
  • Input the Meta Pixel ID as a variable.
  • Set the event name to Purchase.
  • Use the "E-commerce Parameter Generator" for object properties.
  • Assign the "Custom Event - Purchase" trigger.
  1. Save the tag as "Meta Purchase Tag".

4. Testing Purchase Event Tracking

Testing ensures the setup is working correctly before going live.

Steps:

  1. Preview Mode in GTM:
  • Use GTM's preview mode to check if the tag fires when a purchase is made.
  1. Testing in Shopify:
  • Go to your store's front end and add items to the cart.
  • Complete a test purchase using Shopify's "bogus" payment gateway.
  • Open the browser's developer tools (Inspect > Console) and search for "data layer".
  • Verify the purchase event data is firing correctly.
  1. Verify in Facebook Events Manager:
  • Navigate to the Test Events section.
  • Enter your store URL and complete a test purchase.
  • Ensure the purchase event data (e.g., item ID, currency, shipping, coupon) appears as expected.

Publishing and Final Testing

Once the setup is verified, publish your GTM container:

  1. Click Submit and add a version name (e.g., "Meta Purchase Tracking Setup").
  2. Test one final time to ensure all data is correctly sent to Facebook Events Manager.

Conclusion

By following these steps, you've successfully configured purchase event tracking for your Shopify store using GTM, Facebook Pixel, and Shopify's customer pixel feature. This setup allows you to gather accurate purchase data for optimizing ad campaigns and improving e-commerce performance.

Want to track other events, like "Add to Cart" or "Begin Checkout"? Stay tuned for my next tutorial!

All guides

Set up in about 5 minutes. Events in Events Manager within about 30.

~5 min setupwithin ~30 min
Setting up
  • 7-day free trialon every eligible domain, one per domain
  • $297/moper subdomain
  • We set up the first domain with youfounder included
  • 30-day money-back guaranteeand cancel any time in the trial
  • We keep working with youuntil it is fixed
Start 7-day trialGet a free consultation

Payment method required at checkout. One trial per domain. The 30 minutes start once tracking is installed and events fire; it is visibility in Events Manager, not same-day ROAS.