Le Guide du marquage Streaming

Transcription

Le Guide du marquage Streaming
Médiamétrie-eStat
Buropolis, Bât 3
1240, route des Dolines
Sophia Antipolis
06560 Valbonne
Tél : 04 92 38 38 20
Fax : 04 92 96 91 25
E-mail : [email protected]
Sommaire
Sommaire..............................................................................................................................................2
1.
Principe de fonctionnement de la mesure du streaming .............................................. 3
2.
Syntaxe.................................................................................................................................4
3.
Paramètres du marqueur...................................................................................................5
1.
Cas des Players Flash....................................................................................................... 6
2.
Cas des Players SilverLight 2.0........................................................................................6
3.
Intégration de players dans vos pages HTML................................................................6
3.1.
Cas du player HTML5........................................................................................................ 6
3.2.
Cas du player YouTube......................................................................................................7
4.
Intégration de plusieurs players sur une même page...................................................7
5.
Détection automatique du lecteur de flux adapté.......................................................... 7
6.
Changement de flux sans rechargement de page.........................................................8
7.
Mesure de vos flux dans le cadre de la catchup radio..................................................9
7.1.
La mesure des contenus "Live"........................................................................................ 9
7.2.
La mesure des contenus "Différés"..................................................................................9
8.
Comment ajouter des callbacks personnelles (utilisation avancée du marqueur) . 10
9.
Utilisation............................................................................................................................ 11
10.
Exemple d’utilisation de callbacks..................................................................................14
11.
Compatibilité avec les applications................................................................................15
1. 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.
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.
Figure 1 – Exemple : Fonctionnement Général
2. Syntaxe
VOTRE SYNTAXE DE MARQUEUR STREAMING

<script language="JavaScript">
<!-var _PJS=0;
var _cmsJS=0;
//-->
</script>
<SCRIPT LANGUAGE="JavaScript"
SRC=" http://prof.estat.com/js/SERIAL.js "></script>
<script language="javascript">
<!-if (_PJS) {
eStat_id.serial("SERIAL");
if (_cmsJS) {
eStat_ms.referenceUI( playerObject, 'type_lecteur', 'video_name', 'video_niveau3_name', 'video_niveau2_name'
, 'video_niveau1_name', 'video_niveau4_name', 'video_niveau5_name', 'video_genre');
}
}
//-->
</script>

Il est également possible d'utiliser plusieurs players simultanément :
VOTRE SYNTAXE DE MARQUEUR STREAMING AVEC PLUSIEURS PLAYERS

<!-var _PJS=0;
var _cmsJS=0;
//-->
</script>
<!-if (_PJS) {
if (_cmsJS) {
/* Lecteur 1 */
eStat_ms.referenceUI(playerObject1, 'type_lecteur', 'video1_name', 'video1_niveau1_name',
'video1_niveau2_name', 'video1_niveau3_name', 'video1_niveau4_name', 'video1_niveau5_name', 'video1_genre');
/* Lecteur 2 */
eStat_ms.referenceUI(playerObject2, 'type_lecteur', 'video2_name', 'video2_niveau1_name',
'video2_niveau2_name', 'video2_niveau3_name', 'video2_niveau4_name', 'video2_niveau5_name', 'video2_genre');
…
/* Lecteur N */
eStat_ms.referenceUI(playerObjectN, 'type_lecteur', 'videoN_name', 'videoN_niveau1_name',
'videoN_niveau2_name', 'videoN_niveau3_name', 'videoN_niveau4_name', 'videoN_niveau5_name', 'videoN_genre');
}
}
//-->
</script>

Il est OBLIGATOIRE de personnaliser le paramètre de la Rubrique, afin que la comptabilisation de
votre fréquentation soit la plus fiable possible.
3. 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 referenceUI doit être réalisé si nous
souhaitons l'auditer. La référence 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_niveau1_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_niveau2_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_niveau4_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_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.
1. Cas des Players Flash
Le 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 tiers, 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 HTML et le
player lui même.
Cette communication est donc à intégrer manuellement a votre player Flash.
Ici, deux cas se présentent. Si le player Flash utilise les technologies Flash9 et ActionScript 3, merci de vous
référer au guide de marquage spécifique a cette technologie :
Documentation
Besoin
Package_AS3_eStatNativeFlashTag.zip
ActionScript3
Pour les Players Flash utilisant les technologies Flash8 et ActionScript 2, une classe adaptée permet de
mesurer vos flux.
Documentation
Besoin
Package_AS2_eStatNativeFlashTag.zip
ActionScript2
2. Cas des Players SilverLight 2.0
Merci de vous référer aux guides de marquages spécifiques a cette technologie
Documentation
Besoin
Silverlight 2.0 et technologie
MediaElement
Package_SL2_eStatMediaElement.zip
3. 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é à votre player lors de la référence de
celui-ci.
DECLARATION DE L’OBJET CORRESPONDANT AU PLAYER
<OBJECT
ID="your_id"
CLASSID="your_classid" 
…
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
3.1. 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.
DECLARATION DE LA VIDEO
<VIDEO
ID="your_id"
...
3.2. Cas du player YouTube
Pour interagir 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="http://www.youtube.com/v/VIDEO_YOUTUBE_ID&hl=fr_FR&fs=1&version=3&enablejsapi=1
&playerapiid=your_id">
<param name="movie"
value="http://www.youtube.com/v/VIDEO_YOUTUBE_ID&hl=fr_FR&fs=1&version=3&enablejsapi=
1&playerapiid=your_id"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/VIDEO_YOUTUBE_ID&hl=fr_FR&fs=1" ID="your_id"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="480" height="385"></embed>
</object>
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.
4. 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.
5. 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.
6. 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.newStreamUI().
A savoir l'utilisation de cette méthode ré initialise la session de lecture. Cela créé donc une nouvelle lecture.

if (_cmsJS) {
eStat_ms.newStreamUI (playerObject1, 'video1_name', 'video1_niveau1_name', 'video1_niveau2_name',
'video1_niveau3_name', 'video1_niveau4_name', 'video1_niveau5_name', 'video1_genre');
}
//-->
</script>

Si le flux est lié à un compte différent (serial), voici la marche à suivre en plus du changement de niveaux :

eStat_id.serial("nouveau_serial");
if (_cmsJS) {
eStat_ms.newStreamUI(playerObject1, 'video1_name', 'video1_niveau1_name', 'video1_niveau2_name',
'video1_niveau3_name', 'video1_niveau4_name', 'video1_niveau5_name', 'video1_genre');
}
//-->
</script>

7. Mesure de vos flux dans le cadre de la catchup radio
Si vos données sont destinées à être utilisées pour les communiqués Catchup Radios diffusés par
Médiamétrie, vous devez respecter certaines étapes clés dans la mesure de vos flux.
La mesure de vos flux doit respecter des comportements spécifiques que ce soit pour mesurer des contenus
dits "Live" (webradio, webtv) ou des contenus dits "Différés" (podcasts, replay…).
Pour valider la mesure, il faut que la mesure se rapproche le plus possible de l'expérience utilisateur par
rapport au flux consommé Live ou Différé.
Les comportements attendus sont détaillés ci-après.
7.1. La mesure des contenus "Live"
La mesure doit respecter les comportements suivants :
- Pour chaque début de lecture, il faut créer une nouvelle session (cmsVI) et ce même si nous
sommes sur le même flux. Techniquement cela implique qu'il faut utiliser la fonction
eStat_ms.newStreamUI() à chaque fois que la lecture du flux est déclenchée (Bouton "Play",
"Unmute"). Cette méthode est détaillée dans le chapitre précédent.
- Si vous souhaitez modifier un niveau d'information dans la mesure, il faut également créer une
nouvelle session de lecture.
- Si le player propose des boutons permettant d'arrêter l'écoute du flux (Pause, Stop, Mute), le flux ne
doit plus être mesuré Cela se fait automatiquement lors de l'utilisation du bouton Stop ou Pause du
player.
- Le champ Genre (video_genre) doit être renseigné à "Live".
1.1. La mesure des contenus "Différés"
La mesure doit respecter les comportements suivants :
- Contrairement au "Live" lors de la mesure des contenus Différés, tant que l'on est sur le même flux,
la session doit être conservée. Que l'on fasse des actions Stop, Pause, ou Avance/Retour rapide
(Seek) l'identifiant de session ne change pas.
- Si lors de la lecture d'un flux, on propose de changer de flux, il faut recréer une nouvelle session.
- Si vous souhaitez modifier un niveau d'information dans la mesure, il faut par contre créer une
nouvelle session de lecture.
- Si le player propose des boutons permettant d'arrêter l'écoute du flux (Pause, Stop, Mute), le flux ne
doit plus être mesuré Cela devrait se faire automatiquement lors de l'utilisation du bouton Stop ou
Pause du player.
- Le champ Genre (video_genre) doit être renseigné avec une des valeurs suivantes : "Information",
"Sport", "Divertissement", "Musique", "Culture", "Vie Pratique", "Autres"
1. 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
Page Web
Appel
Marqueur
<script…>
…
myCallback()
…
</script>
Exécution de
votre code
2
Appel
Mesure
Marqueur
1
Mesure
2. Utilisation
Pour pouvoir utiliser les callbacks personnelles, l’appel au marqueur doit être fait avec les mêmes fonctions
« referenceUI ». 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_niveau1_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é)
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)
VOTRE SYNTAXE DE MARQUEUR STREAMING AVEC CALLBACKS

