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

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 blog as is and you should be good but if for some reason not, then ask in comments.

After this, a couple of more things.

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

After you have created your Shopify Buy Button as shown in this article and added it to your HTML as explained in this Shopify article

Unbounce users will follow this article

Ok, thats a lot of articles but those complete the ground work. 

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 source.

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?

In your Shopify button code, find the following code line:

"button": "Checkout"

This is at the end of your script. Add the above “event hook” code right after this line preceded by a comma (comma is important otherwise it’ll break your code).
So the last bit will look like this:

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

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.