Lesson 6.2 · 50 minGoogle Tag Manager

What you will have

The site loads one Google Tag Manager container on its public pages, and the student can connect Tag Manager's preview mode to the live site and see page loads arriving.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 4 — Installing the container with Claude

Purpose: install our Google Tag Manager container on the public website so that all
tracking can be managed in GTM from now on.

Context: this is a Next.js App Router project. The container ID is in .env.local as
NEXT_PUBLIC_GTM_ID. The official Next.js documentation describes loading GTM with the
GoogleTagManager component from the @next/third-parties package; read the current
Next.js docs page on third-party libraries before you start and follow it.

Done looks like:
- GTM loads on every public page: /, /thank-you, /privacy, /terms and /lp/*.
- GTM does NOT load on any /admin page. The CRM shows personal data and must never be
  seen by tracking tools.
- If NEXT_PUBLIC_GTM_ID is empty, nothing is loaded and nothing breaks.
- The container ID appears nowhere in the code, only in the environment variable.

Constraints:
- Do not add Google Analytics or any other tracking script directly. GTM only.
- Do not push any custom events yet; that is a later lesson.
- Use the route structure that already exists; if GTM has to live in a layout that
  covers only the public pages, explain what you moved and why.

Verify before reporting: run the build; start the site locally; load / and confirm in
the page that a request to googletagmanager.com/gtm.js with our container ID is made
and that window.dataLayer exists; load /admin/login and confirm no such request is
made. Report what you checked and what you saw.

Do along

Work on your own project. Pause the video where a step says so.

1. Pause after Part 3. Create a Tag Manager account and a Web container for your own domain. Copy the container ID.
2. Pause when the prompt appears in Part 4. First add NEXT_PUBLIC_GTM_ID to .env.local and to the Vercel environment variables.
3. Run the installation prompt from Part 4. If your project has extra public routes, list them in the "Done looks like" section. If you have extra private areas, list them next to /admin.
4. Review the diff: no container ID in code; GTM absent from admin routes.
5. Commit, push and wait for the deployment.
6. Pause after Part 5. Open preview mode against your live domain and confirm the connection.
7. Pause after Part 6. Publish the container with a version name.
8. Tag the checkpoint (commands in "Recap and next").

Check your work

1. In Tag Manager click Preview and connect to your live site. Expected: Tag Assistant shows "Connected", and the left column lists Container Loaded, DOM Ready and Window Loaded.
2. Navigate to a second public page in the connected window. Expected: new entries appear in Tag Assistant for that page.
3. Open /admin/login in the connected window. Expected: no new entries appear, because the container is not on that page.
4. In the project, search the code for GTM-. Expected: no matches outside .env.local.
5. In Tag Manager open Versions. Expected: one published version with your name on it.

Common problems

• Tag Assistant says it cannot connect. → An ad blocker or privacy extension is blocking Tag Manager, or the deployment has not finished, or the variable is missing in Vercel. → Try a browser profile without extensions; check the deployment in Vercel; confirm NEXT_PUBLIC_GTM_ID exists there and redeploy.
• It works locally but not on the live site. → The variable was added to Vercel after the last deployment. → Redeploy; NEXT_PUBLIC_ values are fixed at build time.
• Tag Assistant connects on /admin too. → GTM was placed in the root layout. → Tell Claude: "GTM is loading on /admin. Move it so it covers only the public routes, and verify /admin/login makes no request to googletagmanager.com."
• Build fails after installing the package. → Version mismatch between next and @next/third-parties. → Give Claude the full error and ask it to align the versions according to the Next.js docs, then rebuild.

Homework

About 25 minutes, after the lesson. Nothing here is needed to start 6.3. Add nothing to the container and publish nothing; this homework changes no files. Write in your course notes.

1. Every page, checked (~10 min). Connect preview to your live site and visit every public page (/, /thank-you, /privacy, /terms and any of your own), then every admin page you can open. Make a table: page, "Container Loaded" seen or not. Done when: every public page says yes and every admin page says no. If a row is wrong, use "Common problems".
2. Your plan in Tag Manager's words (~10 min). For each of the four events in your measurement plan, write one line with three parts: the tag (what should be done), the trigger (when) and the variables (with which values). Plain words; build nothing. Done when: there are four lines and each has all three parts.
3. Where the account lives (~5 min). In your business records, not in the repository, write which Google account owns the Tag Manager account, and the account and container names. Done when: someone else in your business could find the container from that note.

Save your work

git add -A
git commit -m "Lesson 6.2: Google Tag Manager container installed"
git tag lesson-6.2
git push
git push --tags