Guide de marquage Rich media

Transcription

1 Guide de marquage Rich media AT INTERNET Head office: Parc d Activités La Devèze - 8 Impasse RUDOLF DIESEL France RCS Bordeaux B DE.S v3.3 (updated 04/01/2011)

2 Table des matières Avant propos... 1 Rich media... 2 Principes généraux... 2 Personnalisation du marquage... 2 Tag de rafraîchissement... 2 Publicités post-roll... 2 Le cas des podcasts... 2 Implémentation JavaScript... 3 Marquer les contenus vidéo, audio et animations... 3 Marquer les podcasts... 4 Implémentation ActionScript... 6 Etape 1 : insertion des appels dans les fichiers AS existants... 7 Etape 2 : implémentation du fichier "xititag.xml"... 9 Exemple d implémentation Annexes Annexe : identifiants Rich media Identifiants des actions prédéfinies Identifiants de définition de la qualité du contenu Identifiants des flux de lecture Identifiants des extensions de contenus Annexe : Plug-ins Rich media Plug-in pour balises audio et video HTML Plug-in pour player YouTube Plug-in pour JW FLV Media Player v4.x Plug-in pour FlowPlayer ii

3 Avant propos Les marques et logos figurant dans ce document sont des marques enregistrées ou non appartenant à la société AT Internet ou à des tiers. Toute utilisation, non autorisée explicitement par les titulaires des marques précitées, est strictement interdite. Toute reproduction partielle ou totale de ce document, sans autorisation expresse d AT Internet est interdite. AT Internet se réserve le droit de mettre à jour le présent document à tout moment et sans préavis. Document et informations non contractuels. AT Internet All rights reserved 1

4 Rich media Grâce à la fonctionnalité Rich media, vous disposez d une mesure précise et détaillée de tous les types de contenus (audio, vidéo, podcast...), mais également d informations complémentaires sur lieux de diffusion des contenus (internes ou externes à votre site), les modes de diffusion (Clip ou Live) ainsi que sur les actions précises effectuées par les internautes (play, stop, pause, backward, forward, partage, envoi par , mise en favoris...). Ce document de marquage décrit une marche à suivre générale en fonction de la technologie utilisée pour l implémentation de la mesure Rich media : Implémentation en code JavaScript (lecteurs standards) Implémentation en code ActionScript (lecteurs Flash AS3) Les informations et exemples fournis sont donc valables pour la mesure de tous les types de contenus mesurés (audio, vidéo, etc.). Toutes les informations décrites dans ce document sont conditionnées par le téléchargement préalable (et par vos soins) du fichier xtcore.js version ou ultérieure. Ce dernier est disponible dans votre interface depuis : la zone Configuration > Marqueurs XiTi > Marqueurs de contenus (version 7.5) le bouton Outils > Marqueurs (version NX) Principes généraux Quel que soit votre type de lecteur (JavaScript ou Flash), AT Internet vous propose de mesurer les types de contenus suivants : Vidéo Audio Animation Podcast Un contenu ne peut pas appartenir à 2 types différents. Le fait de renseigner le même libellé lors du marquage (ou le même identifiant) ne permet pas de les regrouper. Personnalisation du marquage En fonction du type de contenu mesuré, vous avez la possibilité de nommer tous les éléments, puis de les classer (avec pour séparateur "::") sur 3 niveaux de thèmes maximum. AT Internet vous propose de mesurer un grand nombre d éléments Rich media en vous proposant des valeurs prédéfinies, mais vous permet également d intégrer des informations personnalisées au moment du marquage. Retrouvez toutes les valeurs prédéfinies des variables dans les annexes de ce document. Tag de rafraîchissement Pour garantir la parfaite intégrité de la mesure, AT Internet a prévu un envoi (à fréquence régulière) de hits indépendants de rafraîchissement (Refresh) afin de s assurer que le media est toujours lu par l internaute. Vous obtenez ainsi des durées de lecture plus précises qu avec une simple mesure basée sur la différence de temps entre l action "Stop" et l action "Play". Publicités post-roll Les publicités post-roll sont des publicités présentées en fin de diffusion d un contenu précis Rich media. La mesure de ce type de contenu doit passer par la méthode xt_rm() décrite plus bas. Le cas des podcasts 2

