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

The article is slightly technical but don't worry. I've simplified it enough so someone without coding experience can follow too.

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.

   
    // Get window location URL params
    var regex = /[?&]([^=#]+)=([^&#]*)/g,
        url = window.location.href,
        url_params = {},
        match;
    // Loop through the parameters
    while (match = regex.exec(url)) {
        url_params[match[1]] = match[2];
    }

    // Build string to be appended as parameter for shopify cart get URL
    var theURLParamsForShopify = Object.keys(url_params).map(function(k) {
        return encodeURIComponent(k) + '=' + encodeURIComponent(url_params[k])
    }).join('&');

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 😉

How to add this code?

Your Shopify button code contains 2 functions. A Function to load the script and another one to initialize the Shopify Buy. If you use a text editor, this will look like below (check line 30 and 37):

Next, expand the function on line 37 and you will see this:

These are all the UI options and other settings you saved when creating the button. We are not going to deal with these options much. Rather, our interest is in the “Cart” object of this function that you see on line 148. I’ll expand that now:

Notice line 174, marked by the red arrow. Thats where the “cart” object closes. That is where we will add out event hook!! i.e. right before closing it. It will look like this:

And that should do the job for you.

Hard-coding UTM Parameters to Shopify Buy Button 

This is pretty simple. We will just be adding a hook and simply enter the UTM parameters in the checkout URL variable.

This is how the code will look like. 

                        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.

2 Comments

  • Tim Clark
    March 13, 2021 Reply

    Hi Malik,

    Thank you for posting the additional details. I've made the modifications to my Buy Button, but am sadly not seeing any indication on the Shopify site that the UTM parameters are making their way through. I'm viewing the Shopify Report (Sales Attributed to Marketing) and am not seeing any UTM there.

    Thanks again!
    -Tim

    • admin
      March 13, 2021 Reply

      Hi Tim,

      thanks for dropping by. The above method allows you to pass the UTM parameters from the landing page to when a user clicks on the "Buy Button". Once you have implemented this, you will have to give it some time for the data to come through. My advice would be to always test things post-implementation. It's possible the code is not implemented correctly (happens all the time) - try checking the console for any errors.

      Malik

Leave a Reply to admin Cancel