Topics covering webhook creation & management, event handling, Pub/Sub, and Eventbridge, in Shopify apps.
Hello Everyone!
I have been looking for a solution to this issue for a long time, but so far, haven't found a good answer. Hopefully someone here has an answer.
The question I have is reasonably simple: How do you go about tracking conversions when the relevant conversion data has been placed in a sandbox (iframe)?
Now, here's the understanding I have come to after spending hours researching this.
The Additional Scripts section of the Post-purchase Page section in checkout settings is managed by the checkout.liquid file. As far as I can tell, the entirety of this file is loaded within the Shopify sandbox, which appears to be just a regular <iframe> tag.
If my understanding so far is accurate, it means that no matter where you install GTM, it will always be installed inside the iframe at the post-purchase page, along with the dataLayer scripts used to track the initial purchase.
This is where my understanding gets substantially fuzzier. This either means that GTM effectively does not initialize properly and none of the dataLayer scripts do anything, or it means that GTM initializes in the child frame, and something else is the problem. I know the scripts have proper syntax, so at least the dataLayer events should be firing, and I should be able to see something if GTM is initializing.
Thanks in advance!
Noah
Hi Noah,
Your understanding of the situation is largely correct - the Additional Scripts section is indeed managed by the checkout.liquid file and is loaded within the Shopify sandbox. This does mean that Google Tag Manager (GTM) and any associated scripts would be loaded inside the iframe on the post-purchase page.
However, the issue you're encountering is likely due to the same-origin policy - in this case, the GTM script in the iframe is considered to be from a different origin than the parent page, which restricts how these scripts can interact with each other.
This means that while GTM may successfully initialize within the iframe, it can't communicate with the parent page or any scripts running there - which is why you're not seeing the expected results. You might need to adjust your setup to ensure that the necessary data is accessible within the iframe, or consider alternatives to using an iframe if possible.
Hope this helps!
Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
Hey Liam,
Thanks for taking the time to respond here. I'm curious what you mean in the last part of your response. What alternatives are there to using an iframe for checkout.liquid? Or a way to load GTM outside the sandbox? I have seen a method for passing data from the child to the parent frame by using a postMessage (Julian from MeasureSchool posted the method) but that only works if you have GTM loading in the parent frame to begin with.