Lesson 6.4 · 60 minEvents and the data layer

What you will have

The site pushes cta_click, form_start, form_submit and generate_lead to the data layer; Tag Manager forwards each to GA4 with the planned parameters; generate_lead is marked as a key event and arrives exactly once per saved lead. No personal data is sent.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 2 — Having Claude push the events

Purpose: make the site announce the events from our measurement plan, so Google Tag
Manager can forward them to analytics. The site must not talk to any analytics tool
directly.

Context: docs/measurement-plan.md has the event table. GTM is already installed on
the public pages with the GoogleTagManager component from @next/third-parties; that
package also provides sendGTMEvent for pushing to the data layer. The lead form posts
to /api/leads and then shows /thank-you.

Done looks like:
- One small module that is the only place in the code that pushes to the data layer.
  Every event goes through it.
- cta_click: pushed when any call-to-action button is clicked, with cta_id and
  cta_location (for example "hero", "pricing", "footer").
- form_start: pushed on the visitor's first interaction with the lead form, once per
  page load, with form_id.
- form_submit: pushed when the visitor submits and the browser-side validation
  passes, with form_id.
- generate_lead: pushed only after /api/leads has responded that the lead was saved,
  with form_id. Exactly once per saved lead: not on a failed request, not on a
  validation error, not again if the visitor reloads or revisits /thank-you, and not
  twice if the button is double-clicked.
- The event names are exactly these four, lowercase with underscores.

Constraints:
- No personal data in any push: no name, email, phone, message text or anything the
  visitor typed. Parameters describe page elements only.
- Push generate_lead from the form's success handler, before navigating to
  /thank-you. Do not push it from the /thank-you page.
- No analytics library other than what is already installed. No direct calls to GA4.

Verify before reporting: run the build and the tests. Then run the production build
locally, open the page, and with window.dataLayer inspect what is pushed when you
click a call-to-action, focus the first form field, submit an invalid form, and
submit a valid form. Report the exact objects pushed in each case, and confirm
generate_lead appears once and only in the valid case.

Do along

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

1. Pause when the prompt appears in Part 2. Run it, listing your own form_id and cta_location values if they differ.
2. Review Claude's report of pushed objects. Reject any parameter that comes from visitor input.
3. Commit, push, wait for the deployment.
4. Pause after Part 4. In Tag Manager create the four Custom Event triggers, three Data Layer Variables and four GA4 Event tags.
5. Pause after Part 5. Preview and run the test sequence in order: button, first field, invalid submit, valid submit, reload of the thank-you page.
6. Publish the container with a version name.
7. Pause after Part 6. Mark generate_lead as a key event in GA4.
8. Ask Claude to update the event table in docs/measurement-plan.md with the real parameter names and values taken from the code, changing the document only and listing any difference between plan and code for you to decide.
9. Delete your test leads from the CRM, then commit and tag.

Check your work

1. With preview connected and DebugView open, submit the form once with valid test data. Expected: generate_lead appears in DebugView exactly once.
2. Click the event in DebugView. Expected: the parameter form_id with your planned value, and no parameter containing typed text.
3. Reload /thank-you. Expected: no additional generate_lead.
4. Submit the form with an invalid value. Expected: no form_submit and no generate_lead.
5. Open the CRM lead list. Expected: exactly one new lead for the one valid submission.
6. In GA4 Admin → Events. Expected: generate_lead is marked as a key event.
7. In the code, search for dataLayer and sendGTMEvent. Expected: they appear only in the one tracking module.

Common problems

• The event shows in Tag Assistant but the tag is under "Tags Not Fired". → The trigger's event name does not match the pushed name exactly. → Compare them character by character; correct the trigger.
• generate_lead appears twice. → It is pushed in two places, or also from the thank-you page, or you are testing a development build. → Tell Claude: "generate_lead fires twice on the live site. Find every place it is pushed, keep only the success handler, and show me the test that proves exactly once."
• form_start or form_submit appear twice in DebugView with different parameters. → Enhanced measurement's form interactions is still on. → Switch it off in the data stream settings (lesson 6.3).

Homework

About 30 minutes, after the lesson. Nothing here is needed to start 6.5. Do not rename any event or parameter. Use fake details, delete the test leads afterwards, and write the tables in your course notes. If Claude changes code, commit without a tag.

1. The second form (~10 min). The lesson tested one form. If your page has another, as the sample page does at the bottom, run the Part 5 sequence on it in preview. With only one form, repeat the sequence in a browser window narrowed to phone width. Done when: generate_lead appears exactly once, and with two forms the two form_id values differ.
2. Try to break "exactly once" (~10 min). In preview, make three attempts: double-click the submit button; after the thank-you page press Back, then Forward; open /thank-you directly without submitting. Table: attempt, generate_lead events seen, new leads in the CRM. Done when: the two numbers are equal in every row. If a row differs, give it to Claude with the prompt under "Common problems".
3. Every button, named (~10 min). Click each call-to-action on your page in preview and note the button text, cta_id and cta_location pushed. Done when: every button is in the table and no two rows carry the same pair. If two do, ask Claude to change those values only, then retest.

Save your work

git add -A
git commit -m "Lesson 6.4: plan events through the data layer to GA4"
git tag lesson-6.4
git push
git push --tags