Skip to content
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

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

G-Rath
Copy link
Contributor

@G-Rath G-Rath commented Jul 28, 2023

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

@lukeify
Copy link

lukeify commented Aug 25, 2023

At our rails catchup, we discussed a number of aspects relating to this PR:

  1. The name of the Rails configuration variable (currently google_analytics_id)—perhaps this could be renamed to analytics_id, but there can be multiple analytics providers per project, so it may not necessarily scale.
  2. The specifics of dynamically calling this condition on every page load—performance?
  3. This could be useful to have uniformity and something to crib off for future analytics changes for project teams.
  4. The differences between Google Analytics & Google Tag Manager itself (and the use of gtag.js).

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 -->
Copy link
Contributor

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:

  1. use javascript_tag nonce: true, ... to avoid the CSP yelling at us about an embedded <script> without a nonce
  2. Define the dataLayer variable in JS. GTM does not define this for you.

Copy link
Contributor

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

@eoinkelly eoinkelly added the WIP Work in progress label Oct 21, 2023
@G-Rath G-Rath marked this pull request as ready for review November 17, 2023 21:30
@G-Rath G-Rath removed the WIP Work in progress label Nov 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support Google Tag Manager out of the box
4 participants