Implementación de Video Analytics en Adobe Launch
Este artículo proporciona los pasos para implementar el seguimiento de vídeo de YouTube en Adobe Launch mediante el SDK de Media Heartbeat.
Descripción description
Entorno
Analytics
Problema/Síntomas
Implementación del análisis de vídeo en Adobe Launch
Requisitos previos
- Tiene una implementación de Launch de Adobe activa.
- El grupo de informes está habilitado para la recopilación de medios.
- El grupo de informes está asignado a la empresa de inicio de sesión de Analytics correcta en Adobe Experience Cloud.
- Tiene derechos de publicación en Adobe Launch.
- Está familiarizado con la interfaz de usuario de Adobe Launch y con cómo funciona.
Resolución resolution
Paso 1: Crear nueva regla
Cree una nueva regla en su propiedad de Launch de Adobe haciendo clic en el botón "Agregar regla" de la pestaña Reglas. Esta regla contendrá la condición de evento para cargar el vídeo de YouTube y los scripts de API de Video Analytics y YouTube iFrame.
- Especifique el nombre de la regla en el cuadro de texto Nombre.
Paso 2: Agregar eventos o condiciones
Haga clic en el botón + en Evento y condiciones para crear las condiciones necesarias para iniciar el vídeo de YouTube. Por ejemplo, ha añadido una condición Element Exists para buscar un reproductor div específico para iniciar el vídeo de YouTube.
PASO 3: agregar acciones - variables de configuración
Haga clic en el botón + en acciones para crear un nuevo elemento de acción. Esto actuará como un único punto de configuración para configurar variables de Video Analytics. Ha utilizado algunos valores codificados. Sin embargo, puede utilizar elementos de datos para rellenar estas variables.
- Seleccione Principal de la lista desplegable Extensión.
- Seleccione Código personalizado de la lista desplegable Tipo de acción.
- Agregue el nombre de la acción en el cuadro de texto Nombre.
- Seleccione Javascript en Idioma.
- Marque Ejecutar globalmente.
- Haga clic en "Abrir editor".
- Añada el código y haga clic en guardar. Asegúrese de actualizar los valores según su compañía y grupo de informes.
(function() { 'use strict';
// Export symbols.
window.Configuration = {
PLAYER: {
NAME: 'sample player name'
//VIDEO_ID: 'sample video id',
//VIDEO_NAME: sample video name'
},
VISITOR: {
MARKETING_CLOUD_ORG_ID: 'experience cloud ID',
TRACKING_SERVER: 'tracking server',
DPID: '',
DPUUID: ''
},
APP_MEASUREMENT: {
RSID: 'report suite id',
TRACKING_SERVER: 'tracking server',
PAGE_NAME: 'page name',
CHAR_SET: 'UTF-8'
},
HEARTBEAT: {
TRACKING_SERVER: 'heartbeat tracking server',
PUBLISHER: 'publisher id',
CHANNEL: 'channel',
OVP: 'ovp name',
SDK: 'sgk version',
SSL: 'false',
DEBUG: 'true'
}
};
})();
(function() { 'use strict';
// Export symbols.
window.Configuration = {
PLAYER: {
NAME: 'sample player name'
//VIDEO_ID: 'sample video id',
//VIDEO_NAME: sample video name'
},
VISITOR: {
MARKETING_CLOUD_ORG_ID: 'experience cloud ID',
TRACKING_SERVER: 'tracking server',
DPID: '',
DPUUID: ''
},
APP_MEASUREMENT: {
RSID: 'report suite id',
TRACKING_SERVER: 'tracking server',
PAGE_NAME: 'page name',
CHAR_SET: 'UTF-8'
},
HEARTBEAT: {
TRACKING_SERVER: 'heartbeat tracking server',
PUBLISHER: 'publisher id',
CHANNEL: 'channel',
OVP: 'ovp name',
SDK: 'sgk version',
SSL: 'false',
DEBUG: 'true'
}
};
})();
PASO 4: agregar acciones al servicio de ID de visitante
Media Analytics necesita una instancia del servicio de ID de visitante. Debe descargar el código del servicio de ID de visitante desde el Administrador de códigos en Adobe Analytics
Una vez descargado el código del servicio de ID de visitante, haga clic en el botón + en acciones para crear un nuevo elemento de acción y, a continuación,
- Seleccione Principal de la lista desplegable Extensión.
- Seleccione Código personalizado de la lista desplegable Tipo de acción.
- Agregue el nombre de la acción en el cuadro de texto Nombre.
- Seleccione Javascript en Idioma.
- Marque Ejecutar globalmente.
- Haga clic en "Abrir editor".
- En la parte inferior, añada el siguiente código y haga clic en guardar.
var visitor = Visitor.getInstance("Experience Cloud ID", {
trackingServer: "tracking server", // same as s.trackingServer
trackingServerSecure: " tracking server " // same as s.trackingServerSecure
});
PASO 5: Agregar acciones - Código de Appmeasurement
Media Analytics necesita una instancia de Appmeasurement. Debe descargarlo desde el Administrador de códigos en la interfaz de usuario de Adobe Analytics.
Una vez descargado el código de Appmeasurement, haga clic en el botón + en acciones para crear un nuevo elemento de acción y, a continuación,
- Seleccione Principal de la lista desplegable Extensión.
- Seleccione Código personalizado de la lista desplegable Tipo de acción.
- Agregue el nombre de la acción en el cuadro de texto Nombre.
- Seleccione Javascript en Idioma.
- Marque Ejecutar globalmente.
- Haga clic en "Abrir editor".
- Añadir el código de servicio de ID de visitante.
- En la parte superior, añada el siguiente código y haga clic en guardar.
// Initialize AppMeasurement
var s_account="report suite id"
var s=s_gi(s_account)
/<b></b><b></b> VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js <b></b><b></b>/
s.visitor=Visitor.getInstance("Experience Cloud ID")
PASO 6: Agregar acciones - Código de Heartbeat
Descargar el SDK de Heartbeat de https://github.com/Adobe-Marketing-Cloud/media-sdks/blob/master/sdks/js/2.x/libs/MediaSDK.min.js.
Una vez descargado el código de Heartbeat, haga clic en el botón + en acciones para crear un nuevo elemento de acción y, a continuación,
- Seleccione Principal de la lista desplegable Extensión.
- Seleccione Código personalizado de la lista desplegable Tipo de acción.
- Agregue el nombre de la acción en el cuadro de texto Nombre.
- Seleccione Javascript en Idioma.
- Marque "Ejecutar globalmente.
- Haga clic en "Abrir editor".
- Añadir el código de servicio de ID de visitante.
- En la parte inferior, añada el siguiente código y haga clic en guardar.
//Create a local reference to the MediaHeartbeat classes
var MediaHeartbeat = ADB.va.MediaHeartbeat;
var MediaHeartbeatConfig = ADB.va.MediaHeartbeatConfig;
var MediaHeartbeatDelegate = ADB.va.MediaHeartbeatDelegate;
//Media Heartbeat initialization
var mediaConfig = new MediaHeartbeatConfig();
mediaConfig.trackingServer = Configuration.HEARTBEAT.TRACKING_SERVER;
mediaConfig.playerName = Configuration.PLAYER.NAME;
mediaConfig.channel = Configuration.HEARTBEAT.CHANNEL;
mediaConfig.debugLogging = Configuration.HEARTBEAT.DEBUG;
mediaConfig.appVersion = Configuration.HEARTBEAT.SDK;
mediaConfig.ssl = Configuration.HEARTBEAT.SDK;
mediaConfig.ovp = Configuration.HEARTBEAT.OVP;
// Implement the MediaHeartbeatDelegate protocol.
var mediaDelegate = new MediaHeartbeatDelegate();
// Initialize
var appMeasurement = new AppMeasurement();
appMeasurement.visitor = visitor;
appMeasurement.trackingServer = Configuration.APP_MEASUREMENT.TRACKING_SERVER;
appMeasurement.account = Configuration.APP_MEASUREMENT.RSID;
appMeasurement.pageName = Configuration.APP_MEASUREMENT.PAGE_NAME;
appMeasurement.charSet = Configuration.APP_MEASUREMENT.CHAR_SET;
var contextData = {
pageURL: document.URL,
isUserLoggedIn: "false",
tvStation: "Sample TV station",
programmer: "Khurshid Alam"
};
var mediaInfo;
var videostarted = false;
var metaDataLoaded = false;
PASO 7: Agregar acciones: código de API IFrame de YouTube
- Seleccione Principal de la lista desplegable Extensión.
- Seleccione Código personalizado de la lista desplegable Tipo de acción.
- Agregue el nombre de la acción en el cuadro de texto Nombre.
- Seleccione Javascript en Idioma.
- Marque Ejecutar globalmente.
- Haga clic en "Abrir editor".
- Agregue el siguiente código y haga clic en guardar.
- Este código carga el código de API del reproductor IFrame de forma asíncrona.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')0;
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
- Esta función crea un iframe
<>(y un reproductor de YouTube) después de que se descargue el código de la API.
var player;
function onYouTubeIframeAPIReady() {
console.log("onYouTubeIframeAPIReady called...");
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'xWYHvIjvMnY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
'onPlaybackRateChange': onPlayerPlaybackRateChange,
'onError': onPlayerError
}
});
}
- La API invocará esta función cuando el reproductor de vídeo esté listo.
function onPlayerReady(event) {
metaDataLoaded = true;
player.playVideo();
- La API llama a esta función cuando cambia el estado del reproductor. La función indica que, cuando se reproduce un vídeo (estado=1), el reproductor debe reproducirse durante seis segundos y, a continuación, detenerse.
function onPlayerStateChange(event) {
switch (event.data){
case YT.PlayerState.PLAYING: console.log("\*\*\*HB Playing");
if(metaDataLoaded){
if (Math.floor(event.target.getCurrentTime()) == 0) {
console.log("\*\*\*HB Start");
MediaHeartbeat = ADB.va.MediaHeartbeat;
mediaInfo = MediaHeartbeat.createMediaObject(
event.target.getVideoData().title,
event.target.getVideoData().video_id,
Math.floor(event.target.getDuration()),
MediaHeartbeat.StreamType.VOD
);
MediaHeartbeat = new MediaHeartbeat(mediaDelegate, mediaConfig, appMeasurement);
mediaDelegate.getCurrentPlaybackTime = function() {
return Math.floor(event.target.getCurrentTime());
};
MediaHeartbeat.trackSessionStart(mediaInfo, contextData);
MediaHeartbeat.trackPlay();
videostarted = true;
} else {
console.log("\*\*\*HB Play");
MediaHeartbeat.trackPlay();
}}
break;
case YT.PlayerState.PAUSED:
console.log("\*\*\*HB Pause");
MediaHeartbeat.trackPause();
break;
case YT.PlayerState.ENDED:
console.log("\*\*\*HB Ended");
MediaHeartbeat.trackComplete();
MediaHeartbeat.trackSessionEnd();
break;
case -1:
console.log("\*\*\*HB Unloaded");
MediaHeartbeat.trackComplete();
MediaHeartbeat.trackSessionEnd();
break;
}
}
function onPlayerPlaybackQualityChange(event) {
console.log("onPlayerPlaybackQualityChange: event.data: "+ event.data);
}
function onPlayerPlaybackRateChange(event) {
console.log("onPlayerPlaybackRateChange: event.data: "+ event.data);
}
function onPlayerError(event) {
console.log("onPlayerError: event.data: "+ event.data);
}
PASO 8: agregar HTML
Agregue el siguiente código en su código de HTML.
!-- 1. The iframe (and video player) will replace this div tag. --
div id="player"/divbr
PASO 9: Publish
Publish su propiedad y realice pruebas.