5 Rich media La méthode d implémentation du marqueur Podcast est sensiblement différente des autres types de contenus. La procédure de marquage est évoquée en détail dans ce document. Implémentation JavaScript La méthode de mesure des éléments Rich media consiste à appeler une fonction JavaScript (xt_rm()) au moment du clic de l internaute sur un élément du player (diffusant le contenu du média). Marquer les contenus vidéo, audio et animations La page Web qui contient le lecteur Rich media doit contenir un code du marqueur avec le fichier xtcore.js. Ce fichier xtcore.js contient la fonction xt_rm() qui doit être appelée sur chaque action réalisée sur le lecteur (action JavaScript). Vous devez donc faire appel à la fonction xt_rm() pour mesurer tous les événements sur les types de contenus audio, vidéo et animation. Appel en JavaScript via la fonction xt_rm() La fonction xt_rm(), commune à tous les types de contenus, permet de passer plusieurs variables. Ces dernières ont une signification différente en fonction du type de contenu mesuré. La fonction xt_rm() doit prendre la forme suivante (ordre à respecter) : Onclick=xt_rm(A,B,C,D,E,F,G,H,I,J,K,L,M,N) Liste des variables à renseigner Variables Description A B Obligatoire - Type de contenu ("video", "audio", "animation" ou "vpost" pour la mesure des vidéos post-roll). Le type de contenu doit être concaténé à la variable "&plyr=" contenant l identifiant du lecteur en cours d utilisation (voir exemple plus bas). Cette variable "&plyr=", non obligatoire, doit être ajoutée dans le cas de l utilisation de plusieurs lecteurs, afin d assurer le distinguo entre les hits. Site de niveau 2 dans lequel est rangé le contenu. C D E F G H Obligatoire - Libellé du contenu (utilisez les "::" si besoin) ou d'une publicité post-roll (dans ce cas, ne pas utiliser les "::"). Le libellé d'une publicité post-roll doit être concaténé à la variable "&clnk=". Celle-ci doit reprendre le libellé du contenu de la vidéo à laquelle la publicité est liée (voir exemple plus bas). Obligatoire - Action (identifiant prédéfini). Retrouvez la liste des identifiants dans les annexes de ce document. Valeur de l action personnalisée (si la variable D="perso"). Vous pouvez ajouter jusqu à 5 actions personnalisées. DISPONIBLE PROCHAINEMENT Durée de rafraichissement (optionnel en seconde). La durée de rafraîchissement est blindée. Il est impossible de saisir une durée inférieure à 5 secondes. Obligatoire (sauf si D est différent de "play" ou si L est égal à "Live") : durée totale du contenu en seconde (laisser vide si L= "Live") Informations de position de lecture ("rmp", "rmpf" et "rmpbufp") en seconde. Vous devez renseigner ces 3 variables à concaténer comme suit : "rmp=0&rmpf=0&rmbufp=0" (0 est la valeur par défaut). - rmp (rich media position) : position de la tête de lecture. Cette valeur doit être mise à jour pour chaque action (variable D). - rmpf (rich Media position from) : position de départ de la tête de lecture lors d un déplacement sur la barre de lecture. Cette valeur doit être mise à jour pour chaque action (si variable D est égale à "move"). - rmbufp (rich media buffer cache position) : position de la barre d'avancement du 3

6 Guide de marquage Rich media cache dans le contenu. Cette valeur doit être mise à jour pour chaque action (variable D). I Identifiant de qualité OU numéro du slide si type="animation". J Identifiant de flux OU information si passage automatique ou pas si type="animation". K Localisation ("int" ou "ext"). L M Diffusion ("live" ou "clip"). Si A="Animation", renseigner L="Live" permet d avoir la durée absolue de lecture (et non relative par rapport à G). Si L est vide, le mode de diffusion pris en compte est "clip". Taille du contenu (entier en Ko, laisser vide si L="live")) N Format du contenu (identifiant prédéfini par nos soins. Voir annexes) NOTE Toutes les caractéristiques doivent être transmises à chaque appel. Retrouvez toutes les valeurs prédéfinies des variables dans les annexes. Exemple 1 : Ci-dessous l exemple de la fonction xt_rm qualifiant une action "play" sur un lecteur vidéo se mettant à buffériser. xt_rm('video&plyr=1','3', 'mychapter::mycontent', ' play&buf=1','0','0','3600','rmp=0&rmpf=0&rmbufp=0','1','1','int','clip','300','1') Exemple 2 : Ci-dessous l exemple de la fonction xt_rm qualifiant une action "move" sur un lecteur vidéo. xt_rm('video&plyr=1','3','mychapter::mycontent','move','0','0','3600','rmp=15&rmpf=10&rm bufp=15','1','1','int','clip','300','1'); - la position de la tête de lecture avant déplacement (rmpf) : 10 - la position de la tête de lecture après déplacement (rmp) : 15 Exemple 3 : Ci-dessous l'exemple de la lecture d une vidéo suivie d'une publicité post-roll. Précisons que le marquage de la vidéo précédant la publicité n'est pas obligatoire. - Action "play" sur la vidéo "videos::video1" (lancement de la vidéo) : xt_rm('video&plyr=1','1','videos::video1','play','0','5','15','rmp=0&rmpf=0&rmbufp=0','1 ','1','int','clip','300','1'); - Action "refresh" sur la vidéo (2 hits sont générés de façon automatique). - Action "stop" sur la vidéo "videos::video1" (fin de lecture) : xt_rm('video&plyr=1','1','videos::video1','stop','0','5','15','rmp=15&rmpf=0&rmbufp=15', '1','1','int','clip','300','1'); - Action "play" sur vidéo post-roll "post1" (lecture de la publicité suivant la vidéo) : xt_rm('vpost&plyr=1','1','post1&clnk=video1','play','0','5','10','rmp=0&rmpf=0&rmbufp=0','1','1','int','clip','200','1'); Marquer les podcasts 4

7 Rich media Pour l analyse de la performance des podcasts d un site, nous proposons plusieurs types de mesure : Le chargement du flux XML sur le logiciel de lecteur de podcast (itunes ou autres). Le téléchargement d'un des éléments podcast proposés dans le flux. Mesure du flux XML La mesure du flux XML est permise par une redirection du flux vers l un de nos serveurs afin que nous puissions mesurer chacun des chargements du flux. Afin d installer cette redirection, vous devez procéder de la façon suivante : Si votre site possède un flux de type podcast sur l'url les internautes ont noté cette URL dans leur lecteur de podcast. Copiez le contenu de ce fichier dans un autre fichier XML inconnu des internautes (par exemple, feed2.xml). Remplacez son contenu par une redirection dynamique (côté serveur) vers : ite.com/feed2.xml Dans cette URL, les modifications suivantes doivent être apportées : logxxxx est à remplacer par le serveur indiqué dans la variable xtsd de votre code du marqueur général xts=xxxx est à renseigner avec l identifiant de votre site (variable xtsite du code du marqueur général) feed_name est à remplacer par le nom que vous voulez donner à votre flux (celui qui apparaitra dans votre rapport) url contient l URL vers laquelle la redirection doit se faire (celle qui héberge votre flux). Cette variable doit être placée en dernier et commencer par NOTE Cette méthode permet de mesurer les flux XML déjà enregistrés par les internautes dans leur lecteur de flux (itunes ou autres). Pour toute nouvelle inscription, il est recommandé de proposer aux internautes le même fichier XML avec en paramètre la date de l inscription : la redirection vers logxxxx.xiti.com/. ne se fait alors que si la date de diffusion est supérieure à celle de l inscription (pas de mesure le 1 er jour). * Date de la mesure (variable "xtdate") : Pour éviter que les lecteurs de flux podcast enregistrent directement l'url redirigée, vous devez vous baser sur la date d'inscription au flux. Si la date récupérée est la date du jour, la redirection ne se fait pas, si la date est différente de la date du jour, la redirection s'effectue. Si votre site propose un flux Podcast sur l'url suivante : Vous devez suivre les étapes suivantes : 1. A tous les appels à ce flux, ajoutez la date du jour dans une variable "xtdate". Par exemple en ASP : = date %> Cette date sera récupérée comme la date d'inscription au flux. 2. Copiez le contenu de ce fichier flux.xml dans un autre fichier (par exemple feed2.xml) qui servira au point Remplacez le contenu du fichier flux.xml par une redirection dynamique (côté serveur) vers nos serveurs : te}&url= où feed_name est à remplacer par votre propre libellé de flux. Vous devez réaliser cette opération UNIQUEMENT si la variable xtdate n'est pas la date du jour. Par exemple, en ASP, vous auriez : 5

8 Guide de marquage Rich media <% xtdate = request.querystring("xtdate") if date = xtdate then %> <!-- #include file="feed2.xml" --> <% else response.redirect " &xtinsc=" & xtdate & "&url= end if %> Au final : Si la date que vous avez placée dans l'url est celle du jour, feed.xml ne contient alors que feed2.xml en "include" Sinon l'url logp.xiti.com effectuera une redirection vers feed2.xml (permettant ainsi la mesure) Mesure des articles podcast Les articles podcast peuvent être des fichiers audio, vidéo ou autres, que le flux XML propose en téléchargement. Là aussi, il est nécessaire de passer par une redirection, en procédant de la façon suivante : Repérez les balises <enclosure> à l intérieur de votre fichier XML. Par exemple, la ligne suivante : <enclosure url=" length="34524" type="video/quicktime" /> Remplacez l URL appelée par le fichier, par une URL de redirection comme celle-ci : <enclosure url=" me&pod=video_name&url= length="34524" type="video/quicktime" /> NOTE Pour des raisons de compatibilité avec itunes, il est impératif d ajouter "amp ;" derrière le caractère "&". Dans cette URL, les modifications suivantes doivent être apportées : logxxxx est à remplacer par le serveur indiqué dans la variable xtsd de votre code du marqueur général xts=xxxx est à renseigner avec l identifiant de votre site (variable xtsite du code du marqueur général) feed_name reprend le libellé du flux global XML my_video.mov est un libellé que vous pouvez renseigner librement (avec extension.mp3,.mov ou autre) et qui est repris par certains lecteurs de flux (IE7 entre autre) video_name à remplacer par le nom que vous voulez donner au fichier téléchargé (libellé que vous retrouverez dans votre interface) url contient l URL vers laquelle la redirection doit se faire (celle qui héberge votre flux). Cette variable doit être placée en dernier et commencer par L'URL placée derrière dans la variable url= doit commencer par et doit être placée à la fin. La variable "pod" doit être utilisée uniquement pour les articles téléchargés (sans cette variable, une actualisation du flux est mesurée et non un téléchargement d élément). NOTE Les analyses seront disponibles dans Rich media > Podcasts. Implémentation ActionScript Nous décrivons ici la méthode d implémentation Rich media dans un lecteur de type Flash AS3. Pour l'implémentation Rich media, nous mettons à votre disposition un dossier "XiTiFlash". Ce dossier est disponible UNIQUEMENT SUR DEMANDE à formuler depuis le Centre Support dans l interface. Il contient : - Des fichiers sources AS3 : ils ne doivent pas être modifiés et doivent être placés dans le même dossier que votre film 6

9 Rich media flash source. - Un fichier "xititag.xml" qui doit contenir toutes les informations reliant les flags aux variables. L implémentation du marqueur Rich media nécessite plusieurs étapes : 1. Placer les bons fichiers contenus dans le dossier "XiTiFlash" dans votre espace de travail Flash. 2. Modifier votre film Flash pour insérer des flags qui caractérisent les endroits que vous souhaitez mesurer tout au long de votre film. 3. Implémenter un fichier XML (exemple proposé dans le dossier "XiTiFlash") qui reprend tous les flags créés pour leur attacher des variables. Etape 1 : insertion des appels dans les fichiers AS existants En fonction de vos besoins de mesure, vous devez insérer la ligne : XiTiTag.loadXml("Flag_Name"); Dans cette ligne de code "Flag_Name" est un libellé qui relie l événement Flash à mesurer au code contenu dans le fichier xititag.xml. XiTiTag est une fonction créée dans un des fichiers ".as" du dossier "XiTiFlash". Nous vous recommandons de donner des noms suffisamment explicites aux flags, tout en sachant que vous devez configurer leurs propriétés à mesurer dans le fichier "xititag.xml" (voir étape 2). Si le film Flash fait appel ("XiTiTag.loadXml()") à un flag non déclaré dans le fichier XML, la mesure ne se fait pas. Exemple : L image ci-dessus présente un code ".as" existant dans lequel ont été ajoutés 2 appels XiTiTag.loadXml() avec un nom de flag "Play_video1" et "stop_video1". L objectif de ces appels est de générer une mesure Rich media avec une action "play" et "stop". Ces actions sont renseignées dans le fichier xititag.xml, via la fonction xt_rm(). Variables dynamiques Pour des raisons pratiques, si vous souhaitez passer les valeurs de certaines variables (à passer dans la fonction xt_rm() du fichier xititag.xml) directement dans le code source du fichier.as, vous devez regrouper ces variables (concaténées avec des séparateurs "&") dans une chaine à passer comme seconde variable de XiTiTag.loadXml(). Exemple : 7

10 Guide de marquage Rich media //Start play private function doplay (e:mouseevent) :void { var nameflv:string="&richname=theme::myvideo1"; flv=video1.flv"; if (nextp){ flv="video2.flv"; nameflv="&richname=thme::myvideo2"; } XiTiTag.loadXml ("Play", nameflv) ; vidtest.stopplay (ns) ; vid.clear () ; vidtest.startplay (ns, flv) ; vid.attachnetstream (ns) ; } Cet exemple montre comment une variable dynamique ("nameflv") est construite pour changer un nom de contenu ("myvideo1" ou "myvideo2") selon un certain contexte. L appel suivant : XiTiTag.loadXml("Play",nameflv); Permet ainsi de se reposer sur les caractéristiques du flag "Play" (passées dans xt_rm() de xititag.xml) tout en modifiant le libellé du contenu. Toutes les variables passées en seconde variable de cet appel sont prioritaires sur les informations renseignées dans le fichier XML (étape 2). Structure des variables Pour contrôler dynamiquement chaque variable de xt_rm(), il suffit donc de les renseigner dans les noms suivants : Variables type Description Obligatoire - Type de contenu ("audio", "video", "animation" ou "vpost" pour la mesure des publicités post-roll). plyr Identifiant de lecteur. clnk Libellé du contenu lié à une publicité post-roll (type vpost). xtn2 Site de niveau 2 dans lequel ranger le contenu. richname action custom refresh duration buf Obligatoire - Libellé du contenu (avec utilisation de "::" si besoin pour établir une arborescence thématique). Obligatoire - Identifiant texte caractérisant une action parmi les actions prédéfinies (voir annexes). Contenu des variables personnalisées (à utiliser uniquement si action="perso"). DISPONIBLE PROCHAINEMENT Durée de rafraîchissement (optionnel, en seconde). Pour les contenus de longue durée, cette variable permet de générer des hits intermédiaires automatiques (entre le hit de "play" et celui de "stop") apportant ainsi une mesure plus fine de la durée. Durée totale du contenu en seconde (laisser vide si mode="live"). Cette variable est obligatoire si action="play" et mode="clip". Buffering en cours (buf=1). 8

11 Rich media rmp Position de la tête de lecture. rmpf Position d'origine lors d un déplacement sur la barre de lecture. quality Identifiant de qualité OU numéro de slide si type="animation". stream location Identifiant de flux OU booléen pour indiquer si le changement de slide est automatique ou pas (si type="animation") Localisation du contenu ("int" pour interne au site ou "ext" pour externe). mode size Diffusion ("live" pour les contenus diffusés en continu et sans durée, ou "clip" pour les contenus à durée finie). Si "type=animation", renseigner "mode=live" permet d avoir la durée absolue de lecture (et non relative par rapport à "duration"). Si mode est vide, le mode de diffusion pris en compte est "clip". Taille/poids du contenu (entier en Ko, laisser vide si mode="live"). extension Format du contenu (identifiant prédéfini. Voir annexes). Pour contrôler dynamiquement les variables de pages et de niveau 2 contenant le media, vous devez les renseigner dans les noms suivants : xtprich : libellé de la page avec contenu media. xts2rich : niveau 2 de la page avec contenu media. Etape 2 : implémentation du fichier "xititag.xml" Ce fichier contient : une balise <xiti> contenant elle-même 2 balises. une balise <tags> contenant toutes les balises <tag> définissant les flags présents dans les fichiers ".as" sources. Elle doit contenir le sous-domaine du marqueur et le numéro de site. NOTE Les variables définies dans la balise <tags> sont les valeurs globales par défaut à attribuer à toutes les balises <tag> : cela évite d avoir à répéter dans chaque balise le sous-domaine et l identifiant du site. Ces variables peuvent être redéfinies de façon dynamique. une balise <settings> qui contient elle-même une balise <url> caractérisant le domaine du collecteur (ne pas modifier). Exemple : Ci-dessous un exemple de fichier "xititag.xml" donné dans le dossier "XiTiFlash" : <?xml version="1.0" encoding="iso "?> <xiti> <tags xtsd=" xtsite="32" xtn2="17"> <! -- video launch --> <tag key="play_video1" xtprich="page_with_video" xts2rich="3" xtrm="video,4,video1,play,0,2,3000,4,1,1,int,clip,1000,8" /> <tag key="stop_video1" xtprich="page_with_video" xts2rich="3" xtrm="video,4,video1,stop" /> </tags> <! -- General parameters defintion --> <settings> <url>.xiti.com/hit.xiti</url> </settings> </xiti> 9

12 Guide de marquage Rich media Exemple d implémentation Avec le tag XML suivant : <tag key="play_video1" xt_rm="video&plyr=1,4,chap::myvideo,play,0,6,10,rmp=0&rmpf=0&rmbufp=0,1,1,int,clip,1000,8" xtprich="video_page" xts2rich="3" /> Tout appel : XiTiTag.loadXml("Play_video1"); envoie un hit contenant les informations suivantes : Type : "video" et Identifiant du lecteur : "1" Site de niveau 2 : "4" Libellé du contenu : "chap::myvideo" Action : "play" Actions personnalisées : "0" (pas d action personnalisée / Disponible prochainement). Durée de rafraîchissement : "6" (secondes) Durée totale du contenu : "10" (secondes) Positions Rich media o rmp= : "0" o &rmpf= : "0" o &rmbufp= : "0" Identifiant de qualité : "1" (22khz) Identifiant de flux : "1" (64 kbps) Localisation du contenu : "int" (interne au site) Mode de diffusion : "clip" (contenu avec durée finie) Taille/poids du contenu : "1000" (Ko) Format du contenu : "8" (swf) Par contre, l appel suivant : XiTiTag.loadXml("Play_video1", "&richname=theme::myvideo&duration=20&rmp=10"); envoie un hit avec exactement les mêmes informations, à l exception : du nom du contenu : "theme::myvideo" de la durée du contenu : "20" (secondes) de la position de la tête de lecture : "10" (secondes) 10

