Install GTM and the Google tag on your site

#01What you are installing

Two layers:

1. GTM container snippet — loads your published container (GTM-XXXXXXX).
2. Google tag inside GTM — sends data to Google product destinations such as a GA4 data stream (and can also connect to Google Ads destinations).

According to Google Tag Manager Help on Google tag settings, the Google tag is the shared way to send data to linked Google destinations. In GTM you typically create a Google tag (not the older standalone "GA4 Configuration" name you may still see in blog posts) and set your Measurement ID.

#02Step-by-step: container snippet

1. In GTM, open Admin → Install Google Tag Manager, or copy the snippet shown when you created the container.
2. Paste the main script as high in the <head> as your CMS allows, on every template.
3. Paste the noscript iframe block immediately after the opening body tag.
4. Deploy to staging first if you have it.
5. Confirm the page source shows GTM- and that a network request loads gtm.js?id=GTM-....

CMS notes marketers hit often:

#03Step-by-step: Google tag for GA4

1. In GTM, go to Variables → configure built-ins if needed → create a Constant variable named const - GA4 Measurement ID with value G-XXXXXXXX.
2. Tags → New → Google tag.
3. Set Tag ID to {{const - GA4 Measurement ID}}.
4. Trigger: All Pages (Initialization or Consent Initialization patterns come in lesson 12; for a sandbox without consent, All Pages is fine to start).
5. Name the tag Google Tag - GA4 - Main.
6. Preview, then publish when verified.

Some containers show configuration settings on the Google tag for automatic event detection (page views, scrolls, outbound clicks, form interactions, video, file downloads). According to Google's Google tag settings help, these can be managed in Google tag settings and affect associated destinations. Know what is on before you also build duplicate scroll tags in lesson 13.

#04Single-page apps and history changes

If your site changes pages without full reloads (React, Next.js client routing, many product hubs), a plain All Pages trigger still fires on first load, but client-side route changes may need:

• Google tag automatic detection of Page views on browser history change, and/or
• A History Change trigger in GTM firing a GA4 event for virtual page views.

Verify with Preview while clicking internal nav. If Page Path updates but no new page_view appears in GA4 DebugView, fix this before trusting funnel reports.

#05Avoiding double measurement

Classic failure: hard-coded gtag.js for G-XXX and a Google tag in GTM for the same ID. Symptoms: page_view counts roughly 2×, bounced rates look odd, Ads imports look inflated.

Method. Inventory every loader: GTM, gtag.js, Google tag gateway, vendor "GTM apps", Shopify pixels. Keep one primary path per destination. Document exceptions.

#06Worked example: Ledgerline install

Ledgerline is a fictional accounts-payable software company. Details are illustrative.

Ledgerline's Next.js marketing site had gtag hard-coded in the root layout. They added GTM without removing gtag. Preview showed two Google tags firing. They removed the hard-coded snippet, kept GTM, and page_view volume in GA4 Realtime halved overnight — which was correct.

Walkthrough

1. Create the Constant for your Measurement ID.
2. Create the Google tag on All Pages.
3. Click Preview, connect to your staging URL.
4. On the first page load, confirm the Google tag fired.
5. In GA4, enable DebugView (or use the Tag Assistant debug link) and confirm page_view.
6. Search the page source for raw G- or gtag( outside GTM; remove duplicates.
7. Publish with version notes.

#07Content Security Policy and tag blockers

Strict CSP headers can block googletagmanager.com or your first-party GTM/serve domain. Symptoms: snippet present in HTML, no gtm.js network call, Preview fails to connect. Fixing CSP is an engineering change — document it as a launch dependency, not a GTM UI issue.

Similarly, privacy browsers and extensions block tags. Always QA in a clean profile. Never tune conversion rates solely from an engineer’s locked-down browser.

#08Google tag destinations

A single Google tag can send to multiple Google destinations (GA4 streams, Ads). That power encourages accidental dual-stream setups. After install, open Google tag settings / destinations and list what is connected. Remove leftover test destinations.

#09Measurement ID hygiene

• Production site → production GA4 stream.
• Staging site → staging stream (or filtered view / separate property).
• Never "temporarily" point staging at production to "see real data" during development — you will pollute key events and Ads imports.

Use the hostname Lookup Table from lesson 5 to send an env parameter so mistakes are detectable in Explorations even if someone mis-points an ID.

#10Install verification checklist (copy this)

Run this checklist on staging and again on production the day you publish.

#11Multiple domains, one container

If www and a localized host share one container, confirm the snippet is present on both. Use hostname Lookup Tables for env and stream IDs if streams differ. If legal entities require separate GA4 properties, separate Measurement ID Constants and triggers by hostname — still usually one container, not five.

#12After a site migration

When the CMS changes, re-run the install checklist even if "GTM was copied". Migrations often drop noscript blocks, duplicate snippets via both GTM and a tag injection app, or move to a SPA renderer that needs history change page views. Treat relaunch week as a measurement launch too.

#13Try it yourself

On staging, install GTM + Google tag, verify Preview and DebugView, then deliberately break it by adding a duplicate hard-coded gtag and watch double page_view. Remove the duplicate again. That visual sticks.

#14Quick quiz

1. What are the two parts of the GTM install snippet?

Answer: The JavaScript snippet in the document head and the noscript iframe after the opening body tag.

2. Why use a Constant variable for the Measurement ID?

Answer: So you change the ID once if streams change, and avoid typos across tags.

3. What is a common cause of doubled page_view hits?

Answer: Hard-coded gtag.js and a GTM Google tag both sending to the same Measurement ID.

#15What should you check before the next lesson?

• GTM snippet is sitewide on staging or production.
• Google tag fires once per page load in Preview.
• GA4 DebugView shows page_view.

Previous: Containers, workspaces and versions. Next: Triggers explained. Or return to the GTM for Marketers track. Related: GA4 property setup checklist.

#16Common questions

Where does the GTM snippet go? As high in the head as possible, plus noscript right after body, on every measured page.

Google tag or GA4 Config? Use the Google tag. Older materials say GA4 Configuration.

Can I keep hard-coded gtag and GTM? Risky double-counting. Prefer one loader path.