Tracking embedded and dynamically loaded YouTube videos via Google Tag Manager

Tracking YouTube videos in Google Analytics via Google Tag Manager is not a trivial thing. Previously, I have been using the method proposed by CardinalPath and it works pretty well for most people. However, I needed a bit more flexibility; e.g. I need to track not only embedded videos but also videos loaded dynamically. This could be videos loaded in a lightbox popup. In my case, videos loaded via the Magnific Popup script.

When looking for a solution I stumbled upon Simo Ahava’s blog. In his post on the tracking YouTube videos, he shows how to extend a solution proposed by LunaMetrics to be able to track pop up and dynamically loaded videos in general.

You can either follow Simo’s post or take a look at the description here:

Step 1: Create a custom HTML Tag with tracking script in Google Tag Manager

In Google Tag Manger create a Custom HTML Tag with the name ‘Utility – Video Tracking’ and past the following code:

Set the script to fire on All Pages. Alternatively, you can make a trigger that only fires when there is a video on the page. The tag should look like this:

youtube tracking in google tag manager-script

To get the details on what this script does, pay a visit to Simo’s post. The most important thing it does is that it exposes a variable named ytTracker to the global namespace. From this variable, we will be able to call the functions ‘init’ and ‘digestPotentialVideos’ in the script at will. In short, this means that if we call ytTracker.init() at any point in time it will run the script again. This is, of course, exactly what we want for dynamically loaded videos.

Step 2: Create Data Layer variables to catch URL of video and user action on video

Create the following two Data Layer variables:

1. Name: DataLayer – attributes.videoAction

  • Type: Data Layer
  • Data Layer Variable Name: attributes.videoAction

This will catch the action the user has taken, e.g, Play or Pause. Furthermore, it will catch non-user interactions like Watch To End, 10 % watched, 90 % watched, etc. The variable should look like this:

youtube-tracking-in-google-tag-manager-video-action

2. Name: DataLayer – attributes.videoUrl

  • Type: Data Layer
  • Data Layer Variable Name: attributes.videoUrl

This will catch the URL of the video on YouTube. The variable should look like this:

youtube-tracking-in-google-tag-manager-video-url

Step 3: Create a Trigger that responds to video actions

Create a Custom Event trigger and set it to fire on Event Name youTubeTrack. This is the event dispatched by the script in step 1 above. Click the ‘Add filters’ button to reveal ‘Fire this trigger when an Event occurs and all of these conditions are true.’. in the first field select the Data Layer variable named ‘DataLayer – attributes.videoAction’ that we created in step 2. Select ‘matches RegEx (ignore case) in field two and enter ‘Play|Pause|Watch to EndPlay|10%|25%|50%|75%|90%’ in field three. This should make the trigger look like this:

youtube-tracking-in-google-tag-manager-trigger

Step 4: Create a Tag to send YouTube events to Google Analytics

As we now have the all the data and can catch it as events happen it is time to actually use it. So go ahead and create a tag with the following details:

  • Name: GA – Event – YouTube Video Interaction
  • Choose Google Analytics as product and Universal Analytics as Tag Type
  • Under Configure Tag insert your Google Analytics Tracking ID, Chose Event as Track Type and set Category to Video. Under Action and Label choose the variables DataLayer – attributes.videoAction and DataLayer – attributes.videoUrl we created in step 2. Finally, you might want to give the action a value.
  • In the Fire On step, choose More and select the trigger named Event – YouTube Video Interaction that we created in step 3.

The final tag should look somewhat like this.

google-tag-manager-youtube-tag

Step 5: Initiate videos

In this final step we need to initiate the videos. This will either be on page load for on page videos but could also be on specific events like e.g. a popup. In the case of Magnific Popup this can be done using one of the following

So on the case of popups with Magnific Popup the script could look like this (also using jQuery).

This will target all of the following tags and make sure interactions with the respective videos will be tracked in Google Analytics.

So to wrap up; this might seem like a lot of steps to track YouTube videos in Google Analytics with Google Tag Manager. However, it is pretty efficient and not that big a task.

15 responses to “Tracking embedded and dynamically loaded YouTube videos via Google Tag Manager

    1. Hi Nathan, You should be able to see it under Behaviour > Events > Overview if you have set it up correctly. If you have no data you might want to debug with Google Tag Assistant. You can find it in the Crome web store.

  1. Is there a way to gather the video title as well? The Simo Ahava fix only works with the LunaMetrics method, but the LunaMetrics method doesn’t append the video title into the event label.

    The Cardinal Path method, however, collects the video title for the event label, but doesn’t work with the Sim Ahava dynamic loading fix. 🙁

  2. I was able to track youtube videos that are only embedded and had difficulties applying to videos that are loaded dynamically so thanks for this code Søren, much appreciated.

  3. Hi,

    Thank you for this post. Once I’ve done all the steps, i don’t understand how to do with the 5th step? Can i do with in Google Tag Manager or do I have to do anything else on the website?

    Then what do I have to do in order to see the events appears in analytics? I’m a begginer, I hope you can help me.
    Thanks a lot.
    Mathilde

      1. I am having issues with Step 5 as well. I’m using YooTheme’s Widgetkit Lightbox. I tried putting the code on the page and in the script file. I keep getting an error that says, “ytTracker is not defined.” Any ideas?

      2. Hard to say. I would try to debug and see if this was available in the console by writing ytTracker when the page has loaded. It should return the ytTracker object. If it is not there you might want to look at your Tag Manager code and see if that is working. If it does return an object make sure that you don’t just call it on document ready. It probably has to be in a callback (as in step 5 in the example) as Tag Manager lazy loads it’s tags. I hope this guides you in the right direction.

  4. Hi there –

    This post was extremely helpful! Thank you so much for putting it together.

    I noticed though that the percentage tracking wasn’t coming through. You will want to update the Trigger Configuration for the ‘youTubeTrack’ trigger with the following value:

    Play|Pause|Watch to End|25%|50%|75%

    Works like a charm!

    Thanks again 🙂

    1. Hi,

      This is great. Thank you so much for posting. This is just what I was looking for. Is there a way to get the name of the video reported back to GTM?

      Thanks,
      Mike

    2. Correct. Actually, it needs to include 10% and 90% as well. I have updated it in the post so it now says the following:

      Play|Pause|Watch to End|10%|25%|50%|75%|90%

Leave a Reply

Your email address will not be published. Required fields are marked *