Suivre les vidéos Vimeo avec Google Tag Manager et GA4

Mis à jour : mardi 2 septembre 2025

Pourquoi suivre les interactions avec les vidéos Vimeo ?

Suivre les interactions avec les vidéos Vimeo vous permet de comprendre l’engagement de vos visiteurs et ainsi d’aller au-delà des simples pages vues, clics ou scroll dans vos analyses.

Ces interactions peuvent notamment vous aider à déterminer si les visiteurs qui regardent vos vidéos convertissent mieux que les autres visiteurs.

Ajouter le listener dans GTM

Suivre les vidéos Vimeo est un peu plus complexe que pour les vidéos YouTube car il n’y a pas de déclencheur natif présent dans Google Tag Manager. Vous allez donc devoir utiliser le listener ci-dessous :

<script>
/*
* v0.1.0
* Created by Data Marketing School at http://www.data-marketing-school.com
* Written by https://www.linkedin.com/in/lucasrollin/
*/
var options = {
    event_name: "vimeo_video", // dataLayer event name
    autoload_player_sdk: true,
    datalayer_name: "dataLayer",
    logging: true, // logs messages to console
    vimeo_events: { // events listened to - see https://developer.vimeo.com/player/sdk/reference
        // Playback control events
        bufferend: false,
        bufferstart: false,
        ended: true,
        error: true,
        loaded: false,
        pause: true,
        play: true,
        playbackratechange: false,
        progress: true,
        seeked: true,
        timeupdate: false,
        volumechange: false,

        // Chapter events
        chapterchange: false,

        // Interactive video events
        interactivehotspotclicked: false,
        interactiveoverlaypanelclicked: false
    }
}

function dataLayerPush(status, data) {
    window[options.datalayer_name] = window[options.datalayer_name] || [];
    var dl_object = {
        event: options.event_name,
        video_provider: "vimeo"
    }

    if(typeof status != undefined) {
        dl_object.video_status = status;
    }
        if (typeof data !== 'undefined' && data != null) {
        if (typeof data.duration !== 'undefined') {
            dl_object.video_duration = Math.round(data.duration);
        }

        if (typeof data.seconds !== 'undefined') {
            dl_object.video_current_time = Math.round(data.seconds);
        }

        if (typeof data.percent !== 'undefined') {
            dl_object.video_percent = Math.round(data.percent * 100);
        }

        if (typeof data.volume !== 'undefined') {
            dl_object.video_volume = data.volume;
        }

        if (typeof data.muted !== 'undefined') {
            dl_object.video_muted = data.muted;
        }

        if (typeof data.playbackRate !== 'undefined') {
            dl_object.video_playback_rate = data.playbackRate;
        }

        if (typeof data.id !== 'undefined') {
            dl_object.video_id = data.id;
        }

        if (typeof data.time !== 'undefined') {
            dl_object.video_cue_time = data.time;
        }

        if (typeof data.title !== 'undefined') {
            dl_object.video_chapter_title = data.title;
        }

        if (typeof data.index !== 'undefined') {
            dl_object.video_chapter_index = data.index;
        }

        if (typeof data.startTime !== 'undefined') {
            dl_object.video_chapter_start = data.startTime;
        }

        if (typeof data.title !== 'undefined') {
            dl_object.video_chapter_title = data.title;
        }

        if (typeof data.message !== 'undefined') {
            dl_object.video_error_message = data.message;
        }

        if (typeof data.method !== 'undefined') {
            dl_object.video_error_method = data.method;
        }

        if (typeof data.name !== 'undefined') {
            dl_object.video_error_name = data.name;
        }

        if (typeof data.action !== 'undefined') {
            dl_object.video_action = data.action;
        }

        if (typeof data.actionPreference !== 'undefined') {
            dl_object.video_action_preference = data.actionPreference;
        }

        if (typeof data.customPayloadData !== 'undefined') {
            dl_object.video_custom_payload_data = data.customPayloadData;
        }

        if (typeof data.hotspotId !== 'undefined') {
            dl_object.hotspot_id = data.hotspotId;
        }

        if (typeof data.panelId !== 'undefined') {
            dl_object.panel_id = data.panelId;
        }

    }

    if (typeof video_url !== 'undefined') {
        dl_object.video_url = video_url;
    }

    if (typeof video_title !== 'undefined') {
        dl_object.video_title = video_title;
    }
    window[options.datalayer_name].push(dl_object);
}

window.reloadVimeoListener = function() {
    var vimeo_videos = document.querySelectorAll('iframe[src*="player.vimeo.com"]');

    if(!window.Vimeo && options.autoload_player_sdk) {
        var script = document.createElement('script');
        script.src = "https://player.vimeo.com/api/player.js";
        script.type = "text/javascript";
        document.head.appendChild(script);
        if(options.logging) {
          console.log("[Vimeo Listener] - Player SDK added to the page");
        }
    }

    if(window.Vimeo) {
        vimeo_videos.forEach(function(vimeo_video) {
            var player = new Vimeo.Player(vimeo_video);

            player.getVideoTitle().then(function(title) {
              if(options.logging) {
                console.log("[Vimeo Listener] - Video detected - " + title);
              }
              video_title = title;
            })
            player.getVideoId().then(function(video_id) {
                video_url = "https://vimeo.com/" + video_id;
            })

            Object.keys(options.vimeo_events).filter(function(event) { return options.vimeo_events[event] }).forEach(function(enabled_event) {
                player.on(enabled_event, function(data) {
                    dataLayerPush(enabled_event, data);
                });
            });
        });
    } else {
      if(options.logging) {
        console.log("[Vimeo Listener] - Player SDK needs to be added to the page. Enable options.autoload_player_sdk");
      }
    }

}
window.reloadVimeoListener();
</script>

