When creating a Shopify buy button, you choose an option under “Action when people click”. Your choice here determines which of the outlined methods below should you use to pass UTM parameters all the way to the checkout page.
Passing UTM Parameters into Shopify's Product Buy Button Checkout - Overview
This overview is essential for understanding which method best suits your use case. Previously, the lack of such an overview led to user complaints about the methods. The key is to identify your specific use case and then choose an appropriate method from those outlined here. This article is non-technical, so you should be able to follow along even without a technical background.
- If you choose “Add product to cart”, use this method to pass UTM parameters to the cart and then to the checkout button
- If you choose “Direct to checkout”, use this method to pass UTM parameters directly to the checkout page
- If you choose “Open product details”, use the same method as in #1.
If Shopify adds more options in the future in this setting, it is possible that these methods stop working.
Moreover, these methods are tested by placing the buy Button for all three scenarios on Unbounce pages. Unless your IT has implemented specific policies related to redirects or Javascripts, this should work beautifully.
How UTM parameters work in GA4 and Shopify? Do you need any additional steps?
UTM parameters are widely recognized by analytics platforms, including Google Analytics 4 (GA4) and Shopify Analytics. Let’s briefly cover how both handle UTM tracking.
Google Analytics
In GA4, when traffic arrives on your website with UTM parameters appended to the URL, those parameters get associated with the user’s session and persist throughout their visit—provided they continue using the same device and browser without clearing cookies. However, for accurate attribution, your checkout pages must be on the same root domain as your landing page.
For example, if your landing page is on yourstore.com, but checkout occurs on yourstore.myshopify.com (which is a different root domain), GA4 will treat them separately, potentially breaking attribution. This is because cookies set on your landing page domain won’t carry over to the Shopify checkout domain. In such cases, passing UTM parameters to the checkout page is necessary to ensure purchases are properly attributed to the original traffic source.
If both your landing page and checkout process share the same root domain (e.g., yourstore.com and checkout.yourstore.com), GA4 will naturally retain the UTM parameters across the entire customer journey without additional steps.
Shopify Analytics
Shopify Analytics automatically captures UTM parameters, similar to GA4, as long as the user lands on your Shopify store with UTM parameters present in the URL.
However, this becomes an issue when using the Shopify Buy Button on external websites, such as a different domain, a blog, or a partner’s site. If the Buy Button redirects users to your store without passing UTM parameters, Shopify will not capture them, and the sale may be attributed to Direct or Referral traffic instead.
Let me know in the comments if there are any other scenarios you find youself in and we’ll help you get there 🙂
If you’d like us to get this implemented for you, please reach out!
How to test the implementations?
- Definitely make sure that you append UTM parameters to your landing page when testing because thats the whole point, right? If you don’t load the page with UTM parameters, nothing gets passed on.
- Make a test purchase. Wait for a few hours before it starts showing up in GA4. Normally, GA4 recommends a wait time of 24 hours but in my experience it can usually be seen in a couple of hours (at least for the websites I have worked with)
- Make sure you place the script in the <head> section of the page (its recommended but perhaps not essential).
Did the buy button lose its functionality?
Its possible that the button lost its functionality because you might have made little errors during copy paste. Plop your code into chatGPT or Claude or Perplexity and ask it to identify and fix any syntax errors, semicolons, comma etc. Here is the prompt you can use
I am trying to add this Shopify Buy Button script to my landing page built in {{name of your software}}. When I add it, the button {{write the issue }}. Check for any errors in the syntax or variable naming.
Your AI partner needs more context?
Try checking for any errors in the developer console, either take a screenshot or copy paste into your AI chat.
I’ve shown how to do this below using Chrome browser:
Still no luck?
Let me know in the comments if there are any other scenarios you find youself in and we’ll help you get there 🙂
If you’d like us to get this implemented for you, please reach out!
0 Comments