13 Annexes Annexe : identifiants Rich media Identifiants des actions prédéfinies En fonction de la signification à donner à l appel d un tag, les actions Rich media doivent contenir un des identifiants textes suivants : "play" : action de lancement de lecture "play&buf=1" : action de lancement de lecture qui déclenche directement une mise en buffering "info&buf=1" : action de mise en buffering automatique en cours de lecture "info&buf=0" : action d'arrêt du buffering qui déclenche la reprise de la lecture "pause" : action de mise en pause "stop" : action d arrêt de lecture (et donc de retour au début) "forward" : action de se déplacer vers l avant (valable uniquement pour les contenus avec des séquences prédéfinies) "backward" : action de se déplacer vers l arrière (valable uniquement pour les contenus avec des séquences prédéfinies) "share" : action de partager la vidéo (utilisé surtout dans les blogosphères) " " : action d envoyer le contenu par mail "favor" : action de mise en favoris "download" : action de télécharger un contenu "perso" : DISPONIBLE PROCHAINEMENT - action non prédéfinie. Cet identifiant permet de passer jusqu à 5 actions personnalisées. Elles doivent être définies dans votre interface et les valeurs sont à transmettre dans les variables rm1, rm2, rm3, rm4 ou rm5. "move" : action de déplacement de la tête de lecture Identifiants de définition de la qualité du contenu La qualité est une mesure qui s exprime en Hz. Les identifiants prédéfinis sont les suivants : 1 : 22 khz 2 : 44 khz 3 : 32 khz 4 : 70 khz Identifiants des flux de lecture Les flux de lecture sont des mesures qui s expriment en kbps. Les identifiants prédéfinis sont les suivants : 1 : 64 kbps 2 : 128 kbps 3 : 160 kbps 4 : 192 kbps 5 : 224 kbps 6 : 256 kbps 7 : 320 kbps 8 : 22 kbps 9 : 96 kbps 11

14 Guide de marquage Rich media 10 : 112 kbps 11 : 300 kbps 12 : 500 kbps 13 : 1000 kbps 14 : 800 kbps 15 : 900 kbps 16 : 1200 kbps 17 : 1500 kbps 18 : 200 kbps 19 : 2030 kbps Identifiants des extensions de contenus Les extensions de contenu se renseignent dans le tag par des identifiants textes dont voici la liste : 1 : mp3 2 : wma 3 : wav 4 : aiff 5 : aac 6: mpeg 7 : flv 8 : swf 9 : mp4 10 : avi 11 : mkv 12 : wmv 13 : mp3+g 14 : rm 15 : rmvb 16 : mov 17 : ogg 12

15 Annexes Annexe : Plug-ins Rich media Plug-in pour balises audio et video HTML5 Dans les recommandations HTML5 du W3C, vous avez noté l'apparition de nouvelles balises vidéo et audio. Ces éléments permettent une intégration simplifiée de contenus multimédias dans des documents HTML ou XHTML. AT Internet vous propose un plug-in Rich media pour marquer facilement ce type de balises. Le principe est de collecter des données relatives à toutes les actions des utilisateurs sur les lecteurs associés à chaque balise, puis de générer des hits pour la mesure Rich media. L'objectif est ici de renseigner la plupart des valeurs utilisées pour le marquage Rich media classique directement dans les balises HTML5. ETAPE 1 : IMPLEMENTATION DU FICHIER XTVARM.JS Le plug-in Rich media est composé d un fichier JavaScript xtvarm.js. Vous devez récupérer ce fichier puis le placer dans l arborescence de votre site. ETAPE 2 : CREATION D'UN APPEL AU FICHIER XTVARM.JS Ajouter l appel au fichier xtvarm.js dans le code source de vos pages contenant des balises audio et/ou video, juste en dessous de l appel au script xtcore.js : <script language="javascript" src="xtvarm.js"></script> ETAPE 3 : INTEGRATION DES VARIABLES RICH MEDIA Les variables Rich media ont été renommées comme indiqué dans le tableau ci-dessous. Une fois renseignées, elles doivent être ajoutées dans les balises audio et/ou video concernées. Variables standards Variable à insérer Description A xttype xtplayer Type de contenu ("video", "audio", "animation" ou "vpost") Identifiant du lecteur (variable non obligatoire). B xtn2 Site de niveau 2 dans lequel est rangé le contenu C xtrichname xtclink Libellé du contenu (utilisez les "::" si besoin) ou d une publicité post-roll (dans ce cas, ne pas utiliser les "::") Libellé du contenu lié à une publicité (si utilisé). F xtrefresh Durée de rafraîchissement (optionnel en seconde). G xtduration Durée totale du contenu en seconde (laisser vide si L="live"). I xtquality Identifiant de qualité OU numéro du slide si type="animation" J xtstream Identifiant de flux OU information si passage automatique ou pas si type="animation" K xtlocation Localisation ("int" ou "ext") L xtmode Diffusion ("live" ou "clip"). Si A="Animation", renseigner L="Live" permet d avoir la durée absolue de lecture (et non relative par rapport à G) M xtsize Taille du contenu (entier en Ko, laisser vide si L="live") N xtextension Format du contenu (identifiant prédéfini par nos soins). Pour obtenir plus d'informations sur les identifiants Rich media, consultez la section Annexes > Marquage Rich media > Identifiants Rich media. 13