Vous devez donc copier le code ci-dessus et le coller dans une balise customHTML dans Google Tag Manager. Utilisez Window Loaded comme déclencheur pour que le listener se charge le plus tard possible dans la page (il aura ainsi plus de chances de capter les vidéos Vimeo).

Configuration du listener

Le listener contient un objet options qui permet de modifier les paramètres suivants :

Nom du paramètre	Explications	Valeur par défaut
`event_name`	Nom de l’événement envoyé dans le dataLayer.	`vimeo_video`
`autoload_player_sdk`	Injection automatique du Player SDK de Vimeo indispensable au fonctionnement du listener. Si vous mettez ce paramètre à `false` assurez vous de charger le Player SDK sur votre site en plus de vos vidéos Vimeo.	`true`
`datalayer_name`	Si Google Tag Manager écoute `customDataLayer` au lieu de `dataLayer` rentrez `customDataLayer` dans ce paramètre.	`dataLayer`
`logging`	Permet de logguer des messages dans la console	`true`
`vimeo_events`	Les événements que le Player SDK peut écouter à partir d’une vidéo Vimeo (référence complète des événements). Vous pouvez activer les événements que vous souhaitez écouter en les passant à `true`.	Events activés par défaut : `play`, `pause`, `progress`, `seeked`, `ended`, `error`

Créez vos variables dataLayer

Le listener va pousser des événements vimeo_video (si vous n’avez pas changé la configuration) dans le dataLayer. Voici un exemple avec le video_status play qui indique que la vidéo a commencé :

dataLayer.push({
  event: "vimeo_video",
  video_provider: "vimeo",
  video_status: "play",
  video_duration: 46,
  video_current_time: 0,
  video_percent: 0,
  video_url: "https://vimeo.com/357274789",
  video_title: "Travis Scott - Made in America"
});

Pour obtenir ces informations dans Google Tag Manager et ainsi pouvoir les utiliser dans une balise d’événement GA4 vous devez créer des variables dataLayer. Nous allons le faire ensemble pour video_status et vous pourrez ensuite le faire pour les autres paramètres.

Variable dataLayer pour obtenir la valeur de video_status

Envoyer vos événements vidéo Vimeo à GA4

Pour suivre les vidéos Vimeo de votre site avec GA4, vous devez configurer une balise d’événement GA4 dans Google Tag Manager.

Événements GA4 pour suivre des vidéos Vimeo

Avec la configuration ci-dessus, les événements envoyés à GA4 seront :

video_play
video_pause
video_progress
etc.

Vérifier dans la Preview GTM

Ouvrez la preview GTM et vérifiez que votre balise d’événement GA4 se déclenche bien sur les événements Data Layer vimeo_video.

Preview GTM : événements GA4 bien envoyés

Gestion du lazy loading (chargement différé)

Si vous chargez vos vidéos Vimeo en lazy load (différé), le listener ne va pas reconnaître les vidéos Vimeo présentes sur la page car il va se charger avant celles-ci.

Pour remédier à ce problème, vous devrez appeler la fonction ci-dessous à chaque fois qu’une vidéo Vimeo se charge ou alors une fois que l’ensemble des vidéos Vimeo de la page sont chargées.

window.reloadVimeoListener();

Messages dans la console

Si le paramètre logging est à true dans la configuration de votre listener, des messages vont apparaître dans la console pour vous aider à comprendre ce qu’il se passe.

Exemple de message console du listener Vimeo

Vidéo Vimeo détectée

Lorsque le listener détecte une vidéo dans la page il va afficher le message suivant dans la console du navigateur.

[Vimeo Listener] - Video detected - {video_title}

Player SDK non disponible

Lorsque le listener détecte que le Player SDK n’est pas chargé dans la page, il affichera le message suivant. Vous devrez donc soit :

activer l’option autoload_player_sdk dans le listener
ou injecter le script du player (<script src="https://player.vimeo.com/api/player.js"></script>) manuellement dans la page

[Vimeo Listener] - Player SDK needs to be added to the page. Enable options.autoload_player_sdk

Player SDK ajouté dans la page

Lorsque le listener ajoute de lui-même le script du Player SDK dans la page il va vous notifier. Ceci arrive lorsqu’il n’y a pas déjà le script du Player SDK dans la page et que vous avez activé l’option autoload_player_sdk dans la configuration du listener.

[Vimeo Listener] - Player SDK added to the page

Discutons de votre tracking

Une question sur cet article, besoin d'un audit de votre configuration ou migration server-side ? Écrivez-moi, je réponds sous 24h.