What is pixel tracking?

Pixel tracking is a way to track the behavior of website visitors, such as when they make a purchase or add an item to their cart. This information can be used to improve the website's performance and target advertising.

Pixel tracking can be set on the Shopify Order Status page or on the Post Purchase page. Shopify pages can implement pixels in different locations.

Here are the steps for setting up pixel tracking on the Shopify page using theme liquid files for Google or any other tracking on a Shopify store:

1. Go to the Shopify admin and navigate to the "Online Store" section.
2. Click on the "Themes" button.
3. Find the theme you want to edit and click on the "Actions" button, then select "Edit Code".
4. In the "Layout" folder, find the "theme.liquid" file and open it.
5. Scroll to the bottom of the file and paste the Google pixel tracking code before the "closing </header>" tag.
6. Save the changes.

Here are the steps for setting up pixel tracking on the Shopify page using online store preferences for Google or Facebook on a Shopify store:

1. Go to the Shopify admin and navigate to the "Online Store" section.
2. Click on the "Preferences" button.
3. Scroll down to the Google Analytics section and place the code.
4. Scroll down to the Facebook Pixel and connect a pixel by clicking on the “Set up the Facebook”
5. Save the changes.

Here are the steps for setting up pixel tracking on the Shopify page using the order status page:

Here are the steps for setting up pixel tracking on the Post Purchase page:

The Additional Scripts box is used to insert code into the template for your order status page. You can add any of the following:

• HTML - You can use any valid HTML5 code, for example script, style, iframe, and object elements.
• Liquid code - You have access to the checkout and shop Liquid objects. To learn more about their attributes, refer to The checkout object and The shop object.
• Tracking scripts - You can add tracking scripts to track referrals, return on investment, or conversions.

Examples:

https://help.shopify.com/en/manual/orders/status-tracking/customize-order-status/add-conversion-tracking#examples

Note: 

Sales conversion scripts are usually tracked on the final page of checkout. However, customers who return to check their order status might count as a second sale in your analytics. To prevent duplicate conversion you can use the below code to trigger scrips only once:

{% if first_time_accessed %}
  // Conversion scripts you want to run only once
{% endif %}

  // Scripts you want to run on every visit

Here are the steps for setting up pixel tracking on the Post Purchase page:

1. Go to the Shopify admin and navigate to the "Settings" section.

2. Click on "Checkout and accounts".
3. Scroll down to the “Post-purchase page”.
4. Paste your tracking code into the “Additional scripts” text box.
5. Save the changes.

Note:

The post-purchase page additional script is similar to the order status page additional scripts, but with a few key differences:

• The script is added to the post-purchase page, not the order status page.
• The field allows only JavaScript. Liquid code isn't accepted.
• The only HTML tag allowed is <script>.
• The script runs within a sandbox and isn't included on the main page.
• You can add a post-purchase page script only if your store has installed an app that adds a post-purchase page to your checkout.

Combining the Order status page and Post-purchase page scripts:

When a store has a post-purchase page, the tracking script trigger must be adjusted to avoid losing any tracking events. Since most of the tracking is done on the order status page and we now have an additional step showing the post-purchase after the checkout and before the thank you page, we need to cover scenarios where the customers do not reach the thank you page in case they leave your store on the post-purchase page.

First, we need to avoid duplicate conversions but still, track as many events as possible. With the below code, we ensure that the checkout event is only tracked either on the order status page or from the post-purchase page. If the post-purchase page was not seen, then the script will track conversion on the order status page, but if the post-purchase page was seen, the the script will not track anything as it was already tracked from the post-purchase page.

