Tutorial: Migrating from gtag.js to Google Tag Manager (GTM)

Migrating from a direct gtag.js implementation to Google Tag Manager (GTM) provides greater flexibility, centralised control, and scalability in managing your website tracking and analytics setup. This tutorial explains the steps involved, addresses key questions, and outlines best practices to ensure a smooth transition.

Why Migrate to Google Tag Manager?

GTM allows you to manage tracking tags (e.g. GA4, Google Ads, Meta Pixel) without directly editing your website’s code. It supports event tracking, consent mode, and enhanced measurement, all in one interface.

Gtag.js vs Google Tag Manager: Which is better?

For most client websites, we recommend using Google Tag Manager (GTM) instead of embedding individual tracking scripts like gtag.js. GTM allows us to track events such as button clicks, form submissions, file downloads and conversions without needing to modify the site’s code. It also centralises all marketing and analytics tags, supports GDPR consent mode, and integrates smoothly with tools like Google Analytics 4, Google Ads, and Meta Pixel. For ongoing marketing and performance tracking, GTM provides the flexibility, scalability and control we need as an agency.

Steps to Migrate from gtag.js to GTM

1. Set up a GTM container in Tag Manager if you haven’t already.
2. Install the GTM container code on all pages of your website, replacing the gtag.js snippet – most web development platforms have inbuilt tools that assist here or your web designers can help.
3. In GTM, create a GA4 configuration tag using your existing Google Tag ID (G-XXXXXXX).
4. Recreate any custom events or additional tracking (e.g., conversions, scrolls) inside GTM.
5. Use Preview mode to test that tags are firing correctly.
6. Once tested, publish the container and remove all instances of gtag.js from your site.

Frequently Asked Questions

Q: Do I have to remove the gtag.js snippet in a Google Tag Manager migration?

A: Yes. When migrating to Google Tag Manager, you should remove the existing gtag.js snippet from your site. The process includes a ‘final migration swap’ where you simultaneously remove the old tags and publish your GTM container. This ensures tracking is managed solely through GTM. Having both gtag.js and GTM in your website code can create problems such as data duplication and unpredictable tracking behaviour.

Q: Does this mean that GA4’s enhanced measurement would no longer work?

A: No. Enhanced measurement will still work. It is a GA4 feature that tracks page views, scrolls, outbound clicks, file downloads, etc., automatically. When you migrate to GTM, simply configure the GA4 tag in GTM and ensure enhanced measurement is enabled.

Q: How do I set up events using gtag.js, like a button press? Is this possible?

A: Yes, but it requires JavaScript, which is why we recommend GTM. Here’s an example code:

const button = document.getElementById(‘my-button’);
button.addEventListener(‘click’, function() {
gtag(‘event’, ‘button_click’, {
‘event_category’: ‘engagement’,
‘event_label’: ‘My Button Clicked’
});
});

This code tracks a custom event, but must be manually added to the website for each button or element so can become cumbersome.

Q: So button presses would require an edit to the JavaScript code, this is not required if I use Google Tag Manager?

A: Correct. With GTM, you can track button clicks using triggers and tags without editing website code. You can target buttons by ID, class, or text, and configure the event from GTM’s interface.