Overview

Shopify's official help documentation on this new field can be found here. It's highly recommended to use the Shopify article for full technical details about this new field and how to implement conversion tracking properly.

Zipify Support can’t help with modifying or editing post-purchase page scripts. If you require further assistance, you can post in the Shopify Community or hire a Shopify Expert.

Conversion tracking scripts placed in the Settings > Checkout > Additional scripts > Order status page field in your Shopify admin rely on the Order Status Page (OSP) to be visited for the customer's order, so they can be fired and track the initial order conversion. If a customer leaves your store on the post-purchase page, then no events on the order status page are tracked.

📝You need to change how your store tracks events only if you use a custom tracking pixel. For example, if you set up Google Analytics through Online Store > Preferences, then it already captures events correctly on your post-purchase page.

For any other tracking service that utilizes the OSP and a tracking script (like Google Adwords), the conversion event would instead normally fire when the OSP is landed on and not on the first post-purchase upsell page.

To ensure you're capturing conversions properly for all orders, even for those that don't reach the OSP, the Post-purchase page additional scripts field has been added at the Settings > Checkout > Post-purchase page > Additional scripts section in your Shopify admin:

This new field was added for the following purposes:

To track the initial order conversion when the post-purchase upsell 1 page loads, to guard against buyer drop-off from Shopify Checkout to OSP.
In addition to the initial checkout conversion, this field and your script can also track post-purchase offer conversion(s).

📝The only HTML tag allowed in this field is <script>. The script runs within a sandbox and isn't included on the main page, meaning you aren't able to add code to this field to customize your post-purchase offer page(s). Running the script within a sandbox ensures that the script is secure and is used for its intended purpose.

⚠️ After you add a post-purchase page script and verify that it's working properly, you also need to adjust your Order status page script to ignore events that are already captured by the post-purchase page script. More details here.

For example, you can use the following format for your scripts on the order status page:

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

Example: Facebook Pixel for post-purchase offer tracking

Shopify currently has two different Checkout versions being used by merchants. Checkout Classic is the older version and the New Checkout is the new/updated version. If your store's checkout page URL has /c/ in it, then you are using the New Checkout version. Otherwise, you are using the Checkout Classic version. Below is an example of how the New Checkout page's URL would show with /c/ included in it:

https://store.myshopify.com/checkouts/c/991c874c0ab5922ace526f47affbcfa7/information

Why does this matter?

Depending on which Shopify Checkout version you're using, the Facebook pixel integration for Shopify will work differently.

Checkout Classic:

For the native Facebook Pixel for Shopify, the "Purchase" event for the initial order fires automatically when the post-purchase upsell 1 page loads. Therefore, only event tracking for the post-purchase offer(s) is needed to be added, if desired.

New Checkout:

For the native Facebook Pixel for Shopify, the "Purchase" event for the initial order does not fire automatically when the post-purchase upsell 1 page loads. Instead, it fires when the OSP page is landed on. Event tracking for post-purchase offers can be implemented, however if the customer fails to reach the OSP then the purchase event for the initial order will not be fired by Shopify's native integration.

Below is an example script for the Facebook Pixel that can be used to track the "Purchase" event for post-purchase offer conversions only:

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'YOUR_PIXEL_ID');
</script>

<script>
Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
  const prevOrder = previousOrder.order || previousOrder;
  const oldItems = prevOrder.lineItems.map(function (line) {
    return line.id;
  });

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

  if (addedItems.length === 0) return;

  const newItem = addedItems[0];

  fbq('track', 'Purchase', {
    content_type: 'product_group',
    content_ids: [newItem.product.id],
    value: newItem.finalPrice,
    num_items: newItem.quantity,
    currency: newOrder.currency
  });
});
</script>

📝Make sure to include your Facebook Pixel ID where YOUR_PIXEL_ID is shown in the example script above.

Below is an example script for the Facebook Pixel that can be used to track the "Purchase" event for both the initial order and post-purchase offer conversions:

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'YOUR_PIXEL_ID');
</script>

<script>
Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
  const prevOrder = previousOrder.order || previousOrder;
  const oldItems = prevOrder.lineItems.map(function (line) {
    return line.id;
  });

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

  if (addedItems.length === 0) return;

  const newItem = addedItems[0];

  fbq('track', 'Purchase', {
    content_type: 'product_group',
    content_ids: [newItem.product.id],
    value: newItem.finalPrice,
    num_items: newItem.quantity,
    currency: newOrder.currency
  });
});
if (!Shopify.wasPostPurchasePageSeen) {
  const order = window.Shopify.order
  fbq('track', 'Purchase', {
    content_type: 'product_group',
    content_ids: order.lineItems.map((item) => item.product.id),
    value: order.totalPrice,
    num_items: order.lineItems.reduce((acc, item) => (acc += item.quantity), 0),
    currency: order.currency
  });
}
</script>

📝Make sure to include your Facebook Pixel ID where YOUR_PIXEL_ID is shown in the example script above. If the "New Checkout" version is used, the "Purchase" event for the initial order will double-fire if the customer reaches the OSP (once via the script above and once via Shopify's native FB pixel integration).

More example scripts can be found here in Shopify's official documentation.

Additional Resources from Shopify

Below are the additional resources from Shopify's official help documentation on this new field. It's highly recommended that you or your developer review each section to ensure correct implementation: