Track Clicks to YouTube Video Links in Google Analytics 4

When you post direct links to your YouTube videos on third-party platforms, tracking these links is extremely limited and not available in YouTube analytics. We explore a method to track your links within your Google Analytics 4 account, offering you better control and insights.

Imagine you uploaded a video to YouTube and shared the link on your social channels. Views start coming in, but how do you know which links are driving the most traffic? While you can use link shorteners to track this data, wouldn’t it be more convenient to have this information included in your GA4 account, just like your website data?

Understanding the sources contributing to your YouTube views remains a challenge. We don’t have control over customizing YouTube analytics, but we do have control over our links. If you post a direct link to a YouTube video, like https://youtube.com, how would you know if it was clicked? Besides using URL shortener services, you can use the method described here to track this in your GA4 account.

The solution is simple: use a reusable intermediate page hosted on your website, fully under your control. When you post a link, you do not post a direct link to your video. Instead you post the link to your intermediate page with some query parameters appended to the URL. When a user clicks on your link, they first arrive at this intermediate page. The page processes the request based on the query parameters, sends data to GA4 (e.g. which video was requested and where the click originated from), and finally redirects user to the video.

In essence, the links you post won’t be direct YouTube or Vimeo links on the surface; they’ll be your website links. However, for the user, it won’t make any difference because they will still land directly on your video.

This method is cleaner and keeps everything under your control without relying on third-party services.

The intermediate page is reusable and needs to be set up only once. It will work for all your videos, and you can use UTM tags just like any other link. In fact, you can add extra query parameters to your URL to send as much information as you need to determine the success of your link postings.

Methodology

To implement this tracking (or any other tracking), start with planning what you want to measure. Consider how your GA4 reports will look once you start collecting the data, what on-site changes need to be made, who needs to do what, and only then begin implementation.

Planning

Planning is an important step and covers the following:

  • What do you want to Measure?
  • Decide how you want to see this data in GA4.
  • Build a Mock-up report and map data-points
  • The Intermediate Page
  • Google Tag Manager set up
  • Creating Links to Post – the new way

What do you want to Measure?

Let’s discuss what information is essential to us. Because you are setting it up for the first time, we’ll suggest using as few data points as possible. You can always expand on the implementation in the future.

To keep things simple, there are 3 data points that you would want to track.

  1. Source information (where the user is coming from)
  2. Which video URL was clicked?
  3. What’s the video title of the clicked URL?

As an example, we’ll use 3 of our YouTube videos and put the information I need a Google spreadsheet just to be clear of our goals.

Decide how you want to see this data in GA4. 

This is a crucial step – always work backwards when creating your tracking plan i.e. visualize or even draw a mockup report about how you would like the data to come through.  

We realize that we have 2 options here: 

  1. Tracking clicks as virtual Page Views with UTM Parameters, A common way to pass attribution data just like we do for other promotions, OR 
  2. Tracking clicks as Events with Event Parameters. Another perfectly sane way to pass track user behavior. Attribution is collected not through UTM values but as event parameters.

Let’s discuss the pros and cons of each:

  1. Passing data with UTM parameters: If you use UTM parameters, the data will be sent to the traffic source dimensions: session manual source, session manual medium, session manual campaign etc. We’ll draw a mock up report for this in the next section to not keep this to imagination.

What are the advantages of using this method?

      1. Your traffic source information is all collected under the same dimensions whether for visits to your website or visits to YouTube.
      2. You can send virtual pageviews with Video Title and Video URLs

What are the Disadvantages?

        1. Normally, source dimensions are meant for website visits and not direct visits to your YouTube videos. Doing this will mix data of your website visits and your video channels. To check attribution reports for your website, you’ll have to remember to filter out the traffic source data generated from the clicks.
        2. To use UTM parameters, we have a minimum mandatory requirement of 2 parameters (source and medium). This makes our URL longer.
  1. Passing data as event parameters: If we pass this information as event and source information as “event parameters”, the data can be stored in event parameters that you can name as you will.

What are the advantages?

      1. Name the event to your liking. Website data is kept separate from the clicks data.
      2. No “minimum requirement” on parameters. Keeps your URL shorter

What are the disadvantages?

      1. You do not have the traffic sources under a single dimension. Aggregate attribution reports will have to be separately built – for website data and for click to videos data.
      2. Pageviews to the intermediate page get counted, thereby increasing your overall pageview counts.

