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

[a6589932]

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 SecurityError: Failed to set a named property 'debugBadgeApi' on 'Window': 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!

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

[a6589932]

I just put this datalayer customer event custom pixel. 

Just like you said, If not put GTM Code in customer event custom pixel, When a user places an order, how does GTM capture the order information

[a6589932]

Is that how it was changedIs that how it was changed ?

[Sam_Mahmud]

Yes, place the GTM code with the purchase data layer in the customer event custom pixel. Then debug and test. 

If you face any difficulties, feel free to ask.

Thanks