Lesson 15 of 17

HTML5 Video

① Connect your GTM container

Paste your container ID to load it into this page. It only ever runs here.

Advanced: use a specific environment

GTM ships a YouTube trigger, but a native HTML5 <video> element has none. So if you self-host video, GTM cannot see whether anyone pressed play, watched halfway, or finished. Engagement, your single best signal for whether the content worked, goes completely unmeasured.

The bridge is a small listener on the element's native play, timeupdate and ended events, pushing GA4's three video events: video_start, video_progress (at milestones) and video_complete. You catch each with its own Custom Event trigger.

Goal

Fire a tag on all three video events, video_start, video_progress and video_complete.

Build it in GTM

Know what the page pushes
A listener on the <video> element pushes video_start on play, video_progress with a video_percent at each milestone (10, 25, 50, 75, 90), and video_complete when it ends. On a real site your developer adds this listener.
Create a Custom Event trigger for each
Go to Triggers → New → Custom Event three times, one trigger per event name: video_start, video_progress and video_complete, matching each pushed string exactly.
Capture the percent
Add a Data Layer Variable named video_percent so your progress tag can record how far viewers got.
Fire a tag on them
Add all three triggers to your tag's firing triggers. On a real site this is a GA4 Event tag using GA4's video event names; here a Custom HTML tag named Custom HTML - Test containing <script></script> works the same way.

Debug in Tag Assistant

Copy this lesson's live URL and paste it into GTM Preview, that is the page Tag Assistant connects to. It has the clickable elements, so this page stays clean for reading.

In your GTM, click Preview.
Paste the live URL above and click Connect.
Interact with the live page and watch your tag fire in Tag Assistant.

What you should expect to see

Press play, let it run, then finish it (or use the simulate buttons). In Tag Assistant video_start, then video_progress events, then video_complete appear in order, and your tag shows under Tags Fired for each.

Verify your container

Built it? Export your container, Admin → Export Container, choose your workspace, then drop the JSON here to check it against this lesson.

Drop your container .json here

or browse · checked in your browser, nothing is uploaded

0 of 17 lessons complete