<!-var _PJS=0;
var _cmsJS=0;
//-->
</script>
<!-if (_PJS) {
eStat_id.serial("SERIAL"); // personnalisation OBLIGATOIRE
if (_cmsJS) {
eStat_ms.referenceUI(playerObject,
'type_lecteur',
'video_name',
'video_niveau1_name',
'video_genre',
'stateChangeCallBack(param)',
'positionChangeCallBack(params)');
}
}
//-->
</script>

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 referenceUI pour
chacun des N objets javascript correspondant à chaque Player avec les callbacks associées.
VOTRE SYNTAXE DE MARQUEUR STREAMING AVEC CALLBACKS POUR PLUSIEURS PLAYERS

<!-var _PJS=0;
var _cmsJS=0;
//-->
</script>
<!-if (_PJS) {
eStat_id.serial("SERIAL"); // personnalisation OBLIGATOIRE
if (_cmsJS) {
/* Vidéo 1 */
eStat_ms.referenceUI(playerObject1,
'type_lecteur',
'video1_name',
'video1_niveau1_name',
'video1_genre',
/* Vidéo 2 */
eStat_ms.referenceUI(playerObject2,
'type_lecteur',
'video2_name',
'video2_genre',
… etc.
}
}
//-->
</script>

1. 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>

<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="http://www.microsoft.com/isapi/redir.dll?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>
…

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';
}
</script>
…

<script language="Javascript">
<!—
var _PJS=0;
var _cmsJS=0;
//-->
</script>
<!-if (_PJS) {
if (_cmsJS) {
/* Windows Media Player With CallBack */
eStat_ms.referenceUI( document.getElementById('myVideoID')
, 'WM', 'video_test', 'my_niveau1', 'my_niveau2', 'my_niveau3', 'my_niveau4',
'my_niveau5','genre'
, 'WM_onPlayStateChange_cb(document.getElementById('myVideoID'))'
, 'WM_onPositionChange_cb(document.getElementById('myVideoID'))' );
}
}
//-->
</script>
</BODY>
</HTML>
2. 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
Compatible avec le
marqueur
Méthode
Windows Media
Player
OUI
Real Audio-Vidéo
OUI
QuickTime
OUI
Flash 8
ActionScript 2.0
ou supérieur
Balise video
HTML5
OUI
YouTube
OUI
Événementielle
et
Périodique
Événementielle
et
Périodique
Événementielle
et
Périodique
Événementielle
et
Périodique
Événementielle
et
Périodique
Événementielle
et
Périodique
OUI
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.

Le Guide du marquage Streaming

Transcription

Documents pareils

Anibal Cavaco Silva Tower of Belem/Tour de Bélem

Untitled

Formular Flugreisen

The Hello song

formulaire de demande - Togo Embassy in London

Demande d`un Extrait du Casier Judiciaire

Vidéo en ligne par JL Colas

Entry Form documentaries 2016

CSPNU, Banque UBS, IBAN: CH68 0027 9279 HU10 8696 0, Swift

inschrijvingskaart