Track YouTube Videos in Your Funnel Using GTM

How to track if someone starts, or completes watching an embedded Youtube video in your funnel

Before you can use the watch video action feature, you need to make sure that the base Funnelytics script is properly installed in your funnel.

Currently, we can only track Youtube videos that are embedded on our site using Google Tag Manager.

To do this, we are going to create 2 new tags. 

1. One that calls the Youtube library (It's like opening the portal that connects your site to Youtube).
2. The other one will fire the Funnelytics action event. 

YouTube Library Tag

All we are going to do is create a custom HTML tag that fires this simple code snippet:

<script src="https://www.youtube.com/iframe_api">

Under advanced settings > Tag Firing Options set this to fire Once per page

The trigger will be all pages. The tag should look like this when complete:

Watch YouTube video tag

Enable Variables

Under the variables tab, we need to make sure that all the video variables are enabled. 

To do this, go to the Variables tab > hit configure > under the video section > enable all video variables.

Create a watch video listener (trigger)

Under triggers, we are going to create a listener that will give us information about when a Youtube video is played in our funnel. It will then give us information that matches the variables we just enabled. 

To create the trigger go to Triggers > New > Give it a name: Watch Youtube Video > Click Tag Configuration > Choose Youtube Video > Select whether you want to track the beginning or end of the video > Enable Add JavaScript API support to all YouTube videos > Hit Save.

Testing the Watch YouTube Video Trigger

Enable preview mode > go to your site > and refresh the page.

Now, when you click play on the youtube video, you will see a new event under the summary box on the left called gtm.video

If we go to the Variables tab and scroll down to the video variables, we'll be able to see information specific to this video that we can use to fire the tag with. 

In this case, we're going to use the Video URL and its corresponding value to target our tag. Copy the Video URL to your clipboard.

Now that we know which video we are targeting, we can change the trigger from All Videos to Some Videos > Video URL > contains or equals > Your URL

Create the Watch YouTube Video Tag

Copy the following code snippet 

<script type="text/javascript">
window.funnelytics.events.trigger('video', {
    videoTitle: 'your_video_title',
});
</script>

Go to Tags > New > Give it a name: FL-Action-Watch Main Video > Choose Custom HTML > Paste the code in the HTML field.

Remove the section bit of code that reads, 'your_video_title' and replace it with a title that will provide context for your particular video, some like, 'myAwesomeVideo'

The trigger will be our new trigger that we just made. 

Test our new tag in GTM and Funnelytics

Refresh the preview mode and refresh the page on the website. This time when the play button is clicked we should see that our new tag was fired. After clicking play on the video we can see that the new tag did fire correctly. 

Now, it's time to submit our changes in GTM and test it again and make sure that it fires correctly in Funnelytics. 

Something missing?

If something is missing in the documentation or if you found some part confusing, please reach out to our support team, with your suggestions for improvement.

We love hearing from you!