See What'S Actually In The DataLayer

You cannot pick the right event until you can see every event. Start by taking a complete inventory of what the page emits as you use it. There are three lenses, and you want all three because each shows something the others hide.

1. The raw array in the console

Open DevTools and type dataLayer. You get the literal sequence of pushes, in order, exactly as the page made them. This is the ground truth — no GTM interpretation in the way.

> dataLayer
(6) [Arguments, Arguments, …]
  0: {gtm.start: 1733500000000, event: "gtm.js"}
  1: {event: "gtm.dom"}
  2: {pageType: "pricing", loggedIn: false}
  3: {event: "gtm.load"}
  4: {event: "form_submit", formId: "demo-request", plan: "pro"}
  5: {event: "gtm.formSubmit", "gtm.element": <form#demo-request>, …}

Already you can see the texture of a real page: a value pushed on load (pageType, loggedIn) with no event attached, then two things that look like a form submit — a custom form_submit and the native gtm.formSubmit. Hold that thought; it is the next lesson.

2. GTM Preview's event stream

Tag Assistant's left rail lists every event in order as it happens. Click one and the Data Layer tab shows the merged state at that moment, while the Variables tab shows what each of your GTM variables resolved to right then. This is where you confirm that the variable you plan to use is actually populated on that specific event, not just somewhere on the page.

3. Interact and watch

The technique that ties it together: do the action once, slowly, and watch what appears. One click on the demo button, then read off every event that fired and what it carried. Most "why is this double-counting" mysteries are solved in the first ten seconds of actually watching the stream instead of guessing from the tag.