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. 

Please refer to this tutorial to do that now.

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. 

Let's get started with the first tag. 

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 to 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.

**How to embed a Youtube Video onto your site is beyond the scope of this article. A quick Google search will provide enough help on how you can embed a youtube video on your site.**

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 it's 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

Before we can create the tag in GTM we need to grab the action code snippet from Funnelytics

Place the icon onto the canvas > Click the pencil to open page settings > and customize the values as you wish. (This is not super critical at this stage but will help differentiate in the future).

Copy the code snippet from the page properties. 

It's time to create the tag in GTM. 

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

Remember that we need to remove part of the code snippet when we paste.
From: 

<script type="text/javascript">
window.onload = function() {
window.funnelytics.events.trigger('video', {
    video: 'main_video',
}, function() {
    // continue with process..
});
};
</script>

To:

<script type="text/javascript">

window.funnelytics.events.trigger('video', {
    video: 'main_video',
}, function() {
    // continue with process..
});

</script>

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. 

After submitting the changes, refreshing the website, and clicking play, the action increased by one in Funnelytics. 

Did this answer your question?