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