FROM CACHE - en_header

Adding Google Tag Manager???

mfs-mindsize
Excursionist
20 0 7

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. 

Replies 11 (11)
drakedev
Shopify Partner
622 133 184

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 my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
mfs-mindsize
Excursionist
20 0 7

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? 

Eric_Seastrand
Shopify Partner
46 3 46

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.

Eric_Seastrand
Shopify Partner
46 3 46

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

drakedev
Shopify Partner
622 133 184

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 my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
mfs-mindsize
Excursionist
20 0 7

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

Eric_Seastrand
Shopify Partner
46 3 46

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

mfs-mindsize
Excursionist
20 0 7

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

aruiz
New Member
2 0 0

@mfs-mindsize We are in the same path, any turnaround about this? Thanks

Coolboyjoel
New Member
2 0 0

If you are facing any issue related to how to add Google Tag Manager, then you can contact Propel Guru.

Propel Guru is a digital marketing agency that is helping businesses across the globe in unleashing their true potential and to reach them to the pinnacle of success.

At Propel Guru, we are having expertise in all kind of ad platforms, like - 

1. Google Ads

2. Facebook Ads

3. Instagram Ads

4. LinkedIn Ads

5. Snapchat Ads

6. Push Ads

7. TikTok Ads and whatnot.

Contact Propel Guru now, and see your business connected and empowered.

Propelguru
Trailblazer
313 7 46

Google Tag Manager is the amazing tool provided by Google. Using a GTM you can embed as many codes or tags you want. GTM is used for tracking purpose, for example- you want to know how many visitor visit your particular webpage then we will include a tag on that particular page and we will choose the dashboard as analytics and we will put the trigger on the URL of the particular webpage.

So, now whenever someone will visit that page and they open the URL for which we have set tag and trigger then the trigger will hit and will shoot the data as 1 visitor in analytics.

Likewise we can do this for URLs, link clicks, form submission, a button etc.

Using GTM for your website prevents your website from loading slow due to too many codes put in its coding.