wellcomecollection / wellcomecollection.org

🪟 Wellcome Collection's website and services that support it
https://wellcomecollection.org
MIT License
39 stars 5 forks source link

Activating Google Tag Manager container for wellcomecollection.org #8524

Closed taceybadgerbrook closed 1 year ago

taceybadgerbrook commented 2 years ago

Google Tag Manager was used previously for tagging data across wellcomecollection.org and wellcomelibrary.org. The container snippets should be deleted and replaced with a new snippet.

The old snippet in the head was:

<!-- Google Tag Manager -->
<script>(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-WV9JS8W');</script>
<!-- End Google Tag Manager -->

The old snippet in the body was:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WV9JS8W"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Here is a link to the snippets to install for the new wc.org only container: https://tagmanager.google.com/?authuser=0#/admin/accounts/6000872529/containers/31009043/install

taceybadgerbrook commented 2 years ago

In order to use Google Tag Manager, a data layer will need to be set up. The code needs to sit above the Container snippet in the head.

Here is the link to the snippet: https://developers.google.com/tag-platform/tag-manager/web/datalayer?hl=en_US

jamieparkinson commented 2 years ago

Moving this back to the backlog for now as it's a large (and important) change, see thread in Slack https://wellcome.slack.com/archives/C3TQSF63C/p1664797960502819

gestchild commented 1 year ago

Thinking out loud

We currently use Universal Analytics and GA4 without Google Tag Manager and could continue to do so. However, we've agreed that Google Tag Manager will provide certain benefits that make it worth adopting. Not least that it empowers Tacey to set up and remove event tracking without the need for developers to be involved, and all that that entails.

The recommended way of using Google Tag Manager, with Google Analytics, is to install Google Tag Manager and then use it to install Google Analytics. However, we already include the google analytics script (gtag.js) for both our GA4 and Universal Analytics, and track certain events, within the website code.

In order that we don't duplicate and/or lose data, we need to proceed carefully.

I can see a few approaches (option 3 being my favourite).

1. Only use Google Tag Manager

We add the Google Tag Manager code to the website and remove the Google Analytics code at the same time. At present the Google Tag Manager account seems to be set up to include the Universal Analytics and GA4 tags:

Screenshot 2023-01-23 at 17 09 57

This would be the most risky option, in terms of losing data. For example, if the UA and GA tags in Google Tag Manager don't work as expected. We also have a lot of code within the application for tracking events and I don't know how these would be affected by doing this. We could remove this event tracking code too and try and do it in Tag Manager instead, but that seems like a lot of moving parts and may not be possible for certain things like the performance metrics.

2. Take a short term hybrid approach

It is possible to include Google Tag Manager along side Google Analytics in the website code. In this case we would need to be sure that we didn't double track things.

For example, we'd need to remove the UA and GA4 tags from our Google Tag Manager account before we implement Google Tag Manager on the website. We'd also need to make sure we didn't implement event tracking via Google Tag Manager for things that are already being tracked in the website code.

We could then move in the direction of removing the analytics code from the website to the scenario of only having the Tag Manager code. We could move the events we care about across to Tag Manager in a more piecemeal fashion. At the same time we could send these events to GA4 rather than UA and remove the events we no longer care about altogether. As a last step we would remove the Google Analytics scripts and implement them in Google Tag Manager and would only need to implement GA4.

3. Take a long term hybrid approach

Basically the same as option 2, but with no intention of ever removing the gtag.js analytics scripts from the website. We might also want to keep certain events, like the performance metrics in code. At the moment this is my preferred option.

gestchild commented 1 year ago

@jamieparkinson and @taceybadgerbrook I would appreciate your thoughts on the above.

taceybadgerbrook commented 1 year ago

@gestchild there are 2 GTM accounts that I can see. GTM-53DFWQD is not a live container. It contains changes but these are the result of me trying to do training on a container that isn't live. None of these changes have been published, so we can throw this away without doing any damage.

The other account is called Wellcome Collection but it has no GTM container.

gestchild commented 1 year ago

ok, GTM-53DFWQD was the one linked to at the top of this issue as the one to install. Do we still want to do that? If yes, we'll just need to tidy it up a bit and remove the analytics tags. If no, you'll need to let me know the one you want to use.

Do you know why we have 2 and can we delete one of them?

taceybadgerbrook commented 1 year ago

@gestchild Ok, I've cleared out everything in GTM-53DFWQD.

The other account was used to track across wellcomecollection.org and wellcomelibrary.org. The stats it produced looked wrong and so the decision was taken to discontinue use of this. There is no container to delete so I'm not sure how to delete the account.

jamieparkinson commented 1 year ago

@gestchild very clear and useful description - could you explain why you favour (3) over (2)? I think (2) seems like the perfect compromise

gestchild commented 1 year ago

@jamieparkinson do you mean why I prefer 3 over 2, i.e. maintaining the hybrid approach long term?

jamieparkinson commented 1 year ago

Oops, yes, will correct original comment

gestchild commented 1 year ago

I think they'll be events we'll always need to trigger in code, such as the Next.js reportWebVitals stuff

jamieparkinson commented 1 year ago

hmmm - on the contrary I think we should be updating and unifying these events, and that this is a good opportunity to do so. eg for web vitals there is a recommended way to do it with GA4 and GTM.

Another way to say this - if it's true that we'll always need some events that are triggered in code, I don't think this automatically means we'll need gtag.js to do this. Disadvantages of keeping both would obviously be increased cost of maintenance, higher risk of regressing to use gtag for "too much" in future once this context is lost, and increased overhead of JS sent to clients.

gestchild commented 1 year ago

That's a fair point and I'm all for moving everything out of the code if we can, I was thinking we'd miss the Nextjs custom metrics, but we don't actually do anything with those currently so maybe that doesn't matter.

gestchild commented 1 year ago

@taceybadgerbrook will you be happy setting up the Web Vitals metric tracking when the time comes.

gestchild commented 1 year ago

If we got with 2, the result of the work means that as well as empowering Tacey to do tracking stuff without developers, it also moves all the responsibility onto those who know how to/want to use Google Tag Manager (which at the moment is @taceybadgerbrook and possibly @jennpb?). I just want to be clear that everyone is happy with that.

jennpb commented 1 year ago

Can I summarise what I think we're agreeing?

We're moving all tracking to GA4 via GTM including

And that moving the component-level events into GA4 via GTM can be done independently of setting up the GTM container + GA4?

There are some out-of-the-box events we'll want to pay attention to as well: https://support.google.com/analytics/answer/9234069?hl=en

gestchild commented 1 year ago

That all sounds right.

And that moving the component-level events into GA4 via GTM can be done independently of setting up the GTM container + GA4?

Yes, I think we'll add GTM, shift over the events, then remove the gtag (analytics code) and implement that in GTM too.

gestchild commented 1 year ago

Tag Manager was added in #9174 and we now use GTM to add the GA4 tag