If your A/B tests do not tie to key events/conversions, you’ll fail to make important business critical decisions.
That’s exactly what was happening for one of our clients – they were running experiments on Unbounce landing pages, sending traffic to Shopify for checkout, and had no visibility in GA4 about which variant was driving conversions.
The setup looked solid. The data wasn’t.
In this case study, we’ll walk you through how we solved this using a smart combination of JavaScript, first-party cookies, and Google Tag Manager.
We’re sharing everything from the logic behind our approach to the actual scripts used so you can implement it in your own stack.
The Problem: Unbounce and Shopify Don’t Talk to Each Other
The client was testing different landing page variants in Unbounce to improve their conversion rate.
But here’s the issue:
While Unbounce does support A/B testing and shows which variant is shown (window.ub.page.variantId), it doesn’t carry that variant ID to Shopify, where the actual checkout happens.
That meant:
- GA4 saw the conversion, but not the variant responsible
- Variant-level analysis was impossible
- The client couldn’t trust the test results
No attribution = No insights = No progress
By the time we got involved, the client had already funneled close to 100,000 users through the A/B test largely by paid campaigns. But with no visibility into which variant led to a purchase, the team could not make evidence based decision despite thousands of dollars in ad spend.
Fixing the tracking was essential for unlocking the insights that would determine where future budget and effort should go.
The Goal: Make GA4 See the Variant That Led to the Purchase
We needed to ensure the Unbounce variant ID was available at the time of the purchase event, even though the checkout happened on a different domain.
To do that, we had to:
- Capture the variant ID on the Unbounce page
- Persist it across the user journey, even as they moved to Shopify
- Send it as a parameter in the purchase event in GA4
The Solution: JavaScript + First-Party Cookie + GTM
Here’s how we stitched it all together:
1. Capture and Store the Variant ID in a Cookie
We placed this script on the Unbounce pages, ideally in the body or via GTM:
(function () {
var variant = (window.ub && window.ub.page) ? window.ub.page.variantId : null;
if (!variant) return;
document.cookie =
"variant_id=" + encodeURIComponent(variant) +
";path=/;domain=.yourdomain.com;max-age=" + 60 * 60 * 24 * 30;
})();
This saves the Unbounce variant_id in a cookie for 30 days.
If your sales cycles are longer, adjust the cookie expiry to an appropriate time.
2. Create GTM Variable to Read the Variant ID from the Cookie for the Entire User Journey
We then created a new GTM variable called Unbounce Variant ID using a First party cookie variable:
This variable made the Unbounce variant ID globally available in GTM across all pages on this domain including Shopify, (since both platforms run on the same domain).
3. Set Up GA4 Purchase Event Tag in GTM
Shopify already had the Google & YouTube app installed, which natively sends enhanced ecommerce events (like purchase) to GA4. These events are also pushed to the dataLayer, which allows GTM to react to them.
Here’s how we extended that setup:
- We created a Custom Event Trigger in GTM for the purchase event present in the dataLayer
- We added a new GA4 event tag in GTM to fire on this trigger
- We included the variant_id as an additional event parameter
- We also included a transaction_id to allow GA4 to deduplicate the event
Event Name: purchase
Event Parameters:
- variant_id : {{Unbounce Variant ID}}
- transaction_id : {{Transaction ID from dataLayer}}
Google Analytics automatically reconciles duplicate events with matching transaction_id, so we avoid double-counting purchases while still capturing custom dimensions like variant_id.
Read: Google’s official guide on deduplicating events in GA4 here and here
Result: Full-Funnel A/B Test Visibility in GA4
With this setup:
- The variant ID was recorded immediately on Unbounce via GTM
- It remained available on Shopify pages via cookie
- We safely injected the variant ID into the purchase event in GA4
- All of this worked without needing to pass it via URLs or modify Shopify templates
This gave the client exactly what they needed: clear visibility into which Unbounce variant led to each purchase, directly in GA4.
A Hidden Hiccup: Broken Cart Permalinks from Unbounce
Users from Unbounce landing pages were directed to Shopify checkout using Shopify cart permalink that pre-load two specific products into the cart with a single click.
Because the client wanted to bundle items in the cart, Shopify Buy Button wasn’t used as that would only allow one product per click.
Our audit revealed that the permalink didn’t work reliably. Sometimes the entire redirection failed taking users to a 404 page instead of the cart page which made us look into the permalink set up more closely.
Unbounce rewrites outbound links using clkn redirect wrappers — which can strip or mangle URL parameters unless handled correctly.
We identified and fixed the problem with permalink to consistently redirect users to the proper page with desired products without breaking. There’s no clear documentation on how to format a two-product permalink properly in Shopify. There is a specific way to do that.
The project turned out to be not just about fixing tracking but also stitching the journey together from first click to final purchase.
See how to pass UTM parameters with Shopify Buy Button.
Key Takeaways from This Setup
- One of the biggest opportunity lost by the client was losing for days the experiment was on. If you’re working on AB testing particularly when sending paid traffic, make sure tracking is 100% and not broken.
- Unbounce A/B tests don’t connect to Shopify without manual work even when on the same domain. This is not uncommon and could happen with other Landing page software + Shopify too.
- Storing critical identifiers in a first-party cookie can unlock full-funnel tracking.
- GA4 deduplication allows you to inject custom dimensions like
`variant_id` into existing ecommerce events safely.
- Once again, test, test and test before launch.
What We Could Do Differently
If Shopify and Unbounce were hosted on different domains, the cookie-based solution we used here wouldn’t have worked. In those cases, we’d explore options like:
- Cross-domain parameter stitching
- Server-side tagging using Google Tag Manager Server
- Using Make or Zapier to pass variant data via webhook calls
There are also other ways to handle the data flow depending on organizational setup:
- You can append the variant_id directly to Shopify cart permalinks and capture it in Shopify or GA4.
- You can send conversion data back into Unbounce via Zapier, so results appear inside the Unbounce dashboard itself.
If your team is restricted by permissions for example, when different teams control GA, Shopify, and Unbounce – either of these approaches lets each platform “own” its data without requiring access to other tools. It’s a flexible way to keep A/B testing insights accessible to everyone.
Need Help with Zapier Workflows?
TrackFunnels is a Zapier Partner.
If you’re looking to leverage Zapier automations in your Marketing Ops, campaign workflows, or cross-platform integrations, schedule a free call with our founder.
Book a free consultation →
This Case Study Reflects How We Work
At TrackFunnels, we go the extra mile than just project scope and identify potential crack. Our approach is to untangle messy marketing setups and build tracking and automations that helps our clients reveal and/or drive customer journeys in a goal-oriented way.
This case is a good example of how we:
- Work within the client’s existing tools (no unnecessary rebuilds)
- Look under the hood of every integration (even if it *looks* like it should work)
- Fix things clients didn’t even know were broken like the Shopify permalink
Need help with a messy tracking challenge? Book a free consultation →
0 Comments