Skip to content

How to set up conversion tracking using Shopify’s Custom Pixels for GTM

  • by

Get your GTM container ID and have it on standby.

Shopify

  1. Open your Shopify store and go to Settings

Find Customer Events (this may be greyed out as Shopify has automatically set this as store owner only permissions, so you may need to request extended permissions from the client).

2. Click Add Custom Pixel.

Name it GTM.

Back in Shopify, you should see a relatively blank section.

3. The code to go in there follows. Make sure you update the GTM container ID to your container ID. The first parts of the script initialise Google Tag Manager. The next bit (subscribe to events) is a Shopify-specific piece of code that will send that checkout_completed event to the data layer so Google Tag Manager can use it.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');


//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
  });
});

4. Click Save

5. Then click Connect

Google Tag Manager

In Tag Manager, you’ll need to create a tag, trigger, and variables for that event.

For this one, let’s assume I’m creating a tag to track Microsoft Advertising conversions (Bing).

First, we need variables for Value, Currency, and Transaction ID.

6. In GTM, go to Variables > New.

The DLV for value is value

7. Repeat this for currency and orderID

You should have three variables.

8. Now to go Triggers and Add new.

This is a custom event that uses the special Shopify checkout_completed event that we have subscribed to in the Shopify custom pixel.

9. Add a new tag for Microsoft Advertising and fill in the fields with your variables (revenue, currency, and transaction ID in the appropriate fields). Add your newly created checkout_completed trigger as the trigger.

Your final tag will look like this.

10. Publish your container.

That’s it.

Leave a Reply

Your email address will not be published. Required fields are marked *