16 Guide de marquage Rich media Le lancement du processus de traitement est conditionné par la présence des variables du Rich media dans les différentes balises. Exemples d'intégration de variables *Marquage d'une vidéo classique : <video xttype="video" xtplayer="1" xtrichname="test::video" xtrefresh="5" xtduration="41" xtquality="1" xtstream="1" xtlocation="ext" xtmode="clip" xtsize="5603" xtextension="17" src="video.ogg" width="150" height="150" controls></video> *Marquage d une vidéo publicitaire type "post-roll": <video xttype="vpost" xtplayer="2" xtrichname="post_roll" xtclink="video" xtrefresh="10" xtduration="15" xtquality="1" xtstream="1" xtlocation="int" xtmode="clip" xtsize="3000" xtextension="17" src="pub.ogg" width="150" height="150" controls></video> *Marquage d une piste audio : <audio xttype="audio" xtplayer="1" xtrichname="test::audio" xtrefresh="5" xtduration="180" xtquality="1" xtstream="1" xtlocation="int" xtmode="clip" xtsize="5000" xtextension="3" width="150" height="150" controls src="audio.wav"></audio> Plug-in pour player YouTube Le player de "YouTube" est un lecteur de media Internet développé en Flash et accessible en ligne. Il possède une interface permettant son contrôle via le langage JavaScript. Le plug-in que nous proposons permet la récupération de données Rich media fournies par ce lecteur. Concrètement, ce plug-in permet de collecter des données relatives aux actions des utilisateurs sur le lecteur et de générer des hits pour la mesure Rich media. En appelant une animation Flash depuis un navigateur web, il est possible de lui associer quelques variables à l aide du paramètre appelé "flashvars". L'objectif est ici de renseigner la plupart des valeurs nécessaires à la fonction "xt_rm(a,b,c,d,e,f,g,h,i,j,k,l,m,n)" utilisée pour le marquage Rich media classique. ETAPE 1 : IMPLEMENTATION DU FICHIER XTYTRM.JS Le plug-in Rich media est composé d un fichier JavaScript xtytrm.js. Vous devez récupérer ce fichier puis le placer dans l arborescence de votre site. ETAPE 2 : CREATION D'UN APPEL AU FICHIER XTYTRM.JS Ajouter l appel au fichier xtytrm.js dans le code source de vos pages contenant un player YouTube, juste en dessous de l appel au script xtcore.js : <script language="javascript" src="xtytrm.js"></script> ETAPE 3 : INTEGRATION DES VARIABLES RICH MEDIA Les variables Rich media standard ont été renommées. Pour voir le détail des variables consultez le tableau disponible dans la section précédente Plug-in pour balises audio et video HTML5 (Etape 3). Une fois renseignées, elles doivent être ajoutées au paramètre "flashvars" de l animation. NOTE Les actions de type "move" liées au déplacement de la tête de lecture ne sont pas détectées par le plug-in. Pour obtenir plus d'informations sur les identifiants Rich media, consultez la section Annexes > Marquage Rich media > Identifiants Rich media. ETAPE 4 : ACTIVATION DE L'API "YOUTUBE" Le contrôle de la lecture en JavaScript passe par l ajout de variables spécifiques au lecteur de "YouTube". Pour activer l interface JavaScript de "YouTube" (API), il est indispensable de passer le paramètre suivant dans l URL du player : "enablejsapi = 1" 14

17 Annexes Vous devez également ajouter un paramètre permettant l identification du player en cours d utilisation dans cette même URL : "playerapiid=idplayer" Le fonctionnement de l API JavaScript du player de "YouTube" est conditionné par l installation d une version 8 ou supérieure de "Flash Player". EXEMPLES D'IMPLEMENTATION Cas n 1 : utilisation d un constructeur JavaScript pour le déploiement d un player. Il s'agit de déclarer une variable JavaScript appelée "flashvarsat" qui va contenir les valeurs du Rich media. <script type="text/javascript" src="swfobject.js"></script> <div id="ytapiplayer"> You need Flash player 8+ and JavaScript enabled to view this video. </div> <script type="text/javascript"> //Déclaration des variables utiles au Rich media var flashvarsat= { xttype: "video", //A xtplayer: "1", //A xtn2: "1", //B xtrichname: "Video::YouTube", //C xtclink:"",//c xtrefresh: "10", //F xtduration: "195", //G xtquality: "1", //I xtstream: "1", //J xtlocation: "int", //K xtmode: "clip", //L xtsize: "10215", //M xtextension: "7" //N }; var params = { allowscriptaccess: "always" }; var atts = { id: "ytplayer" }; swfobject.embedswf(" playerapiid=ytplayer", "ytapiplayer", "425", "344", "8", null, flashvarsat, params, atts); </script> Cas n 2 : insertion directe du player dans le code source de la page (version HTML). Le paramètre "flashvars" doit être ajouté à la fois dans une balise "PARAM" et dans la balise "EMBED". <object codebase=" 9,0,18,0" id="ytplayer" classid="clsid:d27cdb6e-ae6d-11cf-96b " width="425" height="344"> <param name="movie" value=" tplayer"/> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="xttype=video&xtplayer=1&xtn2=1&xtrichname=video::youtube&xtclink= &xtrefresh=10 &xtduration=195&xtquality=1&xtstream=1&xtlocation=int&xtmode=clip&am p;xtsize=10215 &xtextension=7"/> <embed allowscriptaccess="always" height="344" width="425" type="application/xshockwave-flash" name="ytplayer" id="ytplayer" src=" layer" flashvars="xttype=video&xtplayer=1&xtn2=1&xtrichname=video::youtube&xtcl ink=&xtrefresh=10 &xtduration=195&xtquality=1&xtstream=1&xtlocation=int&xtmode=clip&am p;xtsize=10215 &xtextension=7"> </embed> </object> 15

