Rich Media

Avant-propos

Avant de commencer l’implémentation du plugin Rich Media, veuillez-vous assurer d’avoir initialisé le Tracker JavaScript AT Internet et sélectionné le plugin depuis l’interface Tag Composer.

Principe

Le plugin JavaScript Rich Media propose la mesure des médias de votre site.

Il s’agira d’ajouter les différents médias présents dans la page au Tracker puis d’envoyer les informations d’interactions de l’utilisateur.

Marquage

Le Tracker dispose d’une méthode richMedia.add() permettant de définir les valeurs du marqueur de média. Elle prend un objet en paramètre dont les propriétés sont les suivantes :

• mediaType : Type de contenu (« video », « audio », « vpre » pour la mesure des vidéos pre-roll, « vmid » pour la mesure des vidéos mid-roll ou « vpost » pour la mesure des vidéos post-roll) ; obligatoire.
• playerId : Identifiant de lecteur (à renseigner dans le cas de l’utilisation de plusieurs lecteurs).
• mediaLevel2 : Site de niveau 2 dans lequel est rangé le contenu.
• mediaLabel : Libellé du contenu ou d’une publicité post-roll ; obligatoire.

• refreshDuration : Durée de rafraîchissement (optionnel). Deux types de configuration possibles :
  • int : Le nombre de secondes entre chaque rafraîchissement
  • Object : Permet de définir une durée de rafraîchissement évolutive en fonction de la durée de lecture (intervalles en minutes) – plus d’info

  >= 5.6.0
• duration : Durée totale du contenu en seconde (laisser vide si broadcastMode est égal à « Live »). Elle doit être inférieure à 86400 ; obligatoire dans le cas d’une diffusion de type « clip ».
• isEmbedded : Lecture sur un site externe ? (true ou false)
• broadcastMode : Diffusion (« live » ou « clip ») obligatoire dans le cas d’une diffusion de type « live »
• webdomain : URL dans le cas d’une localisation externe (isEmbedded à true)

Le Tracker dispose d’une méthode richMedia.send() permettant de mesurer des actions sur un média. Elle prend un objet en paramètre dont les propriétés sont les suivantes :

• action : Identifiant texte caractérisant une action (« play », « pause », « stop », « info » ou « move ») ; obligatoire.
• playerId : Identifiant de lecteur (doit reprendre la valeur définie plus haut).
• mediaLabel : Libellé du contenu ou d’une publicité post-roll (doit reprendre la valeur définie plus haut) ; obligatoire.

• isBuffering : Buffering en cours (true début de buffering ; false fin de buffering) ; obligatoire pour une action de type « info ».

La méthode « richMedia.add() » doit être exécutée en premier avant l’utilisation de la méthode « richMedia.send() » pour qu’un hit soit correctement mesuré.

Le Tracker dispose aussi de méthodes de suppression de média :

• « richMedia.remove() » : Supprime tous les médias déclarés sur un lecteur (passer l’identifiant du player en paramètre de la méthode).
• « richMedia.removeAll() » : Supprime tous les médias déclarés sur l’ensemble des lecteurs.

Il est nécessaire de faire appel à la méthode « richMedia.add() » pour redéfinir un média après suppression. L’appel à une méthode de suppression entraîne la génération automatique de hits « stop » pour tous les médias concernés.

refreshDuration évolutif

Depuis la version 5.6.0 du SmartTag JS, il est possible de renseigner un objet en valeur de la configuration refreshDuration, ce qui permet de spécifier un intervalle de rafraîchissement qui évolue au cours d’une lecture.

Par exemple, pour avoir le schéma suivant :

1. Du début de la lecture jusqu’à la 1ère minute, un intervalle de 5 secondes
2. De la 1ère minute à la 5ème minute, un intervalle de 15 secondes
3. De la 5ème minute à la 10ème minute, un intervalle de 30 secondes
4. Au-delà de la 10ème minute, un intervalle d’une minute

On renseignera la configuration comme ceci :

tag.richMedia.add({
    ...
    refreshDuration: {
        0: 5,
        1: 15,
        5: 30,
        10: 60
    },
    ...
});

Règles importantes :

• La clé (minute à prendre en compte) doit obligatoirement être un nombre entier
• La valeur est en seconde, et doit obligatoirement être un nombre entier
• Si la valeur est à 0, aucun hit ne sera envoyé sur l’intervalle concerné, ni sur les suivants

Exemples de marquage

1. Marquage d’une lecture d’un live audio sans rafraîchissement :

   var tag = new ATInternet.Tracker.Tag();
   tag.richMedia.add({
       mediaType: 'audio',
       playerId: 123,
       mediaLevel2: 'mediaLevel2',
       mediaLabel: 'mediaAudio',
       mediaTheme1: 'mediaRock',
       isEmbedded: false,
       broadcastMode: 'live'
   });
   tag.richMedia.send({
       action: 'play',
       playerId: 123,
       mediaLabel: 'mediaAudio',
       mediaTheme1: 'mediaRock',
   });

2. Marquage d’une lecture de vidéo avec rafraîchissement (la période de rafraîchissement ne peut pas être inférieure à 5s) :

   var tag = new ATInternet.Tracker.Tag();
   tag.richMedia.add({
       mediaType: 'video',
       playerId: '456',
       mediaLevel2: 'mediaLevel2',
       mediaLabel: 'mediaVideo',
       refreshDuration: {
           0: 5,
           1: 15,
           5: 30,
           10: 60
       },
       duration: '20',
       isEmbedded: false,
       broadcastMode: 'clip'
   });
   tag.richMedia.send({
       action: 'play',
       playerId: 456,
       mediaLabel: 'mediaVideo'
   });

3. Marquage d’une pause dans la vidéo :

   tag.richMedia.send({
       action: 'pause',
       playerId: 456,
       mediaLabel: 'mediaVideo'
   });

4. Marquage d’un stop dans la vidéo :

   tag.richMedia.send({
       action: 'stop',
       playerId: 456,
       mediaLabel: 'mediaVideo'
   });

5. Marquage d’un déplacement dans la vidéo :

   tag.richMedia.send({
       action: 'move',
       playerId: 456,
       mediaLabel: 'mediaVideo'
   });

6. Marquage d’un buffering en cours dans la vidéo :

   tag.richMedia.send({
       action: 'info',
       playerId: 456,
       mediaLabel: 'mediaVideo',
       isBuffering: true
   });

7. Marquage d’une fin de buffering dans la vidéo :

   tag.richMedia.send({
       action: 'info',
       playerId: 456,
       mediaLabel: 'mediaVideo',
       isBuffering: false
   });

8. Suppression des médias déclarés pour le lecteur « 456 » :

   tag.richMedia.remove(456);

9. Suppression de tous les médias déclarés :

   tag.richMedia.removeAll();