How to pass UTM Parameters into Shopify's Product Buy Button Checkout

The pain of iFrame

You need to know that when you add a Shopify Buy Button to a page, it utilizes an iFrame. iFrames are a big pain in the tracking world. See more on how to work with iFrame tracking on Simo’s awesome blog. But in this implementation, you’ll not need it 😉

However, if your landing page is on a different domain than your Shopify store, you need to make sure that cross-domain tracking is implemented.

Next, I am assuming that you know at least some Javascript to understand this. If you don’t, just try to follow the instructions in this post “as is” and you should be good. But if for some reason not, then feel free to ask in the comments below.

A couple of things before we kick-off —

This implementation is not as much about making changes to your landing page as it is about adjusting your Shopify Buy Button code.

You have most likely created your Shopify Buy Button as shown in this article and added it to your HTML as explained in this article.

(Unbounce users will follow this article)

Ok, that’s a lot of articles but those complete the groundwork. 

Let’s customize and get your UTM parameters

Code Customization

We’ll first look at grabbing the UTM parameters from the landing page URL and using them in your checkout process. Next, we will look at how to customize the Buy Button code to hard-code the UTM parameters. I don’t like hard coding stuff myself but sometimes you may want to keep things simpler and change it for every button, for example, to (perhaps) categorize them as a different traffic sources.

Passing UTM Parameters from the landing page URL to Shopify Buy Button 

As you might already know, there are 2 parts to the Shopify buy button code – one is the Javascript and the other HTML. HTML is a simple line, so we are not going to worry about that.

Place this snippet between

(function () {

and

var scriptURL =

in your Shopify code. These are most likely lines 3 and 4 of your Shopify button code.

Next, we are going to use these extracted parameters and append them to the button click. And the code that does this is:

    events: {
        afterInit: (cart) => {
            cart.onCheckout = () => {
                const checkoutUrl = cart.model.webUrl + '&' + theURLParamsForShopify;
                // we dynamically change the checkout function.
                cart.checkout.open(checkoutUrl);
            };
        },
    }

What we are really doing here is utilizing Shopify’s lifecycle hooks for running custom functions as given in the Shopify BuyButton.js customization options. (Scroll down to “events”) to see all hooks.

We’ll add this toward the bottom of the Shopify javascript but still as a part of the same single function 😉

                        events: {
                            afterInit: (cart) => {
                                cart.onCheckout = () => {
                                    const checkoutUrl = cart.model.webUrl + '&' +'utm_source=test&utm_medium=test&utm_campaign=test&utm_content=test&utm_term=test';
                                    // we dynamically change the checkout function.
                                    cart.checkout.open(checkoutUrl);
                                };
                            },
                        },

Notice the UTM values I have added. I have used test values in all parameters but feel free to assign your own values.

Let us know if you hit any issues.

What happens if your landing page URL does not have UTM Parameters?

We are now talking about cross-domain (if your landing page is on a different URL than your shopify store). If yes and you do not have cross domain tracking implemented, the page URL will show up as a referral in Google Analytics. Otherwise, it will tie back to the original traffic source from which the visit originated or direct/none.