Some notes

  1. Our suggestion is to use the second option because keeping website data separate from this external data is a big advantage.
  2. Be wary of using the known parameters and dimensions as this may overwrite your data.

We offer both solutions in the sections below. You can choose whatever suits you the best. There is only a slight change in Google Tag Manager set up – the rest of the process remains similar to both solution.

However, before deciding, we suggest to draw some mock-up reports to not leave anything to imagination.

Build a Mock-up report and map data-points

We’ll first do a mock-up report and then map the data points to dimensions which will help us set up our GTM tags accordingly.

Mockup report for Tracking with UTM parameters:

Continuing the example of our 3 videos and assuming we intend to post their direct links to Instagram and Linkedin,

Secondly, we are mostly interested in 3 parameters – the source, video URL and video Title to keep things simple.

Here is what we imagine the final report to look like.

With UTM tracking method, we’ll have to mandatorily include medium as well. But of course, you can add other parameters too. If you do plan on adding other parameters, use the example below and map them accordingly. 

  • Source goes to session manual source
  • Medium goes to session manual medium
  • Video URL should go to Page URL
  • Video Title should go to Page Title

Mockup report for Tracking as Event with Event parameters:

We’ll continue to use the same example and same goals.

Here is what we imagine the final report to look like.

    • Source goes to event parameter 1
    • Video URL should go to event parameter 2
    • Video Title should go to event parameter 3
    • We also assign an event name to these clicks. In our example, we are going with the event name video_url_clicks but you can use a name according to your liking.

And you can pass as many other parameters as you want to capture other details not covered here.

At this point an important question arises.

We know that the clicks will go to an intermediate page that has our Google Tag Manager container and as the page loads in a user browser, we send the click information to GA4. However, what is not clear so far is where exactly in this process are we passing specific Video Title and Video URLs.

This is something we’ll look at in Google Tag Manager set up and the formation of URLs. We’ll introduce a new query parameter called Video ID into the URL. This parameter will be used by our Google Tag Manager set up to pull the video Title and URL from a list and pass it in our event tags!

More on this in the later sections.

The Intermediate Page

An intermediate page is the key to tracking because this is where our Google Tag Manager will fire tracking tags. So, when you post your links to your video – you do not post direct URLs, instead post links to this intermediate page. The page processes the links and the query parameters we pass to this page shall be used by Google Tag Manager to redirect users to the appropriate videos.

We do this by creating a simple page on your website with just one message E.g. “You are being directed to the video”. That way, if a user has to wait on slow connections (or javascript taking too long) they do not run away and have a message to reassure them that things are in process.

Google Tag Manager set up

Create a custom HTML tag in Google Tag Manager that’ll take the parameter values from the clicked url and send them to GA4 in your desired way. More on this in the implementation section.

Creating Links to Post – the new way

We already discussed in the intro section and under the intermediate page section, that this whole process revolves around passing query parameters as a way to track link clicks and their attribution. Now, we’re ready to map the data-points we decided to collect with the query parameters we should be using in our links.

First of all, lets decide on the intermediate page URL which we shall be using for this.

For us, we decided to use http://trackfunnels.com/utm-links-builder/demos/go-to-video/

This is a bit long but most likely for your website, you’ll create a short link. Name it anything you like.

The query parameters

The query parameters in your link will differ based on the method you decided to use

Query Parameters for Tracking with UTM parameters

Based on our goal, we would need the following query parameters

  • For source: utm_source
  • For medium: utm_medium
  • An ID parameter to capture video URL and video Title: video_id

The concept of ID parameter is already discussed above. It is with this ID parameter that we are able to redirect a user to the video they clicked on / intended to watch.

The URL may then look something like:
http://trackfunnels.com/utm-links-builder/demos/go-to-video/?utm_source={{ source platform }}&utm_medium={{ social }}&video_id={{ a video ID }}

The red parts in the URL will be replaced by actual values when the link is ready to be posted.

Query Parameters for Tracking as Events

  • For source: vid_source
  • An ID parameter to capture video URL and video Title: video_id

The URL here would look like
http://trackfunnels.com/utm-links-builder/demos/go-to-video/?vid_source={{ source platform }}&video_id={{ a video ID }}

Again, how you want to name your query keys is entirely upto you. You’ll have to make similar decisions when it comes to naming event parameters and event names in Google Tag Manager set up.

