Tutoriels

Comment suivre la lecture vidéo pour HTML5, YouTube et Vimeo avec des événements analytiques

Comment suivre la lecture vidéo pour HTML5, YouTube et Vimeo avec des événements analytiques

Flowsery Team
Flowsery Team
2 min de lecture

TL;DR — Réponse rapide

2 min de lecture

Suivez les démarrages de vidéo, les taux de complétion et les pourcentages de visionnage sur HTML5, YouTube et Vimeo à l'aide d'événements analytiques personnalisés -- puis créez des objectifs de conversion basés sur des seuils d'engagement vidéo.

Comprendre comment les visiteurs interagissent avec le contenu vidéo de votre site web fournit des informations précieuses sur l'engagement. Ce guide couvre le suivi de la lecture vidéo dans trois formats courants : les éléments vidéo HTML5 natifs, les lecteurs YouTube intégrés et les intégrations Vimeo.

Ce qui est suivi

Pour chaque format vidéo, l'objectif est de capturer quatre métriques clés :

  • Si le visiteur a démarré la lecture
  • Le pourcentage de la vidéo qui a été visionné
  • Si le visiteur a regardé la vidéo jusqu'à la fin
  • Le temps de lecture moyen sur une période, en secondes et en pourcentage

Suivi de la vidéo HTML5 native

L'élément HTML5 <video> expose des événements natifs qui rendent le suivi simple. Écoutez les événements playing, pause et ended pour calculer la progression du visionnage. Lorsque le visiteur quitte la page (via l'événement beforeunload), envoyez un événement analytique personnalisé contenant le pourcentage de progression ainsi que des indicateurs précisant si la lecture a démarré et si elle a été complétée.

Suivi des intégrations YouTube

YouTube fournit une API IFrame qui déclenche des callbacks onStateChange. Les états pertinents sont PLAYING, PAUSED et ENDED. Pour calculer la progression, divisez la position de lecture actuelle (getCurrentTime()) par la durée totale (getDuration()). Envoyez les métriques résultantes sous forme d'événement personnalisé lorsque l'utilisateur quitte la page ou lorsque la vidéo se termine.

Suivi des intégrations Vimeo

Le SDK du lecteur Vimeo offre une API plus propre à cet effet. L'événement timeupdate fournit directement une propriété data.percent, éliminant le besoin de calculer manuellement la progression. Combinez-le avec l'événement play pour suivre si la lecture a été initiée, et déclenchez votre événement analytique avec les métriques accumulées.

Configuration des objectifs de conversion

Une fois que les événements de suivi vidéo alimentent votre tableau de bord analytique, vous pouvez créer des objectifs de conversion basés sur ceux-ci. Par exemple, définissez un objectif pour les visiteurs ayant regardé au moins 75 % d'une vidéo de démonstration produit. Cela vous permet de visualiser l'engagement moyen de lecture au fil du temps et de corréler la consommation vidéo avec d'autres actions sur le site.

Cet article vous a-t-il été utile ?

Dites-nous ce que vous en pensez !

Avant de partir...

Flowsery

Flowsery

Des analyses orientées revenus pour votre site web

Suivez chaque visiteur, source et conversion en temps réel. Simple, puissant et entièrement conforme au RGPD.

Flowsery

Tableau de bord en temps réel

Suivi des objectifs

Suivi sans cookies

Articles connexes