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>. Adding any other HTML tag(s) can prevent other tracking scripts included in this field from firing correctly.
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
For the native Facebook Pixel (Meta Pixel) integration 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.
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.
Example: GA4 (Google Analytics) for post-purchase offer tracking
For the native GA4 (Google Analytics) integration 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.
Below is an example script for the Facebook Pixel that can be used to track the "purchase" event for post-purchase offer conversions only:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXX');
</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];
gtag('event', 'purchase', {
'value': newItem.finalPrice,
'currency': newOrder.currency,
'items': [
{
'id': newItem.product.id,
'quantity': newItem.quantity,
'price': newItem.finalPrice
}
]
});
});
</script>
📝Make sure to include your G-Tag ID where G-XXXXXXXXX is shown in the two locations of the example script above.
*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: