Real-world interactions, real dataLayer pushes. Configure Google Tag Manager to capture these events and route them to GA4.
A simple contact form and a multi-step flow. Both fire real POST requests to the backend — watch for [FETCH] logs in the console.
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.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.
Trainee Instructions: Proceed through the funnel. Each view fires form_step_view. Reaching the end yields a form_complete.
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.GTM can automatically track YouTube. Enable the 'YouTube Video' trigger to catch video_start, video_progress, and video_complete.
video_start video_progress video_completeTrainee Instructions: Click the Outbound links below. We've hijacked the native behavior so it doesn't open instantly, allowing you to intercept the click, read its href, and push an outbound_click to GTM.
outbound_clickcallback_request api_successapi_success · Trigger Filter: request_path matches /api/callbackTrainee Instructions: Entering a phone number here mocks an asynchronous POST request to the backend. Open the Network tab to watch the fetch request. Once 200 OK resolves, catch the api_success event.