{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
   // insert your tracking script ...
</script>
{% endif %}

<script async src="https://www.googletagmanager.com/gtag/js?id=<ID>"></script>
<script>
(function() {
  // make sure the initial conversion isn't tracked twice
  {% if first_time_accessed == false or post_purchase_page_accessed == true %}
    return;
  {% endif %}
  // set up google analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', '<ID>');
  // track initial conversion
  var order = window.Shopify.order;

  gtag('event', 'purchase', {
    affiliation: 'My Shopify Store',
    transaction_id: Number(order.id).toString(),
    value: order.totalPrice,
    currency: order.currency,
    items: order.lineItems.map((item) => ({
      id: Number(item.id).toString(),
      name: item.title,
      category: item.product.type,
      price: item.price,
      quantity: item.quantity,
      variant: Number(item.variant.sku).toString(),
    })),
  });
})();
</script>

// make sure the initial conversion isn't tracked twice
  if (!Shopify.wasPostPurchasePageSeen) {
      // insert your tracking script ...
  }

Example of the script on the post-purchase page to track the initial conversion from the checkout page:

<script async src="https://www.googletagmanager.com/gtag/js?id=<ID>"></script>
<script>
(function() {
  // set up google analytics
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', '<ID>');

  // make sure the initial conversion isn't tracked twice
  if (!Shopify.wasPostPurchasePageSeen) {
    var order = window.Shopify.order;

    // track initial conversion
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: order.lineItems.map(function(item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  }
})();
</script>

With the above code, we properly set the order status scripts to be compatible with the post-purchase scripts, now we need to set-up the post-purchase scripts.

To track additional purchases that are made through the post-purchase page, we will subscribe to the [Shopify.on](<https://help.shopify.com/en/manual/promoting-marketing/analyze-marketing/pixel-tracking-post-purchase-page#table-heading-window>) event.

After we subscribe, the following actions occur whenever a post-purchase changeset is successfully applied:

• Handler is called with two [Order]
  (<https://help.shopify.com/en/manual/promoting-marketing/analyze-marketing/pixel-tracking-post-purchase-page#table-heading-order>) type arguments: order and outdated order.
• The globals under [window.Shopify]
  (<https://help.shopify.com/en/manual/promoting-marketing/analyze-marketing/pixel-tracking-post-purchase-page#table-heading-window>) are updated so that the scripts can use the updated data.

Handlers subscribed to this event can have as little as 500 ms to execute. In case you need to load any dependencies, they need to be loaded before that event.

Post-purchase page script to track the conversion on the post-purchase page

// set up additional conversion tracking on the post purchase page
Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
  // tracking script here ...
}

Example of the script on the post-purchase page to track the conversion on the post-purchase page:

<script async src="https://www.googletagmanager.com/gtag/js?id=<ID>"></script>
<script>
(function() {
  // set up google analytics
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', '<ID>');

    // set up additional conversion tracking
    Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
      // identify which items were recently added, if any
      var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });
    
      var addedItems = newOrder.lineItems.filter(
        function (line) { return oldItems.indexOf(line.id) < 0; }
      );
    
      // no new items were added, so we skip conversion tracking
      if (addedItems.length === 0) {
        return;
      }
    
      // track post-purchase page accepted offer
      gtag('event', 'purchase', {
        affiliation: 'My Shopify Store',
        transaction_id: Number(order.id).toString(),
        value: order.totalPrice,
        currency: order.currency,
        items: addedItems.map(function (item) {
          return {
            id: Number(item.id).toString(),
            name: item.title,
            category: item.product.type,
            price: item.price,
            quantity: item.quantity,
            variant: Number(item.variant.sku).toString(),
          };
        }),
      });
    });
})();
</script>

With the above cases we demonstrated how to track checkout events on the order status page or from the post-purchase page and to avoid duplicate events. We also demonstrated how to track only the post-purchase events. The below code will demonstrate how to track the initial checkout purchase on the post-purchase page as well as the post-purchase accepted offer.

<script async src="https://www.googletagmanager.com/gtag/js?id=<ID>"></script>
<script>
(function() {
  // set up google analytics
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', '<ID>');

  // make sure the initial conversion isn't tracked twice
  if (!Shopify.wasPostPurchasePageSeen) {
    var order = window.Shopify.order;

    // track initial conversion
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: order.lineItems.map(function(item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  }

  // set up additional conversion tracking
  Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
    // identify which items were recently added, if any
    var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });

    var addedItems = newOrder.lineItems.filter(
      function (line) { return oldItems.indexOf(line.id) < 0; }
    );

    // no new items were added, so we skip conversion tracking
    if (addedItems.length === 0) {
      return;
    }

    // track additional purchase
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: addedItems.map(function (item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  });
})();
</script>

gtag.js always needs to be called before you can utilize the functions in gtag. If we want to track additional sources, we need to prepare a config for all of them, in our example, we will track also for the Google Ads gtag('config', 'AW-XXXXXXXXX',{'send_page_view': false});

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-XXXXXXXXX');
    gtag('config', 'AW-XXXXXXXXX', {'send_page_view': false});
</script>

After the initiation, you can send data to GA and in our case also to Google Ads using send_to parameter. In most cases, the e-commerce data is already available before the page loads, so we can send the data using:

<script>
    gtag('event', 'purchase', {
      send_to: 'AW-XXXXXXXXX',
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: addedItems.map(function(item) {
          return {
              id: Number(item.id).toString(),
              name: item.title,
              category: item.product.type,
              price: item.price,
              quantity: item.quantity,
              variant: Number(item.variant.sku).toString(),
          };
      }),
});
</script>

Example for the conversion page using also the value and currency parameter - as we are using Google Ads which is a different product, we need to send the data using send_to parameter.

<!-- Event snippet for Example conversion page -->
<script>
  gtag('event', 'conversion', {'send_to': 'AW-XXXXXXXXX',
    'value': 123.00,
    'currency': 'USD'
  });
</script>