Scroll Tracking via Scroll Depth Trigger in Google Tag Manager

Step 1: Enable the Scrolling Data Layer Variables

In GTM > Your Workspace > Variables > Configure new “Built-In Variable” > Check the three boxes below:

These Data Layer variables are defined as:

• Scroll Depth Threshold: this is the depth of the user scroll (e.g. 25%, 50%, etc).
• Scroll Depth Units: this is the % or pixel setting of the scroll.
• Scroll Direction: this is either vertical or horizontal.

Step 2: Enable the Scroll Depth Trigger

In this step, you’ll enable the built in GTM scroll depth trigger that will help push the Google Analytics custom event data that you’ll configure in step 3 below.

In GTM > Your Workspace > Triggers > Add New Trigger > Select the “Scroll Depth” Trigger Type below:

This is where where the setup becomes subjective to your unique needs:

• Do you want to measure in percentage or pixels? (I use %)
• Based on your % or pixel selection, what thresholds do you want to set up as trigger points (e.g. the point in a user’s scroll on your site where you’d like this trigger to fire).
• Do you want vertical or horizontal scroll depth tracking? (majority of cases this will be vertical)
• What pages do you want this scroll depth trigger to fire on? (I fire on all*)

*In some cases you may want to limit this to content rich/blog pages only, however having this data on eCommerce home, category, or product pages can unlock potential insights like:

• Are paid search visitors engaging with my category pages and viewing a good amount of products before exiting?
• Are users of my product pages scrolling down to view my user generated content that I’m investing a lot of $ into?
• How does user engagement differ between mobile and desktop?

Here are my settings:

Step 3: Setup your Custom Event Tag

Now you have your variables enabled and trigger created so the final step is pushing this new data into Google Analytics!

In GTM > Your Workspace > Tags > Add New Tag > Select a new Universal Analytics tag where we’ll set up the following details:

• Track Type: Event
• Category: I’m using Engagement here to help group similar Event Actions across other tags
• Action: I’ve selected one of the new GTM Scrolling dataLayer variables {{  Scroll Depth Threshold  }} – which contains the numeric value of % values configured in step 2 above.
• Label: I’ve selected {{  Page URL  } which is another native variable in GTM that records the page URL that a user is triggering this tag.
• Non-Interaction Hit: I choose to set this to “True” which means these custom event triggers will not count towards my bounce rate measurement.

Step 4: Confirm this tag is working!

Configure your Preview mode within GTM, then visit your site, and begin scrolling :).

Video Tracking via YouTube Video Trigger In Google Tag Manager

The tracking method which is used to track/capture the various player states of an embedded video is
called ‘video tracking’.

A player state is a specific user interaction with a video.

Following are the example of various player states which can be captured for YouTube videos via GTM:

#1 Start – denotes video is playing.
#2 Pause – denotes video is paused.
#3 Seek – denotes scrub bar is moved to seek or reposition timing within a video.
#4 Buffering – denotes video buffering / downloading.
#5 Progress – denotes the progress of a specific video by percentage or time threshold. For example,
if 5% of the total video length has been played then the value of Progress can be 5%. Similarly, if 10
seconds of video has been played then the value of Progress can be 10 seconds.
#6 Complete – denotes a video finished playing.

Setting up Video Tracking via YouTube Video Trigger In Google Tag Manager

Follow the steps below:

Step-1: Login to your Google Tag Manager (GTM) account and then click on the ‘Folders’ tab:

Step-2: Click on the ‘New Folder’ button.

Step-3: Name your new folder ‘YouTube Video Tracking’ and then click on the ‘create’ button. We are going to use this folder to store all tags, triggers and variables related to YouTube Video tracking.

Step-4: Click on the ‘Variables’ tab:

Step-5: Click on the ‘Configure’ button:

Step-6: Scroll down and then select all the built-in variables related to videos:

1. Video Provider
2. Video Status
3. Video URL
4. Video Title
5. Video Duration
6. Video Current Time
7. Video Percent
8. Video Visible

Step-7: Click on the ‘New’ button under ‘User Defined Variables’ column:

Step-8: Create a new dataLayer variable with following configurations and then move the variable to
the folder named ‘YouTube Video Tracking’:

This dataLayer variable is used to pull the value of gtm.videoElapsedTime from the dataLayer.

The gtm.videoElapsedTime dataLayer variable reports on the time elapsed (in seconds) since the last
time a video was paused or buffered.

Later when we create a new universal analytics tag to send video tracking data to GTM, we are going
to call this dataLayer variable within the tag.

Step-9: Create a new lookup table variable (name it ‘Video Player State’) with following configurations and then move the variable to the folder named ‘YouTube Video Tracking’:

