-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: support Google Tag Manager and Google Tags via an env variable #455
Conversation
80cf99e
to
eeefd6b
Compare
At our rails catchup, we discussed a number of aspects relating to this PR:
|
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','<%= google_analytics_id %>');</script> | ||
<!-- End Google Tag Manager --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had a quick look at how we implemented this on my most recent client project:
<%= javascript_tag nonce: true, defer: true do -%>
var dataLayer = [];
(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;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
<% end -%>
There are two things I think we should steal from this:
- use
javascript_tag nonce: true, ...
to avoid the CSP yelling at us about an embedded<script>
without a nonce - Define the
dataLayer
variable in JS. GTM does not define this for you.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤔 maybe it would be worth linking to https://github.com/google/data-layer-helper in a comment - it's really the best dev focused docs I've found about how to actually use the dataLayer
fcce2a7
to
c30cdad
Compare
363ac52
to
1e3f8fe
Compare
This is based on the different patterns we've used over the years for supporting this in our apps - in the end I've gone with having a dedicated analytics partial for "head" and "body" to provide a dedicated grouping that'll also hopefully encourage people to think about the situation if they find these files growing significantly.
I'm marking this as a draft until we've decided what wording we want to be in these files for which I'd like input from others.
Resolves #439