Tutoriel Google analytics : trackez les vues de vos vidéos

statistiques vidéo

Saviez-vous que Google Analytics est capable de comptabiliser le nombre de fois où vos vidéos sont visionnées ? Tout ce dont nous avons besoin est d’un peu de javascript que nous allons utiliser pour envoyer un événement à Google Analytics à chaque fois que la vidéo est lue, mise en pause ou terminée.

statistiques vidéo

Les événements dans Google Analytics

Commençons par voir ce que sont les événements dans Google Analytics. D’après la documentation, il s’agit des «interactions des utilisateurs avec un contenu» qui peuvent être suivies indépendamment du chargement d’une page. Il peut s’agir d’un clic (sur un bouton de téléchargement par exemple), du chargement d’un script ou d’une ressource, d’un scroll vers telle ou telle zone de l’écran… selon vos besoins les possibilités sont quasiment illimitées.

Pour enregistrer un événement il faut avant tout avoir correctement inséré le marqueur Google Analytics sur la page et appeler la fonction _gaq.push, si vous utilisez Analytics classique (ga.js), de la façon suivante :

_gaq.push(['_trackEvent', catégorie, action, libellé, valeur, interaction]);

Voyons à quoi correspondent les paramètres de cette fonction :

  • “_trackEvent” : nous ne changerons pas cette chaîne, c’est elle qui indique à Google Analytics qu’il doit enregistrer un événement ;
  • catégorie : nous pouvons créer plusieurs catégories pour classer nos événements : vidéo, téléchargements, scroll … nous pouvons inscrire ce que nous voulons dans ce paramètre
  • action : dans le cas d’une vidéo nous aurons trois actions à notre disposition : la lecture, la mise en pause et la fin de la vidéo. Ici aussi nous inscrivons ce que nous voulons
  • libellé : [optionnel] ce quatrième champ aussi est libre, nous pouvons par exemple y mettre le titre de la vidéo lue ;
  • valeur : [optionnel] il est possible d’assigner une valeur à une action. Par exemple nous pourrions avoir 2 boutons de téléchargement, un pour une version gratuite d’un logiciel, un pour une version payante, nos valeurs seraient alors respectivement “0” et “149”
  • interaction : [optionnel] il s’agit d’un booléen (true ou false) pour indiquer si l’action a une influence ou non sur notre taux de rebond. Si l’internaute qui n’a vu qu’une seule page déclenche un événement dont l’interaction est mise à “true”, sa visite ne sera pas considérée comme une visite à rebond.

En pratique, nous pouvons par exemple utiliser cet appel de fonction :

 _gaq.push(['_trackEvent', 'video', 'lecture', 'the nightmare before christmas']);

Nous avons donc enregistré un événement dans la catégorie «video» qui correspond à la «lecture» du film «the nightmare before christmas».

Si vous utilisez Universal Analytics (analytics.js) vos codes de suivi sont un peu différents et vous utiliserez une fonction différente, mais l’idée reste la même, vous trouverez toute l’aide dont vous avez besoin ici.

ga('send', 'event', 'video', action, libellé);

separateur

Visualiser les statistiques d’événements dans Google Analytics

Par définition les événements ne sont pas liés aux chargements de pages, donc cette statistique ne se trouve pas dans la section «navigation» de l’outil, mais il faut vous rendre dans la section «Comportement» → «Evénements» pour accéder à vos chiffres.
Rendez-vous dans le sous-menu «Principaux événements», choisissez «Libellé d’événement» comme dimension principale et «Action d’événement» (qui se trouve dans la rubrique «Comportement» en tant que dimension secondaire. Il ne vous reste plus qu’à vérifier qu’en haut de page c’est bien la catégorie d’événement qui vous intéresse qui est filtrée et le tour est joué.

evenements-google-analytics

Bien sûr, vous pouvez choisir un autre affichage en modifiant vos dimensions et en utilisant les filtres, à vous d’adapter ce tutoriel à vos besoins.
Connecter une balise video html5 à Google Analytics en javascript
Le titre du chapitre est presque aussi long que le texte qui va suivre !

Admettons que votre page comporte une balise video avec l’id «ma-video», comme ceci

<video id="ma-video">
    <source type="video/mp4" src="fichier.mp4"></source>
    ...
</video>

Nous allons utiliser un peu de javascript pour ajouter des écouteurs d’événement à la vidéo et transférer l’événement à Google Analytics quand il se produit.

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", init, false);

    function init(){
        var video = document.getElementById("ma-video");
        video.addEventListener("play", eventPlay, false);
        video.addEventListener("pause", eventPause, false);
        video.addEventListener("ended", eventEnd, false);
    }

    function eventPlay(event) {
        sendEvent('Play', 'Ma vidéo');
    }

    function eventPause(event) {
        sendEvent('Pause', 'Ma vidéo');
    }

    function eventEnd(event) {
        sendEvent('Ended', 'Ma vidéo');
    }

    function sendEvent(action, title) {
        _gaq.push(['_trackEvent', 'video', action, title]);
        // ou
        ga('send', 'event', 'video', action, title);
    }
</script>

Prenons ce code par la fin pour le comprendre :

  1. La fonction sendEvent se charge d’envoyer l’événement à Google Analytics quand nous lui demandons ;
  2. Les fonctions eventPlay, eventPause et eventEnd appellent la fonction sendEvent en lui indiquant l’action d’événement ainsi que le libellé à fournir ;
  3. La fonction init récupère la balise vidéo qui a l’id «ma-video» et lui connecte les Event Listeners correspondant aux actions lecture, pause et fin de la vidéo. Chacun de ces écouteurs d’événement appelle la fonction correspondante.
  4. On ajoute un EventListener sur la page elle-même pour déclencher la fonction init quand le DOM est chargé.

Finalement c’est facile non ?

Nous avons branché 3 événements, mais vous devez savoir que la balise video en possède beaucoup plus, je vous laisse consulter la liste, par exemple sur cette page.

separateur

Voilà une façon simple d’utiliser les événements de Google Analytics, qui peut néanmoins se révéler intéressante si vous souhaitez savoir quelles sont vos vidéos les plus populaires et, chose intéressante, si vos internautes visualisent vos vidéos jusqu’au bout ou non. Bien entendu cette façon de faire ne fonctionne que si vous utilisez une balise html5 native et pas un lecteur plus complexe. Néanmoins au bout du compte une grande partie des lecteurs utilisent cette balise et il est assez simple d’y connecter nos event listeners.
N’hésitez pas à laisser un commentaire si vous utilisez ce tutoriel (avec succès ou non) et à partager vos adaptations si elles peuvent servir à la communauté.

3 réponses

  1. Stéphane dit :

    Merci pour ce billet qui je dois dire est assez technique. Cela m’a permis d’en savoir un peu plus sur le code de tracking de Google Analytics. J’ignorais que l’on pouvait suivre les nombres de visites sur ses vidéos postées sur son site. Il suffisait de rajouter les balises correspondantes, de les faire suivre avec un script js et Google Analytics. Malin !

  2. […] Savez-vous qu’il est possible d’utiliser les événements dans #google analytics pour suivre des actions spécifiques sur votre site internet ? Découvrez sur Responsive Mind comment utiliser un peu de #javascript pour suivre les statistiques de vos vidéos : http://www.responsive-mind.fr/google-analytics-evenements-video/ […]

  3. […] Savez-vous que Google Analytics est capable de comptabiliser les lectures de vos vidéos ? Découvrez comment utiliser les événements sur vos médias.  […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *