Adding Google Tag Manager???

Highlighted
Tourist
20 0 1

We're trying to install Google Tag Manager on a non-Plus store. 

We've added the snippet to: Online Store > Preferences > Additional Google Analytics JavaScript. 

Works fine on the store itself. However, on the Shopify checkout page, that code in that testarea is escaped. That is, for example " become &quote;

The client naturally wants analytics for the entire experience / process. 

How do we get GTM working? There doesn't seem to be a straight-forward answer. Well, at least not on DDG or Google has surfaced. 

0 Likes

Hi,

that's strange I just tried this code on a normal Shopify store under Online Store > Preferences > Additional Google Analytics JavaScript and it worked.

 

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');

 

Can you share the code you are using or the website link?

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
Tourist
20 0 1

Yes, it works within the theme / store. 

Go to checkout. View source. That's where the problem is (on a non-Plus store). 

I should add, the store is in the EU. Specifically, Germany. Maybe something about GDPR forces Shopify to do escape the script on their checkout page? 

0 Likes
Highlighted
Shopify Partner
37 2 30

If I understand correctly, you're wanting this code to execute on the checkout page where the buyer enters payment details? Not to be confused with the cart page, or the order success page? If that's correct, I don't think you'll be able to.

Consider: If you were able to add GTM to your checkout page, where the buyer enters payment details, and then your GTM is compromised in some way... a malicious actor could then replace the Shopify's credit card form with their own, and effectively steal credit card numbers. Sure it's not quite this simple, and other safeguards surely exist, but this is why you can't load arbitrary JS on the checkout page.

A long time ago, there was a loophole where you could effectively "customize the checkout" by loading arbitrary javascript in this way. Shopify fixed that some time ago.

0 Likes
Highlighted
Shopify Partner
37 2 30

After replying, I realize I didn't actually give you a path forward or a viable solution.

If you just want "analytics for the entire experience / process", you should be able to get this from Google Analytics. Shopify pushes all of the "Enhanced eCommerce" events to GA - even on the checkout page. This is done by adding your UA ID directly to Shopify - not loading it with GTM/relying on the eCommerce dataLayer (which Shopify doesn't provide AFAIK)

Shopify even pushes events to UA for each step of the checkout, so you can set up a funnel within GA that tracks each step. More info: https://help.shopify.com/en/manual/reports-and-analytics/google-analytics/google-analytics-goals-and...

0 Likes
Highlighted

Yes, I just tested on a development store and the code is printed correctly also on checkout page.

Could be related to EU or specific to Germany? I have no idea, unfortunately.

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
Tourist
20 0 1

Can you screen shot that? Because I do test in a non-Germ partner's store. Thanks

0 Likes
Highlighted
Shopify Partner
37 2 30

I just tested on a US store, and I can confirm the code we placed in the textarea is being escaped. Well, not just escaped, but "sandboxed" with in an iframe: It runs, but can't interact with the parent window (checkout) in any way. This includes accessing cookies, sending AJAX requests, loading additional javascript. Specifically, I see lots of errors in Devtools like:

Uncaught DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.
Refused to load the script 'https://script.hotjar.com/modules.357b13f05c394b8c0899.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: cdn.shopify.com ... {other shopify-related hosts, but not the hotjar server}

This has been a thing since 2019: https://community.shopify.com/c/Technical-Q-A/Google-Analytics-Script-Being-Placed-Within-IFrame-On-...
The screenshot from that post matches with what I see on my end: the entire code snippet from the admin-side textarea is loaded as the srcdoc of the iframe.

There may be some hope: The srcdoc they're iframing also implements some cross-frame interaction features like sendMessage. But I'm not entirely sure how you'd use that to do anything useful.
You'd need to know what to send to the parent window (the checkout) in a cross-frame message to get back a meaningful response. And that assumes that the parent window is even equipped for this usecase (probably not)
Maybe you could reverse-engineer this to do what you want, but again - you're probably better off just using standard Google Analytics features than implementing some custom tracking.
Code of the iframe Shopify loads on the checkoutCode of the iframe Shopify loads on the checkout

1 Like
Highlighted
Tourist
20 0 1

@Eric_Seastrand - First and foremost, thanks for taking the time. A feel not-so-out-of-my-mind now

I wish Shopify would document this - clearly and completely. GTM is a industry standard. I understand if there are limitations. I don't understand why its a secret. 

In summary, 
- GTM + GA within the theme
- GA only on checkout and beyond. 

I hope that's enough for this client. 

Thank you again for your efforts. 

0 Likes