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