Tracking Youtube Interactions from an Iframe

Any digital marketer worth their salt knows how important tracking is. Whether you’re looking at page views, button clicks, or conversions, having insight into how your visitors interact with your site is the keystone to any successful web presence. This includes how users interact with videos embedded on the site from Youtube. However, implementing these videos is commonly done through an iframe, which cannot be tracked by simply implementing click tracking on the iframe; the video itself is hosted on Youtube’s domain and they will (for good reason) not let you install GTM on their own site. Luckily, they have developed an API that allows you to not only track video plays on your site, but establish different milestones for video engagement. Here, we’ll look at how you can set up video tracking on your site as well as a few ways to use the data once it starts coming through to Google Analytics.

1. Insert your Youtube video onto your site via an iframe
It may seem like a no-brainer, but in order to track your videos they need to be first implemented on the site. This is simply done with the iframe code. A sample is shown below that will be referenced throughout this post:

<iframe src="https://www.youtube.com/embed/YoutubeVideoID" width="300" height="150"></iframe>

This structure is pretty straightforward, and simply references the video location on Youtube. The above sample includes a standard width and height, but can be customized. The snippet can also have classes and IDs applied, ideal for responsive formatting.

2. Modify the iframe code
Once the code is installed, a few modifications will get it ready for tracking. Two pieces will be added to this iframe snippet. The first is to enable the Youtube API, done by adding the following parameter (?enablejsapi=1) to the iframe:

<iframe src="https://www.youtube.com/embed/YoutubeVideoID?enablejsapi=1" width="300" height="150"></iframe>

The second part is to help verify the domain the video is running on via the following parameter (origin=http://YourDomain.com), added below:

<iframe src="https://www.youtube.com/embed/YoutubeVideoID?enablejsapi=1& origin=http://YourDomain.com" width="300" height="150"></iframe>

Don’t forget the “&” to string these parameters together. Once these additions are in place, you’ll be all set on the site’s backend.

3. Implement the Youtube API through GTM
We’ll use Google Tag Manager to implement a Youtube listener. If you haven’t already setup GTM on your site, I’d highly recommend doing so using the relevant post for Getting Started with GTM. Google Tag Manager makes it easy to added tracking and custom scripts to your site without needing to dig into the website backend or apply multiple codes globally. Luckily, our friends over at Cardinal Path have done a great job of building a listener that can easily be plugged into GTM. The code on their site will be inserted into a custom HTML tag. Once the tag is setup, simply set the trigger based off of a DOM load and to fire on any page with your Youtube videos.
4. Adding Event Actions and Labels
For this step, we’ll be setting up two user defined variables to push through the data layer. We’ll use both “action” and “label” to give us insight into how users interact with the videos and what videos they interact with respectively.

Begin by selecting “Variables” then adding a new “User-Defined Variable”. From here, create a new “Data Layer Variable” located under “Page Variables”.

Once on the configuration page, simply name the data layer variables “action” and “label”. Be sure to select Data Layer Version 2. There will be a variable created for each one.

5. Push “action” and “label” to Google Analytics
Now that the data layer variables are created, they need to be pushed to Google Analytics. This will be done with a Universal Analytics event tag configured thusly:

Please note that “UA-00000000-0” will be the GA account ID you wish to use, or can be selected if you’ve created a constant variable for it. Under “Category” our sample uses “Video” to keep things clean, but it could be whatever you wish. To fire this tag, create a new custom event trigger configured like so:

6. Verify Tracking
Now that the API is firing on the page and we’ve set what events we want pushed through the data layer, we can verify these events in Google Analytics. In the GA interface, we can utilize the Real-Time Reporting section to see events fire as they happen. Clicking on the tagged video should result in a few new events popping up in GA. Make sure to use your “All Website Data” view to ensure your interactions show up, in case you’ve filtered out your IP in another view.

Now you’ve verified that event tracking is working, let’s take a look at some of the insight you can gain from this. Below is a list of what we can see in GA:

Event Action Interaction
play Click to begin playing / resume playing the video
pause Click to pause the video
0% Video begins playing
25% Video is watched to 25% completion
50% Video is watched to 50% completion
75% Video is watched to 75% completion
100% Video is watched in its entirety
How you look at these actions will of course depend on your goals. Two major opportunities with this fall on the 0% and 100% actions. Creating goals for these can let you easily see if users are starting to watch videos, what percentage go through to watch a video in its entirety, and how those users may go on to convert via a contact form, email, or other major conversion point you’ve set up.

With this tracking now in place, the door is open for a wide variety of ways to use the data. How well is a video performing on page? Are users even watching this or does it lead to an increase in conversions? Taking this data beyond more than tracking, you can begin testing new video ideas with confidence. What point along your conversion funnel will a video be most effective for pushing a conversion? If you have two videos, try swapping them out and seeing how each performs in converting a user. Use your behavior funnels to see where users who watch videos go next. What about those who may start the video, but only watch 25% of it? Are they leaving to navigate to another page or are the bouncing from the site completely? Maybe it’s time to swap the video or edit it to make it more compelling. However you use this data, good luck and happy tracking!

Leave a Reply

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