Why is Google Tag Manager causing errors on my checkout page?

Technical Q&A

Topic summary

Implementing Google Tag Manager (GTM) via Shopify’s Customer Events on the new checkout triggers console errors only on the checkout page: “Uncaught DOMException: Blocked a frame with origin ‘null’ from accessing a cross-origin frame” and a related “debugBadgeApi” error.

Impact: GTM Preview can’t detect the pixel even though the code appears in source; removing the GTM script eliminates the error.

Attempts and observations:

  • Moving the GTM tag outside the pixel section prevents reading the dataLayer.
  • window.postMessage() was suggested but not implemented/validated.
  • Following Shopify’s tutorial still results in the preview error.
  • Using the Google Tag Assistant Legacy Chrome extension successfully confirms dataLayer, suggesting the issue lies with GTM’s preview tool on checkout.

Likely cause: CORS (Cross-Origin Resource Sharing) and cross-domain iframe restrictions in Shopify’s checkout environment interfering with GTM’s preview/debug badge, which attempts cross-frame access.

Key terms: dataLayer (GTM’s event data store); iframe (embedded page); window.postMessage (cross-window messaging).

Outcome/status: No official fix shared; Legacy Tag Assistant is a workaround for validation. Discussion remains open without a definitive resolution.

Summarized with AI on December 17. AI used: gpt-5.
1

Hello everyone. We are trying to set up some web pixels using Google Tag Manager using the new “Customer Events” functionality of Shopify on a store already in the new checkout. However, we are getting an error only happening on the checkout page. As soon as the script is executed, it returns this: Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame. I’m attaching a screenshot of the error for full context.

Any idea of why this might be happening? If I remove the GTM script, everything works fine. So it must be something related to the external script. I’ll appreciate any help, thanks in advance!

juanpfc_1-1698684191988.png
juanpfc_1-1698684191988.png400×645 31.9 KB

7 Likes
2

I am having the same issue. Has anyone found a solution to this yet? I have attempted to move the GTM tag outside of the pixel section and it doesn’t read the datalayers. Very frustrating.

2 Likes
3

I am facing same issue, did any found any solution?

Very frustrating. Please help

1 Like
4

Receiving the same error. I have seen in some non-Shopify forums that window.postMessage() may be a solution, but I am not sure if or how that can be implemented here. Is anyone able to assist?

5

I’m having a similar issue. I followed these instructions to set up my tracking pixel using Customer Events:
https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

but when I try to preview in GTM, I see an error in the browser console and preview tells me it can’t find the pixel. When I view source, I see the pixel code is there. I’m surprised we’d be shown an implementation that doesn’t quite work.

Uncaught DOMException: Failed to set a named property ‘debugBadgeApi’ on ‘Window’: Blocked a frame with origin “null” from accessing a cross-origin frame.

RDaneel_0-1713206338838.png
RDaneel_0-1713206338838.png897×436 15 KB

3 Likes
6

Nobody is in a hurry to fix the topic :slightly_smiling_face:

7

Same problem here. It seem to be a serious topic pleas Shopify Team give us an answer !

2 Likes
8

Hey, it seems that the article suggests using a Chrome extension https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial#:~:text=Add%20the%20Google%20Tag%20Assistant%20Legacy%20Chrome%20extension%20to%20your%20browser , rather than GTM preview tool. I’ve managed to confirm the correct datalayer info using the Legacy Chrome extension.

The error seems to be related to the preview tool itself.

1 Like
9

Has anyone solved this problem

10

I spent so long trying to work out what was wrong with my implementation and it was this all along.

11

It’s a simple :wink: There is a forced CORS policy error. The reasons for this error can be varied, and here are the most common ones: No local server, Trying to access frames from different domains, CORS policy on the server. Everything is based on the correct configuration of the server. The cors rules respond correctly but I have to have exceptions for google they use the iframe solution.The best thing is that you probably don’t have to use an iframe so you won’t have any mistakes…