How to track Vimeo videos with Google Tag Manager & Google Analytics

If you want to track Vimeo videos using Google Tag Manager and Google Analytics, you’ll need some special tracking code to create a dataLayer event for Google Tag Manager. In this tutorial, I’ll show you the necessary custom code and guide you through the step-by-step process of tracking Vimeo videos. The best part is that the code works perfectly for Vimeo popup videos that load after your window has loaded. With this tracking code, you can monitor video start, video completion, and video progress (in percentages as you prefer). Let’s get started!

Vimeo Video Tracking GTM DataLayer Code

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
/**
* Author: Md Hasanuzzamna
* Linkedin: https://linkedin.com/in/md-h
* Youtube: https://youtube.com/@leomeasure
* Email: info@leomeasure.com
*/

(function() {
    var videoProgress = [10, 25, 50, 75];
    function handlePlayer(player) {
        var triggeredSteps = {};
        var video_title = '';
        var video_url = '';
        var isStarted = false;
        var upperRange = 2;

        player.getVideoTitle().then(function(title) {
            video_title = title;
        });

        player.getVideoUrl().then(function(url) {
            video_url = url;
        });

        player.on('play', function(data) {

            if (!isStarted) {
                if(data.duration < 30) {
                    upperRange = 6;
                }

                window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    event: 'Vimeo Video',
                    video_status: 'start',
                    video_current_time: 0,
                    video_duration: data.duration,
                    video_percent: 0,
                    video_provider: 'Vimeo',
                    video_title: video_title,
                    video_url: video_url
                })
                isStarted = true;
            }
        });

        player.on('ended', function(data) {
            window.dataLayer = window.dataLayer || [];
            dataLayer.push({
                event: 'Vimeo Video',
                video_status: 'complete',
                video_current_time: data.seconds,
                video_duration: data.duration,
                video_percent: 100,
                video_provider: 'Vimeo',
                video_title: video_title,
                video_url: video_url
            });
        });

        player.on('timeupdate', function(data) {
            var actualPercent = data.percent * 100;

            videoProgress.forEach(function(targetPercent) {
                if (
                    !triggeredSteps[targetPercent] &&
                    actualPercent >= targetPercent &&
                    actualPercent <= targetPercent + upperRange
                ) {
                    window.dataLayer = window.dataLayer || [];
                    dataLayer.push({
                        event: 'Vimeo Video',
                        video_status: 'progress',
                        video_current_time: data.seconds,
                        video_duration: data.duration,
                        video_percent: targetPercent,
                        video_provider: 'Vimeo',
                        video_title: video_title,
                        video_url: video_url
                    });
                    triggeredSteps[targetPercent] = true;
                }
            });
        });
    }

    function findVimeoPlayer(node) {
        if (node.tagName === 'IFRAME' && node.src.includes('player.vimeo.com/video')) {
            var player = new Vimeo.Player(node);
            handlePlayer(player);
        } else {
            var iframes = node.querySelectorAll('iframe');
            iframes.forEach(function(iframe) {
                if (iframe.src.includes('player.vimeo.com/video')) {
                    var player = new Vimeo.Player(iframe);
                    handlePlayer(player);
                }
            });
        }
    }

    var observer = new MutationObserver(function(mutationsList) {
        mutationsList.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(function(node) {
                    findVimeoPlayer(node);
                });
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });


    var existingPlayers = document.querySelectorAll('iframe[src^="https://player.vimeo.com/video"]');
    existingPlayers.forEach(function(playerNode) {
        handlePlayer(new Vimeo.Player(playerNode));
    });
})();
</script>

Create a tag first

Now, go to the preview mode

Play the video in preview mode

This code will track the progress of playing vimeo video

Now, we will send information to GA4

so, lets create a variable first

Next variable for video current time

Now for video duration

now for video percent

Now for video provider

for video title

For video url

Create trigger

Create Tag

Preview it again

Now check it on debug view

For getting the best performance you might avoid run the code on all pages of your website.You could run it only the pages that contains the video video.

for this you could select the exact page url like the following way

Now, Submit and publish it