fbpx

A Beginner’s Guide to Implementing gtag.js with Google Tag Manager (GTM)

Are you feeling overwhelmed by the world of website tracking and data collection? You’re not alone. With evolving privacy regulations and the eventual phase-out of third-party cookies, understanding how to implement website tagging properly can seem daunting. But don’t worry, Google has provided two powerful tools – gtag.js and Google Tag Manager – to simplify the process.

What is gtag.js?

gtag.js is a JavaScript tagging framework that allows your website to communicate and send data to various Google products like Google Ads and Google Analytics 4 (GA4). It acts as a universal adapter, replacing the need for multiple tags for each Google service.

For marketers without dedicated web developers or those preferring a hands-off approach to code, gtag.js provides a streamlined way to collect important user data and measure website performance. As third-party cookies get phased out, relying on first-party data through gtag.js will become crucial for accurate measurement.

What is Google Tag Manager?

Google Tag Manager (GTM) takes website tag management to another level. It’s a free tool that centralizes all of your website tags in one easy-to-use interface. With GTM, you can add, edit, and remove tags across your site without actually editing the site’s code.

GTM’s versatility is one of its biggest strengths. It supports not only Google tags like gtag.js, but also a wide array of third-party tags for things like Facebook Ads, LinkedIn analytics, and more. This makes GTM an essential tool for comprehensive data collection and marketing efforts.

The Power of Using gtag.js and GTM Together

While you can implement the gtag.js code directly on your site, using it in conjunction with Google Tag Manager provides more flexibility, control, and advanced features:

– Centralized tag management across your site(s)
– Easy updating of tags without editing code
– Advanced tag firing rules and version control
– Collaboration and workspace sharing
– Support for server-side tagging
– Management of third-party tags beyond just Google

Implementing gtag.js Through Google Tag Manager

Now let’s walk through how to set up the powerful duo of gtag.js and GTM properly:

1. Create a Google Tag Manager Account

Sign up for a free GTM account at tagmanager.google.com. Create a “Web” container for your website.

 Screenshot of the Google Tag Manager interface showing the "Create Container" screen. A container name and website URL are entered, with various target platform options listed below. This view is perfect for anyone referencing a Beginner's Guide to set up their first gtag.js container.

2. Install the GTM Code Snippets

Copy the two GTM code snippets provided. Paste the first snippet high in each page’s <head> section. Paste the second snippet immediately after the <body> tag.

Screenshot of the Google Tag Manager (GTM) interface showing steps to install the GTM code on a website, including gatg code snippets to add near the head and opening body tags of the webpage.

3. Create the gtag.js Tag in GTM

Within your GTM container, create a new tag titled “Google tag.” Choose “Google tag” as the tag type and enter your Google tag ID (find this in Google Ads or GA4).

Screenshot of the Google Tag Manager interface, showcasing the "Choose tag type" panel on the right with options like Google Analytics and Google Ads, and "Tag Configuration" on the left—a true gatg for digital marketers.

4. Set Up the Trigger

Next, set up a trigger for when this tag should fire. The most common is the “All Pages” trigger to have it fire across your whole site.

Google Tag Manager interface showing the configuration screen for a Google Tag. The tag, mistakenly named "gatg.js," is set to trigger on all pages.

5. Save and Publish in GTM

Save your new tag and trigger settings. Then, publish your changes in GTM to make them live on your site.

 

6. Verify Using Tag Assistant

Use the free Google Tag Assistant Chrome extension to scan your website and verify that the gtag.js tag is being detected and firing events properly.

Screenshot of a Google Tag Assistant Legacy window showing tag analysis results for hopskinedema.com, indicating multiple instances of Global site tag (gtag.js) and areas where optimization is needed.

Building a Solid Tracking Foundation

By implementing gtag.js through the powerful Google Tag Manager system, you’re setting up a flexible, privacy-focused foundation for accurate website tracking. From basic pageview tracking to advanced e-commerce and conversion measurement, this combo enables comprehensive data collection.

 

And the best part? You’re doing it in a marketer-friendly way without heavy reliance on developer resources or code changes. So take control of your website data, drive insights, and optimize your marketing efforts like never before!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.