18 Guide de marquage Rich media Plug-in pour JW FLV Media Player v4.x Le "JW FLV Player" est un lecteur de media Internet développé en Flash. Il supporte la lecture de plusieurs formats (FLV, MP4, MP3, AAC, JPG, PNG et GIF). Il supporte également les protocoles RTMP, HTTP, le streaming en live, divers formats de playlists,... et propose un large éventail de paramètres. Il est également possible de contrôler le lecteur via le langage JavaScript. Le plug-in que nous proposons permet la récupération de données Rich media fournies par ce lecteur. Concrètement, ce plug-in permet de collecter des données relatives aux actions des utilisateurs sur le lecteur et de générer des hits pour la mesure Rich media. En appelant une animation Flash depuis un navigateur web, il est possible de lui associer quelques variables à l aide du paramètre appelé "flashvars". L'objectif est ici de renseigner la plupart des valeurs nécessaires à la fonction "xt_rm(a,b,c,d,e,f,g,h,i,j,k,l,m,n)" utilisée pour le marquage Rich media classique. Le plug-in ne fonctionne que pour les versions 4.x du player JW. ETAPE 1 : IMPLEMENTATION DU FICHIER XTJWRM.JS Le plug-in Rich media est composé d un fichier JavaScript xtjwrm.js. Vous devez récupérer ce fichier puis le placer dans l arborescence de votre site. ETAPE 2 : CREATION D'UN APPEL AU FICHIER XTJWRM.JS Ajouter l appel au fichier xtjwrm.js dans le code source de vos pages contenant un Player JW (à télécharger sur le site officiel), juste en dessous de l appel au script xtcore.js : <script language="javascript" src="xtjwrm.js"></script> ETAPE 3 : INTEGRATION DES VARIABLES RICH MEDIA Les variables Rich media standards ont été renommées. Pour voir le détail des variables consultez le tableau disponible dans la section Plug-in pour balises audio et video HTML5 (Etape 3). Une fois renseignées, elles doivent être ajoutées au paramètre "flashvars" de l animation. Pour obtenir plus d'informations sur les identifiants Rich media, consultez la section Annexes > Marquage Rich media > Identifiants Rich media. ETAPE 4 : ACTIVATION DE LA MESURE Ajout de la fonction "tracecall" Une fonction nommée "tracecall" et permettant de "tracer" l activité du Player est disponible pour les versions 4.x. Cette fonction a été ajoutée par les concepteurs pour permettre aux utilisateurs de récupérer facilement des données en JavaScript concernant les changements d état du lecteur ("Lecture", "Stop", etc.). Pour activer le plug-in, il est indispensable d ajouter la variable "tracecall" dans le paramètre "flashvars" de l animation : flashvars="&tracecall=xttrace" Ajout de la méthode "xttrace" "xttrace" est le nom de la méthode principale du plug-in. A chaque action d un utilisateur sur le lecteur, la fonction "tracecall" réagit et appelle notre méthode "xttrace" permettant la génération de hits de type Rich media. Il est nécessaire d ajouter un bloc de code JavaScript contenant la fonction "xttrace" au dessus de chaque animation à «tracer». <script type="text/javascript"> function xttrace(str){ xthitjw ('player', null, str);} </script> player : identifiant du player (doit correspondre au paramètre ID de l animation) null : ne doit pas être modifier str : ne doit pas être modifier Vous devez ajouter autant de fonctions "xttracex" qu il y a de lecteurs JW à mesurer (avec x correspondant au numéro de lecteur). 16

19 Annexes Exemple n 1 : votre code source contient un lecteur dont l identifiant est "player1". Dans ce cas, il faut ajouter le bloc suivant au dessus du code de l objet FLASH concerné : <script type="text/javascript"> function xttrace(str){ xthitjw ('player1', null, str);} </script> Puis insérer la ligne suivante dans le paramètre "flashvars" de l animation : &tracecall=xttrace Exemple n 2 : votre code source contient deux lecteurs dont le premier identifiant est "player1" et le deuxième "player2 ". Dans ce cas, il faut ajouter le bloc suivant au dessus du premier objet FLASH : <script type="text/javascript"> function xttrace(str){ xthitjw ('player1', null, str);} </script> Puis insérer la ligne suivante dans le paramètre "flashvars" de la première animation : &tracecall=xttrace Puis ajouter le bloc suivant au dessus du deuxième objet FLASH : <script type="text/javascript"> function xttrace2(str){ xthitjw ('player2', null, str);} </script> Puis insérer la ligne suivante dans le paramètre "flashvars" de la deuxième animation : &tracecall=xttrace2 EXEMPLES D IMPLEMENTATION Cas n 1 : utilisation d un constructeur JavaScript pour le déploiement d un player. Il s'agit de déclarer une variable JavaScript appelée "flashvarsat" qui va contenir les valeurs du Rich media. <script type="text/javascript"> function xttrace(str){ xthitjw ('player1', null, str);} </script> <script language="javascript"> var flashvarsat=""; flashvarsat +="&xttype="; //A flashvarsat +="&xtplayer="; //A flashvarsat +="&xtn2="; //B flashvarsat +="&xtrichname="; //C flashvarsat +="&xtclink="; //C flashvarsat +="&xtrefresh="; //F flashvarsat +="&xtduration="; //G flashvarsat +="&xtquality="; //I flashvarsat +="&xtstream="; //J flashvarsat +="&xtlocation="; //K flashvarsat +="&xtmode="; //L flashvarsat +="&xtsize="; //M flashvarsat +="&xtextension="; //N flashvarsat +="&tracecall=xttrace"; //Call to xttracex method //Construction of the animation var so = new SWFObject("PathPlayer/player.swf", "player1", "460", "120", "7", "#FFFFFF"); //Addition of the «flashvarsat» variable to the animation s «flashvar» parameter so.addparam("flashvars", "file=pathfile/file.extension" +flashvarsat); so.write("flashcontent"); </script> Cas n 2 : insertion directe du player dans le code source de la page (version HTML). Le paramètre "flashvars" doit être ajouté à la fois dans une balise "PARAM" et dans la balise "EMBED". <script type="text/javascript"> function xttrace(str){ xthitjw ('player1', null, str);} 17

