How to Track Shopify Upsell Purchase Event with Server-Side GTM

Upsells increase Averge Order Value (AOV)
But if they aren’t tracked properly, your ad platforms never see that extra revenue.

And when platforms don’t see revenue, they don’t optimize for it.

On Shopify post-purchase (upsell) pages, tracking is tricky. Standard web containers from Google Tag Manager often don’t load normally, scripting is limited, and cookies may not be sent consistently.

In this guide, we’ll walk through:

• Why upsell tracking breaks
• Why server-side tracking is the solution
• How to use an advanced custom loader
• How to send events safely to your sGTM container

This approach is built for marketers who want resilient, future-proof tracking.

Why Shopify Upsell Tracking Breaks

The problem starts with user behavior.

After payment:

• The card is charged
• Confirmation email is sent
• The user assumes the journey is complete

Many users close the tab before reaching the standard order status / thank you page.

If your tracking fires on that final page, you miss conversions.

Additionally:

• GTM web container may not load
• DataLayer pushes may fail
• Cookies might not be included in HTTP requests
• Browser restrictions interfere with attribution

Result: Upsell revenue exists in Shopify — but not in GA4 or ad platforms like Google Analytics 4 or Google Ads.

Why Server-Side Tracking Fixes This

With server-side tracking:

1. The browser sends event data to your tracking subdomain.
2. Your server container processes the event.
3. The server forwards it to analytics and ad platforms.

This keeps tracking in a first-party context, making it:

• More reliable
• Less affected by blockers
• More flexible
• Easier to enrich with CRM or offline data

But there’s one more layer that makes it even stronger:

👉 An advanced custom loader.

What Is an Advanced Custom Loader?

Instead of loading:

https://www.googletagmanager.com/gtag/js

You load your tracking library through:

https://tracking.yourdomain.com/gtag/js

This means:

• No direct reference to Google domains
• Reduced ad-blocker detection
• First-party delivery
• Cleaner signal flow

This method works especially well when combined with a properly configured sGTM endpoint.

Architecture Overview

Upsell Page
↓
Custom Loader (First-Party Subdomain)
↓
Server GTM Container
↓
GA4 / Google Ads / Meta CAPI

The browser never sends events directly to Google.

Everything flows through your infrastructure.

Step 1: Configure Your Server Container

Inside your sGTM container:

• Set up GA4 Client
• Enable first-party endpoint
• Configure custom domain (e.g., tracking.yourdomain.com)
• Ensure SSL is active
• Enable script proxying (if your hosting supports it)

Your server must be able to:

• Serve gtag.js
• Receive measurement hits
• Forward events to platforms

Step 2: Implement the Advanced Custom Loader

Here is a production-ready example for Shopify upsell pages:

<script>

(function() {

  var trackingDomain = “https://tracking.yourdomain.com”;

  var measurementId = “G-XXXXXXX”;

  // Create script element

  var gtagScript = document.createElement(“script”);

  gtagScript.async = true;

  gtagScript.src = trackingDomain + “/gtag/js?id=” + measurementId;

  document.head.appendChild(gtagScript);

  // Initialize dataLayer

  window.dataLayer = window.dataLayer || [];

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

  window.gtag = gtag;

  gtag(‘js’, new Date());

  gtag(‘config’, measurementId, {

    ‘transport_url’: trackingDomain,

    ‘first_party_collection’: true,

    ‘send_page_view’: false

  });

})();

</script>

Why This Is Advanced

• Script loads dynamically
• Uses first-party endpoint
• Avoids direct Google domain call
• Disables automatic page_view
• Fully controlled routing via transport_url

This makes your tracking more resilient against blockers and parameter stripping.

Step 3: Sending the Upsell Event

Since Shopify often uses the same order_id for original and upsell purchases, avoid duplicate purchase events.

Instead, send a custom event:

<script>

gtag(‘event’, ‘upsell_purchase’, {

  transaction_id: ‘{{ order_id }}-upsell’,

  value: {{ upsell_total }},

  currency: ‘{{ currency }}’,

  items_array: {{ upsell_items_json }},

  cookie_string: document.cookie

});

</script>

Important notes:

• Append -upsell to avoid duplicate transaction ID rejection in GA4.
• Rename items to items_array to prevent Shopify post-purchase limitations.
• Send document.cookie manually to restore attribution.

Step 4: Process Inside Server GTM

Inside sGTM:

1. Capture items_array
2. Convert it back to items
3. Parse cookie_string
4. Extract:
   • _ga
   • _gcl_aw
   • _fbp
   • _fbc
5. Override attribution parameters in your tags

Then forward to:

• GA4
• Google Ads conversion tag
• Meta Conversions API

Now your upsell revenue is fully attributed.

Handling Cookie Issues on Post-Purchase Pages

Post-purchase pages sometimes omit cookies from HTTP requests.

By manually sending document.cookie, you regain access.

Inside sGTM:

• Use a custom variable
• Parse string
• Map needed cookies
• Attach them to outgoing events

This restores campaign attribution.

When Should You Use This?

This setup is ideal if:

• You use Shopify post-purchase upsells
• A large portion of revenue comes from upsells
• You see discrepancies between Shopify revenue and GA4
• You rely on Smart Bidding
• You run Meta + Google paid campaigns

If upsells represent 10–30% of revenue, missing tracking significantly affects performance optimization.

Final Thoughts

Shopify upsell pages operate in a restricted environment.

Standard web tracking often fails.

But with:

• Server-side GTM
• A first-party custom loader
• Proper transaction ID handling
• Manual cookie recovery
• Event transformation inside sGTM

You can fully capture both initial and upsell purchases.

Upsells increase revenue.

Server-side tracking ensures your ad platforms actually see that revenue.

And when platforms see complete data, they optimize better.