Le Guide du marquage Streaming

Transcription

1 Le Guide du marquage Streaming Médiamétrie-eStat Buropolis, Bât , route des Dolines Sophia Antipolis Valbonne Tél : Fax : support-pro@mediametrie-estat.com

2 Principe de fonctionnement de la mesure du streaming Le marqueur unique permet également de mesurer la fréquentation des flux audio et/ou vidéo streamés ou en «progressive download». Le principe est le suivant : La page HTML permettant de diffuser un contenu audio et/ou vidéo doit contenir le marqueur Médiamétrie-eStat qui permet de mesurer le trafic du streaming et du site web. Le marqueur Médiamétrie-eStat pour le streaming est directement dans la page web. Une action sur le flux streamé va déclencher la mesure. Figure 1 Exemple : Fonctionnement Général Médiamétrie-eStat mesure et collecte les données concernant la consommation du flux streamé par les internautes ainsi que la fréquentation Internet. Syntaxe VOTRE SYNTAXE DE MARQUEUR STREAMING estat --> <script language="javascript"> var _PJS=0; var _cmsjs=0; <SCRIPT LANGUAGE="JavaScript" SRC=" "> <script language="javascript"> if (_PJS) { estat_id.serial("serial"); if (_cmsjs) { estat_ms.reference( playerobject, 'type_lecteur', 'video_name', 'video_section1_name', 'video_section2_name', 'video_section3_name', 'video_section4_name', 'video_section5_name', 'video_genre'); /estat -->

3 Il est également possible d'utiliser plusieurs players simultanément : VOTRE SYNTAXE DE MARQUEUR STREAMING AVEC PLUSIEURS PLAYERS estat --> <script language="javascript"> var _PJS=0; var _cmsjs=0; <SCRIPT LANGUAGE="JavaScript" SRC=" "> <script language="javascript"> if (_PJS) { estat_id.serial("serial"); if (_cmsjs) { /* Lecteur 1 */ estat_ms.reference(playerobject1, 'type_lecteur', 'video1_name', 'video1_section1_name', 'video1_section2_name', 'video1_section3_name', 'video1_section4_name', 'video1_section5_name', 'video1_genre'); /* Lecteur 2 */ estat_ms.reference(playerobject2, 'type_lecteur', 'video2_name', 'video2_section1_name', 'video2_section2_name', 'video2_section3_name', 'video2_section4_name', 'video2_section5_name', 'video2_genre'); /* Lecteur N */ estat_ms.reference(playerobjectn, 'type_lecteur', 'videon_name', 'videon_section1_name', 'videon_section2_name', 'videon_section3_name', 'videon_section4_name', 'videon_section5_name', 'videon_genre'); /estat --> Il est OBLIGATOIRE de personnaliser le paramètre de la Rubrique, afin que la comptabilisation de votre fréquentation soit la plus fiable possible.

4 Paramètres du marqueur Le marqueur met à votre disposition deux variables pour la mesure et l analyse de la fréquentation Web : PAGE_MARQUEE et GROUPE_PAGES_MARQUEES. Lorsque vous renseignez ces variables, les noms choisis ne doivent pas excéder 64 caractères. Ils ne doivent comporter que des tirets ('-' ou '_') et les caractères de 0 à 9 et de a à z ( ou A à Z ). Leur interprétation est sensible à la casse, c est à dire que la page marquée "Accueil" est différente de la page marquée "ACCUEIL", elle-même différente de "accueil". Le nom du groupe de pages marquées doit être un libellé simple qui correspond au premier niveau de contenu du site. En ce qui concerne le paramètre de la page marquée, nous vous conseillons d utiliser les séparateurs de type ('-' ou '_') pour séparer plusieurs niveaux de contenus. Pour chaque Player présent dans la page, un appel à la fonction reference doit être réalisé si nous souhaitons l'auditer. La reference se fait avec les paramètres suivants : playerobject doit être l'objet javascript correspondant au Player, type_lecteur concerne le lecteur principal souhaité pour visualiser la vidéo. Le marqueur dispose d'un mécanisme d'auto-détection qui permettra de détecter le type de lecteur présent chez l'internaute et adaptera la mesure en conséquence. Ce paramètre a donc pour utilité d'informer le marqueur sur le type de lecteur par défaut à utiliser en cas d'échec de l'auto-détection, «WM» : Auto-détection avec Windows Media Player par défaut, «RM» : Auto-détection avec Real Media Player par défaut, «QT» : Auto-détection avec Quicktime par défaut, «MP» : Auto-détection avec Mplayer par défaut, «VLC» : Auto-détection avec VLC par défaut, «flash» : Auto-détection avec Lecteurs flash par défaut, «HTML5» : Auto-détection avec le lecteur du navigateur par défaut, «YT» : Auto-détection avec YouTube par défaut, : Auto-détection seule. video_name est le nom de la vidéo (à personnaliser) : ce paramètre est OBLIGATOIRE, video_section1_name - est le nom de la section de niveau 1 à laquelle appartient la vidéo (à personnaliser) : ce paramètre n est pas obligatoire mais fortement recommandé, video_section2_name est le nom de la section de niveau 2 à laquelle appartient la vidéo (à personnaliser) : ce paramètre n est pas obligatoire mais fortement recommandé. video_section3_name est le nom de la section de niveau 3 à laquelle appartient la vidéo (à personnaliser) : ce paramètre n est pas obligatoire mais fortement recommandé. video_section4_name - est le nom de la section de niveau 4 à laquelle appartient la vidéo (à personnaliser) : ce paramètre n est pas obligatoire mais fortement recommandé, video_section5_name est le nom de la section de niveau 5 à laquelle appartient la vidéo (à personnaliser) : ce paramètre n est pas obligatoire mais fortement recommandé. video_genre est le nom du genre auquel appartient la vidéo (à personnaliser) : ce paramètre n est pas obligatoire mais fortement recommandé. Le premier paramètre est obligatoire et doit être différent pour chaque appel. Les autres paramètres sont optionnels et ils peuvent prendre des valeurs différentes. Nous vous conseillons toutefois de renseigner tous les paramètres vous permettant de personnaliser vos vidéos ce qui facilitera ensuite vos analyses depuis l interface.

5 Cas des Players Flash La marquage d'un player flash est un peu particulier. En effet les players flash étant en grande partie des applications développées en interne ou par un tier, il n'existe pas aujourd'hui de standardisation protocole de communication permettant un échange d'informations sur l'état de la lecture entre la page HLTM et le player lui même. Cette communication est donc à intégrer manuellement a votre player Flash. Pour se faire, le marqueur se décompose en deux parties : 1. Code JavaScript Pour chaque Player Flash présent dans la page, un appel à la fonction reference doit être réalisé, comme pour les autres types de lecteurs, avec les paramètres suivants : playerobject doit être l'objet javascript correspondant au Player type_lecteur est le type du lecteur soit «flash» video_name est le nom de la vidéo video_section1_name est le nom de la section de niveau 1 à laquelle appartient la vidéo video_section2_name est le nom de la section de niveau 2 à laquelle appartient la vidéo video_section3_name est le nom de la section de niveau 3 à laquelle appartient la vidéo video_section4_name est le nom de la section de niveau 4 à laquelle appartient la vidéo video_section5_name est le nom de la section de niveau 5 à laquelle appartient la vidéo video_genre est le nom du genre auquel appartient la vidéo 2. Code ActionScript Ici, deux cas se présentent. Si le player Flash utilise les technologies Flash9 et ActionScript 3, merci de vous referer aux guides de marquages spécifiques a cette technologie en fonction de vos besoins: Besoin Documentation ActionScript3 et technologie NetStream ActionScript3 et technologie NetStream dont la classe est surchargée ActionScript3 et technologie FLVPlayback ActionScript3 et technologie Sound ActionScript3 et autres technologies Package_AS3_eStatNetStream_2_1.zip Package_AS3_eStatNetStreamTag_2_1.zip Package_AS3_eStatFLVPlaybackTag_2_1.zip Package_AS3_eStatSound_2_1.zip Package_AS3_eStatNativeFlashTag_2_1.zip Pour les Players Flash utilisant les technologies Flash8 et ActionScript 2, 3 classes (estatsound.as, estatnetstream.as et estatnativeflashtag.as) permettent de mesurer vos flux. Besoin ActionScript2 et technologie NetStream ActionScript2 et technologie Sound ActionScript2 et autres technologies Documentation Package_AS2_eStatNetStream_2_1.zip Package_AS2_eStatSound_2_1.zip Package_AS2_eStatNativeFlashTag_2_1.zip

6 Cas des Players SilverLight 2.0 Merci de vous referer aux guides de marquages spécifiques a cette technologie Besoin Silverlight 2.0 et technologie MediaElement Documentation Package_SL2_eStatMediaElement_2_1.zip

7 Intégration de players dans vos pages HTML Pour identifier un player présent dans vos pages HTML, le marqueur se base sur l objet javascript de ce player. Il est donc nécessaire de bien déclarer cet objet et surtout de permettre au marqueur de bien différencier les players fonctionnant éventuellement de façon concurrente. Ainsi, lorsque vous insérez un player dans une page, pensez à spécifier un champ ID unique dans la déclaration de l objet correspondant; ID qui vous permettra par la suite d'identifier l'objet javascript associé à voter player lors de la référence de celui-ci. DECLARATION DE L OBJET CORRESPONDANT AU PLAYER <OBJECT ID="your_id" CLASSID="your_classid" e.g.: CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6 NOTE : Si vous utilisez un player flash qui ne se trouve pas sur votre domaine n'oubliez pas de renseigner le paramètre <param name="allowscriptaccess" value="always" /> dans votre déclaration de l'objet vidéo afin que le lecteur puisse interagir avec le marqueur Cas du player HTML5 En HTML5, il est possible d'ajouter une vidéo sans faire appel à un objet player, mais en utilisant juste la balise <VIDEO> du HTML5. C'est le navigateur lui même qui va alors se charger de lire la vidéo à partir de son propre lecteur. La déclaration est par conséquent un peu différente et par la même simplifié. Toutefois la présence du champ ID est toujours nécessaire, comme détaillé précédemment. <VIDEO ID="your_id"... DECLARATION DE LA VIDEO Cas du player YouTube Pour intéragir avec le lecteur de YouTube il faut activer l'api javascript grâce au mot clef enablejsapi=1 dans l'adresse de la vidéo comme dans l'exemple suivant: DECLARATION DE LA VIDEO <object width="480" height="385" type="application/x-shockwave-flash" ID="your_id" data=" &playerapiid=your_id"> <param name="movie" value=" 1&playerapiid=your_id"></param> <param name="allowfullscreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src=" ID="your_id" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed> </object>

8 le mot clef playerapiid doit contenir la valeur de l'id de l'objet si vous utilisez la callback fournie par l'api javascript YouTube. Intégration de plusieurs players sur une même page Sur l ensemble de la page, les valeurs des Ids de vos différents lecteurs doivent être distinctes. Détection automatique du lecteur de flux adapté Dans le cas où le marqueur n'arrive pas à récupérer les informations nécessaires avec le lecteur que vous avez spécifié, ce dernier essayera alors de déterminer quels lecteurs l'internaute dispose et lequel est le plus adapté. Ainsi les informations seront récupérées avec celui-ci ce qui permet d'éviter une perte de mesure. Changement de flux sans rechargement de page Il est possible de changer les niveaux suite, par exemple à un changement de flux en appelant la fonction estat_ms.newstream(). VOTRE SYNTAXE DE MARQUEUR STREAMING AVEC PLUSIEURS PLAYERS estat --> <script language="javascript"> if (_cmsjs) { estat_ms.newstream (playerobject1, 'video1_name', 'video1_section1_name', 'video1_section2_name', 'video1_section3_name', 'video1_section4_name', 'video1_section5_name', 'video1_genre'); /estat --> Si le flux est lié à un compte différent (serial), voi ci la marche à suivre en plus du changement de niveaux : VOTRE SYNTAXE DE MARQUEUR STREAMING AVEC PLUSIEURS PLAYERS estat --> <script language="javascript"> estat_id.serial("nouveau_serial"); if (_cmsjs) { estat_ms.newstream(playerobject1, 'video1_name', 'video1_section1_name', 'video1_section2_name', 'video1_section3_name', 'video1_section4_name', 'video1_section5_name', 'video1_genre'); /estat -->

9 Comment ajouter des callbacks personnelles (utilisation avancée du marqueur) Qu est-ce qu une callback : Une callback est une fonction personnelle que vous pouvez faire appeler par le player jouant un flux streamé lors d un événement bien précis. Par exemple si vous souhaitez afficher un message lors d un clic sur le bouton stop du player, il faudra utiliser une callback. Médiamétrie-eStat vous offre la possibilité d appeler vos callbacks JavaScript personnelles. Il est donc possible d appeler le marqueur tout en lui spécifiant la fonction qu il devra appeler à son tour si l état du player change (stop, pause, play ) et la fonction qu il devra appeler s il advient un changement de position dans le flux streamé. Cette fonctionnalité est disponible pour l'ensemble des players Windows MediaPlayer mais pourra être déclinée pour les autres lecteurs selon vos besoins. Schéma de fonctionnement : Appel au marqueur standard Appel au marqueur avec callback Page Web Appel Marqueur Page Web <script > mycallback() Exécution de votre code Mesure Appel 2 Marqueur 1 Mesure

10 Utilisation Pour pouvoir utiliser les callbacks personnelles, l appel au marqueur doit être fait avec les mêmes fonctions «reference». La seule différence sera l'ajout de paramètres à ces fonctions permet de spécifier au marqueur les fonctions utilisateur (callbacks) à appeler en plus de l'exécution de la mesure standard. Les appels aux fonctions permettant l utilisation des callback personnelles doivent être faits avec les paramètres suivants : playerobject doit être l'objet javascript correspondant au Player, type_player est le type du lecteur video_name est le nom de la vidéo. (Ce paramètre est OBLIGATOIRE), video_section1_name est le nom de la section de niveau 1 à laquelle appartient la vidéo (ce paramètre n est pas obligatoire mais fortement recommandé) video_section2_name est le nom de la section de niveau 2 à laquelle appartient la vidéo (ce paramètre n est pas obligatoire mais fortement recommandé) video_section3_name est le nom de la section de niveau 3 à laquelle appartient la vidéo (ce paramètre n est pas obligatoire mais fortement recommandé) video_section4_name est le nom de la section de niveau 4 à laquelle appartient la vidéo (ce paramètre n est pas obligatoire mais fortement recommandé), video_section5_name est le nom de la section de niveau 5 à laquelle appartient la vidéo (ce paramètre n est pas obligatoire mais fortement recommandé) video_genre est le nom du genre auquel appartient la vidéo (ce paramètre n est pas obligatoire mais fortement recommandé) - (Ces 9 premiers paramètres sont les mêmes que pour les appels aux fonctions standard du marqueur) statechangecallback(param) représente l appel à la callback qui sera exécuté lors d un changement d état. Ce paramètre peut être une chaîne vide (pas de callback). positionchangecallback(params) représente l appel à la callback qui sera exécuté lors d un changement de position dans le flux streamé. Ce paramètre peut être une chaîne vide (pas de callback). (Pour plus de détails veuillez vous référer à l exemple ci-après)

11 VOTRE SYNTAXE DE MARQUEUR STREAMING AVEC CALLBACKS estat --> <script language="javascript"> var _PJS=0; var _cmsjs=0; <SCRIPT LANGUAGE="JavaScript" SRC=" "> <script language="javascript"> if (_PJS) { estat_id.serial("serial"); // personnalisation OBLIGATOIRE if (_cmsjs) { estat_ms.reference(playerobject, 'type_lecteur', 'video_name', 'video_section1_name', 'video_section2_name', 'video_section3_name', 'video_section4_name', 'video_section5_name', 'video_genre', 'statechangecallback(param)', 'positionchangecallback(params)'); /estat --> Comme décrit plus haut, il est possible de mesurer plusieurs flux sur une même page. Avec les fonctions d appel au marqueur avec callback, on peut en plus spécifier, pour chacun des players, les callbacks à appeler en cas d événement. Pour cela il suffit d effectuer plusieurs appels à la fonction reference pour chacun des N objets javascript correspondant à chaque Player avec les callbacks associées.

12 VOTRE SYNTAXE DE MARQUEUR STREAMING AVEC CALLBACKS POUR PLUSIEURS PLAYERS estat --> <script language="javascript"> var _PJS=0; var _cmsjs=0; <SCRIPT LANGUAGE="JavaScript" SRC=" "> <script language="javascript"> if (_PJS) { estat_id.serial("serial"); // personnalisation OBLIGATOIRE if (_cmsjs) { /* Vidéo 1 */ estat_ms.reference(playerobject1, 'type_lecteur', 'video1_name', 'video1_section1_name', 'video1_section2_name', 'video1_section3_name', 'video1_section4_name', 'video1_section5_name', 'video1_genre', 'statechangecallback(param)', 'positionchangecallback(params)'); /* Vidéo 2 */ estat_ms.reference(playerobject2, 'type_lecteur', 'video2_name', 'video2_section1_name', 'video2_section2_name', 'video2_section3_name', 'video2_section4_name', 'video2_section5_name', 'video2_genre', 'statechangecallback(param)', 'positionchangecallback(params)'); etc. /estat -->

13 Exemple d utilisation de callbacks L exemple suivant met en avant l utilisation des callbacks personnalisées. Dans cet exemple on souhaite afficher dans une zone de texte l état et la position du player : EXEMPLE D'UTILISATION DU MARQUEUR STREAMING AVEC CALLBACK <HTML> <BODY> // DECLARATION D UN PLAYER <OBJECT ID="myVideoID" NAME="myVideoNAME" CLASSID="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" WIDTH="320" HEIGHT="302" TYPE="application/x-ms-wmp"> <PARAM NAME="AutoStart" VALUE="false"> <PARAM NAME="SRC" VALUE="test.mpeg"> <PARAM NAME="URL" VALUE="test.mpeg"> <EMBED TYPE="application/x-mplayer2" PLUGINSPAGE=" prd=windows&sbp=mediaplayer&ar=media&sba=plugin&" NAME="playerObjectWMP" SRC="test.mpeg" WIDTH="320" HEIGHT="302" ShowControls="1" ShowDisplay="0" ShowStatusBar="0"> </EMBED> </OBJECT> <!-- Sur l ensemble de la page, les valeurs des attributs ID doivent être distinctes. <BR> <TEXTAREA NAME=mytextarea1 COLS=78 ROWS=15></TEXTAREA> // DEFINITION DES CALLBACKS <script language="javascript"> function WM_onPlayStateChange_cb(playerObject){ // Exemple de CODE PERSO (changement d état) mytextarea1.value += '[WMPlayer] playstate:' + playerobject.playstate + '\n'; function WM_onPositionChange_cb(playerObject){ // Exemple de CODE PERSO (changement de position) mytextarea1.value += '[WMPlayer] new:' + parseint(playerobject.currentposition,10) + '\n'; // MARQUEUR STREAMING + CALLBACK <script language="javascript"> <! var _PJS=0; var _cmsjs=0; <SCRIPT LANGUAGE="JavaScript" SRC=" "> <script language="javascript"> if (_PJS) { estat_id.serial("serial"); if (_cmsjs) { /* Windows Media Player With CallBack */ estat_ms.reference( document.getelementbyid('myvideoid'), 'WM', 'video_test', 'my_section1', 'my_section2', 'my_section3', 'my_section4', 'my_section5','genre', 'WM_onPlayStateChange_cb(document.getElementById('myVideoID'))', 'WM_onPositionChange_cb(document.getElementById('myVideoID'))' ); </BODY> </HTML>

14 Compatibilité avec les applications Le tableau ci-dessous fait un bilan de la compatibilité du marqueur avec les différentes applications de streaming. Pour rappel, il existe deux types de mesure : soit ce sont les actions de l internaute sur le player qui vont déclencher les mesures (méthode événementielle), soit les mesures sont lancées sur des intervalles de temps régulier quel que soit l état du player associé (méthode périodique). Player Windows Media Player Compatible avec le marqueur OUI Méthode Événementielle et Périodique Real Audio-Vidéo OUI Événementielle et Périodique QuickTime OUI Événementielle et Périodique Flash 8 ActionScript 2.0 ou supérieur Balise video HTML5 OUI OUI Événementielle et Périodique Événementielle et Périodique YouTube OUI Événementielle et Périodique Compatible avec les callbacks personnelles OUI NON NON NON NON NON Il est important de signaler que la déclaration de votre player au sein de votre page HTML impactera directement sa compatibilité avec les différents navigateurs utilisés par les internautes et en conséquent votre qualité de service et la qualité de la mesure du marqueur streaming. Nous vous conseillons de déclarer vos players RealPlayer et QuickTime en utilisant les balises <Object>/<Embed> plutôt que de les déclarer en utilisant seulement les balises <Object>, ce afin d'améliorer la qualité de rendu et de mesure sur les anciens navigateurs.