20 Guide de marquage Rich media </script> <object codebase=" 0,0,0" id="player1" classid="clsid:d27cdb6e-ae6d-11cf-96b " width="460" height="120"> <param name="movie" value="pathplayer/player.swf"/> <param name="flashvars" value="file=pathfile/file.extension&xttype=&xtn2=&xtrichname=&xtclink=&a mp;xtrefresh=&xtduration=&xtplayer=&xtquality=&xtstream=&xtlocation= &xtmode=&xtsize=&xtextension= &tracecall=xttrace"/> <embed height="120" width="460" type="application/x-shockwave-flash" id="player1" src="pathplayer/player.swf" flashvars="file=pathfile/file.extension&xttype=&xtn2=&xtrichname=& &xtclink=&xtrefresh=&xtduration=&xtplayer=&xtquality=&xtstream=& amp;xtlocation= &xtmode=&xtsize=&xtextension=&tracecall=xttrace"> </embed> </object> Plug-in pour FlowPlayer FlowPlayer est un lecteur vidéo Flash. Ce player est facilement personnalisable et paramétrable via JavaScript ou un autre Flash. Voir le site officiel pour plus de détails : Le plug-in Rich media permet de collecter des données concernant les actions des utilisateurs sur le lecteur et de générer des hits pour le Rich media. Le plug-in Rich media est composé d un fichier SWF : flowplayer.atrichmedia.swf ETAPE 1 : INSERTION DU LECTEUR FLASH FLOWPLAYER Placez le fichier Flash dans l arborescence de votre site. ETAPE 2 : AJOUT DU FICHIER FLOWPLAYER.ATRICHMEDIA.SWF Ajoutez ensuite le plug-in au lecteur. ETAPE 3 : INTEGRATION DES VARIABLES RICH MEDIA Le but est ici de renseigner la plupart des valeurs nécessaires à la fonction "xt_rm(a,b,c,d,e,f,g,h,i,j,k,l,m,n)" utilisée pour le marquage Rich media classique. Les variables Rich media standards ont été renommées. Pour voir le détail des variables consultez le tableau disponible dans la section Plug-in pour balises audio et video HTML5 (Etape 3). Ajout d'une playlist Il existe différentes méthodes d insertion de clip dans le lecteur. Pour des raisons techniques liées à la collecte d informations, les médias doivent être ajoutés sous forme de «playlist». Une «playlist» FlowPlayer se construit en JavaScript ; des exemples d implémentation sont disponibles à cette adresse : Cet objet permet de passer des propiétés personnalisées pour chaque media, qui seront ensuite récupérées par le plug-in AT lors de la lecture. Ajout du plug-in Un lecteur FlowPlayer se déploie facilement grâce, entre autre, à un constructeur JavaScript : <script> $f("player", "Player/flowplayer swf", {}); </script> Une «playlist» doit être déclarée en tant qu objet puis passée dans le troisième paramètre du constructeur : $f("player", "Player/flowplayer swf", { playlist:[{ url: 'Videos/my_video.flv', xttype: 'video', xtn2: '', xtrichname: 'Video::Label', xtclink: '', xtrefresh: '5', 18

21 Annexes xtduration: '20', xtquality: '1', xtstream: '1', xtlocation: 'int', xtmode: 'clip', xtsize: '1701', xtextension: '7' } ]} ); Le plug-in Rich media doit également être ajouté en tant qu objet, à la suite de l objet «playlist» : plugins: { ATRichmedia: { url: 'Plugin_Richmedia/flowplayer.ATRichmedia.swf', xtplayer: '1' } } La variable «xtplayer» correspond à l identifiant du lecteur. Elle est utile dans le cas d une utilisation de plusieurs lecteurs sur la même page. EXEMPLE D'IMPLEMENTATION <!-- this A tag is where your Flowplayer will be placed. it can be anywhere --> <a style="display:block;width:520px;height:330px" id="player" ></a> <script> $f("player", "Player/flowplayer swf", { playlist:[ { url: 'Videos/my_video.flv', xttype: 'video', xtn2: '', xtrichname: 'Video::Label', xtclink: '', xtrefresh: '5', xtduration: '20', xtquality: '1', xtstream: '1', xtlocation: 'int', xtmode: 'clip', xtsize: '1701', xtextension: '7' }], plugins: { ATRichmedia: { url: 'Plugin_Richmedia/flowplayer.ATRichmedia.swf', xtplayer:'1' }, controls: { url: 'Player/flowplayer.controls.swf', stop: true } } }); </script>... <script type="text/javascript"> <!-- xtnv = document; //parent.document or top.document or document xtsd = " xtsite = "xxxx"; xtn2 = ""; // level 2 site ID xtpage = "content_page"; //page name (with the use of :: to create chapters) xtdi = ""; //implication degree //--> </script> <script type="text/javascript" src="scripts/xtcore.js"></script> 19

22 Guide de marquage Rich media 20