I have created this variable to rewrite the outputs of the ‘video status’ variable.

The ‘video status’ variable is a built-in GTM variable which returns the current video player state.

By re-writing the values of the current player state, I am making the video tracking report in Google Analytics more meaningful for the end users (like my clients) who might not understand what ‘progress’ means or what ‘start’ stands for etc.

Step-10: Click on the ‘Triggers’ tab:

Step-11: Click on the ‘New’ button to create a new trigger.

Step-12: Name your new trigger as ‘YouTube Video Trigger’ and then move the trigger to the folder
named ‘YouTube Video Tracking’ (by clicking on the folder icon next to the trigger name):

Step-13: Choose ‘YouTube Video’ as trigger type:

Your screen should now look like the one below:

Step-14: At this point, you need to decide your video tracking setup:

• Whether or not you want to measure ‘Pause’, ‘Seeking’, ‘Buffering’ and/or ‘Progress’ Player states.
• When the progress of videos should be measured?
• How the progress of videos should be measured? In terms of percentages or time thresholds?
• Whether or not you want to add JavaScript API support to all YouTube videos
• What pages the ‘YouTube Video’ trigger should fire.

You can either decide your own video tracking setup or you can use the one I use:

Here, I am measuring all available player states of a YouTube Video.

The progress of my videos should be measured whenever a user passes the following percentage thresholds: 10,25,50,75,90

Add JavaScript API support to all YouTube videos.

The YouTube Video Trigger will fire on all pages of my website.

Step-15: Click on the ‘Save’ button to complete the creation of the new trigger.

Step-16: Click on the ‘Tags’ tab:

Step-17: Click on the ‘New’ button to create a new tag.

Step-18: Name the new tag ‘Send YouTube Video Tracking data to GA’ and then move it to the folder named ‘YouTube Video Tracking’.

Step-19: Set up the new tag with following configuration:

We are going to use this tag to send the video tracking data to Google Analytics.

Step-20: Set the firing trigger of the ‘Send YouTube Video Tracking data to GA’ tag to the ‘YouTube
Video Trigger’ we created earlier:

Step-21: Click on the ‘Save’ button to complete the tag set up.

Step-22: Click on the ‘Preview’ button (on the top right hand side) to preview and test your new video tracking setup:

Step-23: Navigate to the web page on your website where you want to test your new video tracking
setup and which has got a YouTube video embedded on the page.

You should see a ‘preview’ window at the bottom of your browser window:

Step-24: Now play, pause and/or seek the embedded YouTube video.

As you interact with the video player, you should see the new ‘gtm.video’ event(s) being listed….one
after the other under the ‘Summary’ column:

Step-25: Click on one of the ‘gtm.video’ events and then click on the ‘Data Layer’ tab:

Step-26: Now look at the values of following data layer variables:

Here,

• ‘gtm.video‘ is the name of the event that activates the YouTube Video trigger.
• ‘gtm.videoProvider‘ variable returns the name of the video platform whose videos you are tracking. Its value is ‘youtube’.
• ‘gtm.videoStatus‘ variable returns the current player state of a video. Its values can be: start, complete, pause, seek, buffering and progress.
• ‘gtm.videoUrl‘ variable returns the URL of the embedded video.
• ‘gtm.videoTitle‘ variable returns the the title of the embedded video.
• ‘gtm.videoDuration‘ variable returns the total length of the embedded video in seconds.
• ‘gtm.videoCurrentTime‘ variable returns the time (in seconds) where a user was when the last video event fired.
• ‘gtm.videoElapsedTime‘ variable returns the time elapsed (in seconds) since the last time the video was paused or buffering.
• ‘gtm.videoPercent‘ variable returns the percentage of the total video length where a user was when the last video event fired.
• ‘gtm.videoVisible‘ variable returns either true or false, depending on whether or not the embedded video was visible in the viewport when the last video event fired.

If you see the values of the data layer variables then it means, YouTube video tracking is working correctly.

Step-27: Navigate back to your GTM account and then click on the ‘Leave Preview mode’ button:

Step-28: Click on the ‘submit’ button (on the top right hand side):

Step-29: Enter your version name and then click on the ‘Publish’ button.

Step-30: Navigate back to the web page on your website which has got a YouTube video embedded on the page. Now play, pause and/or seek the embedded YouTube video.

Step-31: Wait for 10-15 minutes and then navigate to ‘Behavior’ > ‘Events’ > ‘Top Events’ report in your Google Analytics view:

Step-32: Find and click on ‘YouTube Videos Tracking’ event category:

In this event category you can find all of your video tracking data: