In this section, we will share how to track YouTube video playback on the website. In fact, Google Tag Manager has a built-in Youtube Video Trigger. It is very easy to track using this trigger.
YouTube Video triggers will work both on and after page load, so long as at least one of these items is present when Tag Manager loads:
- An embedded YouTube video.
- The YouTube IFrame API <script>.
This is a requirement and must be met before it can be used.
Create a test page
Let’s first create a youtube play page on the blog: first go to https://www.youtube.com/watch?v=sxm45EgfJok and click share to copy the code on Embed:
Paste to the newly created Youtube Test page, the effect is as follows:
This page https://www.bbccss.com/youtube-test is the page we need to track. You can visit.
1、Turn on built-in variables
There are already many built-in variables in Youtube video triggers, which will be used later. Let’s enable them first. Click Workspace> Variables> Configure, check all the Video type:
Click Workspace> Triggers> New, Select YouTube Video and name it YouTube:
There are 4 types of Capture options:
- Start: Fires an event when the video begins to play.
- Complete: Fires when the video finishes.
- Pause, Seeking, and Buffering: If the video is paused, the scrub bar is moved, or if the video buffers, the trigger will fire.
- Progress: Fires at specified video progress points, configured by percentage or time threshold values:
- Percentages: This value indicates the percentage of the video that has been played. Enter percentages as a comma separated list of one or more integers. Example: 5, 20, 50, 80, which represents 5%, 20%, 50%, and 80% respectively.
- Time Thresholds: This value represents the number of seconds that the video has played. Enter time thresholds as a comma-delimited list of one or more integers. Example: 5, 15, 60, 120, which represents 5 seconds, 15 seconds, 60 seconds, and 120 seconds respectively.
- Enable this trigger on: Select the appropriate option, For best results Window Load (gtm.load) is the recommended option.
- Container Load (gtm.js) occurs as soon as possible when the page loads.
- Window Load (gtm.load) (default) occurs after all initial content on the page has loaded.
- DOM Ready (gtm.dom) occurs after DOM is ready to be parsed.
Here we track the basic operations of the video, such as Start, Complete, Pause, Seeking and Buffering, configured as follows:
Make the following settings on Tags:
See, events are all triggered:
You can go further to see what data can be passed in this event, click Variable, and down, these are the data passed by video tracking, and can be set to Event Action and Event Label to pass to Google Analytics:
Then to Google Analytics real-time reporting: