Track events. Analyze behavior.
Real-world interactions, real dataLayer pushes. Configure Google Tag Manager to capture these events and route them to GA4.
Forms
A simple contact form and a multi-step flow. Both simulate a backend round-trip and push the outcome to the dataLayer — watch the [DL] logs in the console.
How to capture form submissions in GTM
form_start form_field_interaction generate_leadgenerate_leadgenerate_lead. Add lead_source, form_id, value, currency as Event Parameters by mapping each one to a Data Layer Variable of the same name.Contact Form
Trainee Instructions: Click into the inputs below to trigger form_start and blur off them to catch form_field_interaction payloads. Submitting correctly pushes a generate_lead.
Multi-step form
Trainee Instructions: Proceed through the funnel. Each view fires form_step_view. Reaching the end yields a form_complete.
Features
Trainee Instructions: Scroll up and down. Each card below is tracked by an Intersection Observer. As soon as they enter your viewport, they push a section_view event to the data layer. Verify this in your console array.
fetch requests, intercept REST responses, and fire events on external APIs.YouTube Player API
GTM can automatically track YouTube. Enable the 'YouTube Video' trigger to catch video_start, video_progress, and video_complete.
How to capture YouTube events in GTM
video_start video_progress video_completeOutbound links
Trainee Instructions: Click the Outbound links below. They open in a new tab, so this page stays alive and the push always completes — no click interception needed. Read the href in the handler and push an outbound_click to GTM. For a same-tab outbound link you would have to delay navigation, or the beacon can be cut off mid-flight.
How to capture outbound clicks in GTM
outbound_clickHow to capture callback requests in GTM
callback_request api_successapi_success · Trigger Filter: request_path matches /api/callbackRequest a callback
Trainee Instructions: Entering a phone number here sends a real asynchronous POST to /api/callback. Open the Network tab to watch the request. Once 200 OK resolves, catch the api_success event — its api_status is read off the response, so if the request fails you get api_error instead.
This is a teaching rig, not a production build. If you need these events firing on your own stack, let's talk about it.