So far, we have only sketched out

what we want to achieve, and

how we’ll achieve that.

It’s time to implement.

Implementation

The implementation process needs 2 things majorly – creation of the intermediate page and Google Tag Manager set up.

Creating an intermediate page is a one-time set up. Almost 90% of the GTM is also one time set up. Only 10% has to be updated every time you upload new video.

Then, we also have to discuss a bit about creating links you will post in the right way. To summarise:

  • Create an intermediate page
  • Set up Google Tag Manager
  • Understand how to post new links

Let’s look at each step one at a time.

Creating an intermediate page

We’ll create a simple page. In this example, we created the following intermediate page

http://trackfunnels.com/utm-links-builder/demos/go-to-video/

The page is slightly dynamic. We know that the video_id query parameter is the most important one for us since it carries the video a user should be redirected to. So our intermediate page needs to look for that parameter in the URL and process the request accordingly. We do that with a little Javascript that we place in the page.

If a video_id query param is found, it displays the following message:

“Hang on while we take you to the video :)”

If not found, we display another message:

“Uh oh! We could not understand that request. Go to our YouTube channel directly”
Button to YouTube >

This ensure that if someone somehow stumbles upon this page (not through the click) they go to your YouTube channel anyway. However, it’s your playground and you can play with this message in anyway you like.

Try clicking on this link – http://trackfunnels.com/utm-links-builder/demos/go-to-video/

and now try to click on this link – http://trackfunnels.com/utm-links-builder/demos/go-to-video/?video_id=3

Some notes

  1. Normally, your web developer will set this page up for you depending on what CMS you are using, but if you are able to create pages on your own and add code to it, here is an extra bonus step on how to set this up.
  2. The actual redirect happens with Google Tag Manager. So do not worry about it just yet.

How to set up the intermediate page

Or Skip this section if your developer will do it for you

    1. Duplicate any page you have.
    2. Remove all content.
    3. Add a new section in the middle of the page give this section a CSS class of center-message and an ID of message-container .
    4. Add the following Javascript to the footer:
 <script>

 function getQueryParameter(name) {

 const urlParams = new URLSearchParams(window.location.search);

 return urlParams.get(name);

 }

 document.addEventListener("DOMContentLoaded", function() {

 const videoId = getQueryParameter('video_id');

 const messageContainer = document.getElementById('message-container');

 if (videoId) {

 messageContainer.innerHTML = `

 <div>

 <p class="mt-3" style="font-weight:200;font-size:1.75rem;color:#6d59ff">Hang on while we take you to the video :)</p>

 </div>

 `;

 } else {

 messageContainer.innerHTML = `

 <div>

 <p style="font-weight:200;font-size:1.75rem;color:#6d59ff">Uh oh! We could not understand that request. <br>Go to our YouTube channel directly.</p>

 <a href="https://www.youtube.com/@trackfunnels/videos" class="btn btn-primary">Go to YouTube Channel</a>

 </div>

 `;

 }

 });

 </script>

5. Add the following CSS to the page

 <style>

 .center-message {

 display: flex;

 justify-content: center;

 align-items: center;

 height: 70vh;

 text-align: center;

 flex-direction: column;

 }

 .spinner-border {

 width: 3rem;

 height: 3rem;

 border-width: 0.4rem;

 }

 </style>

That’s it, that’s your page. Publish and test by adding the video_id query parameter and without it to see both messages are working.

Google Tag Manager Set Up

Here comes the fun part

Create Variables:

We will create 3 variables:
video_tracking_url_id
video_click_tracking_url
video_click_tracking_title

Here is the purpose of each

video_tracking_url_id: Gets the ID we pass into our URL
video_click_tracking_url: uses the ID from the previous variable to assign the Video URL
video_click_tracking_title: uses the ID from the previous variable to assign the Video Title

Creating video_tracking_url_id

video_click_tracking_title and video_click_tracking_url are Lookup Variables that store our video URLs and Titles.

Note that this can also be done via Javascript in a single variable but to keep it simple, we utilize Lookup variables.

Click New and choose the Lookup Variable.
Under “Input Variable”, choose video_tracking_url_id

In the Lookup Table, add the IDs under input (start with any number) and add the Video Title and URL next to it.

Note that a video URL and Title that belong together should be placed under the same ID.

Take a look below. we simply added 3 videos with IDs 1, 2 and 3 and the titles next to them.

We’ll now create another variable for the Video URL and add the same IDs but just replace the titles with the corresponding video URLs. Note the URLs here will be used to redirect users to the right video. So be careful of the IDs you add here and the IDs that you pass in the promotional link.

How I do this is by copying the previous variable and overwriting so I am 100% confident that I am overwriting the right URLs over the right titles.

Here we go:

As a failsafe, I assign the default value to my YouTube channel. So in case it fails to grab the URL for any reason, my user is not stranded.

We’ll now do a test preview by adding one of the IDs used in the GTM variables.

Let’s use video_id=1

My URL will be
http://trackfunnels.com/utm-links-builder/demos/go-to-video/?video_id=1

Notice – how all 3 variables have populated correctly.

We’ll now set up 2 types of tags

  1. The Redirecting Tag: This is a custom HTML tag that makes sure that users are redirecting to the correct video when they click on the link
  2. The Tracking Tag: This is a GA4 tag that will send data to your GA4 account depending on what method you use.
    1. A Google tag (if you are using UTM Tracking)
    2. An event tag (if you are using Event tracking)

1. The Redirecting tag:

Tag type: Custom HTML

Add new tag > choose custom html > paste the following script
Here is the script (with explanation) to use in this tag

<script>

// Retrieve the value of the GTM variable
var videoUrl = {{video_click_tracking_url}};

// Check if the videoUrl has a value
if (videoUrl) {
// If videoUrl has a value, set a 3-second delay before redirecting
setTimeout(function() {
window.location.href = videoUrl;
}, 3000);
} else {
// If videoUrl does not have a value, redirect to the default YouTube channel URL
setTimeout(function() {
window.location.href = 'https://www.youtube.com/@trackfunnels/videos';
}, 3000);
}
</script>

Note:
Change the variable name in the script, if you are using your own naming.
Also note that we are using a delay of 3 seconds to redirect the user to make sure that the container loads before sending users to the next page. Make this page faster by removing all unnecessary code from the page, that way the container can load faster and you can reduce the delay time further.

Trigger for this tag:
We do not need a trigger. Instead we’ll fire this tag with Tag sequencing (shown in the next step)

Why tag sequencing? Because this ensures that the variables we need are now available and the pageview or event is already sent to GA4 before redirecting users to the video page.

2. The Tracking Tag

As mentioned above, the tag you use here will depend on the method you want to deploy. For Pageview with UTM tracking, this will be a Google Tag. For tracking as events, this will be a GA4 Event tag.

Google Tag (if you are using UTM tracking)

We create a new Google Tag just like your main tag. Only here we add configuration parameters to overwrite the page URL and Title with your video variables as shown below:

Trigger:
We create the exact same trigger you use in your Main Google Tag to ensure the main tag does not fire when this is fired. We also add a condition to fire this only on the intermediate page.

Change to your main Google Tag needed:
There is another step involved. We need to also add an exception to your Main Google Tag. The trigger you just created should be added to your Main Google Tag.

Now, let’s test this by going to our URL with utm_source and utm_medium appended
http://trackfunnels.com/utm-links-builder/demos/go-to-video/?video_id=1&utm_source=linkedin&utm_medium=social

We have successfully added the video information as well as redirected the user to the appropriate video.

See how this information can be seen populated in GA4 debug view.

Event Tag (if you are using Event tracking)
Instead of the Google Tag, we’ll add the GA4 Event tag.

We’ll first create another variable to capture the source since we are not using utm_source parameter in the URL.

We’ll call this variable video_click_tracking_source. This variable will fetch the source from the query parameter called vid_source.

Note:
Here we have used long query names to make it clear what we are using them for. To keep your URL short, you could also use smaller query parameters like “vsrc”

We go ahead and add the event tag now as shown below

Trigger:

We’ll use the pageview trigger and add the condition for only intermediate pages. This is only for demo purposes. In real case scenarios you’ll make sure you are using the right trigger based on consent.

What’s next?

When you add new videos to promote, here are the steps you should take:

  1. Add new rows to the Google Tag Manager variables with an ID, Title and URL
  2. Create your links with your intermediate page and add the right ID to your URL with the right query parameters.

Now when users click on your links, you will have the performance of these links directly in your GA4 account.

Leave a comment if you face trouble and we’ll help you out.

0 Comments

    Leave a Reply