Implementación de Video Analytics en Adobe Launch

Descripción

Entorno

Este artículo proporciona los pasos para implementar el seguimiento de vídeo de YouTube en Adobe Launch mediante el SDK de Media Heartbeat.

Problema/Síntomas


Requisitos previos

Resolución

PASO 1: Crear nueva regla

Cree una regla nueva en la propiedad de Launch de Adobe haciendo clic en el botón "Agregar regla" en la pestaña "Reglas". Esta regla contendrá la condición de evento para cargar el vídeo de YouTube y los scripts de la API iFrame de Video Analytics y YouTube.

• 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 condiciones para iniciar el vídeo de YouTube. En mi ejemplo, he añadido la 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 + situado debajo de Acciones para crear un nuevo elemento de acción. Esto actuará como un único punto de configuración para configurar variables de Video Analytics. He utilizado algunos valores codificados. Sin embargo, puede utilizar elementos de datos para rellenar estas variables.

1. Seleccione "Principal" de Extensión desplegable .
2. Seleccione "Código personalizado" de Tipo de acción desplegable .
3. Agregar nombre de acción en Nombre cuadro de texto.
4. Seleccione "Javascript" en Idioma.
5. Marque "Ejecutar globalmente".
6. Haga clic en "Abrir editor".
7. Agregue el código y haga clic en Guardar. Asegúrese de actualizar los valores según su empresa y su 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'
        }
    };
})();

PASO 4: Agregar acciones Servicio de ID de visitante

Media Analytics necesita una instancia de Servicio de ID de visitante. Tendría que descargar Servicio de ID de visitante código de Administrador de códigos en la interfaz de usuario de Adobe Analytics.

Una vez descargado Servicio de ID de visitante código, haga clic en el botón + situado debajo de Acciones para crear un nuevo elemento de acción,

1. Seleccione "Principal" de Extensión desplegable .
2. Seleccione "Código personalizado" de Tipo de acción desplegable .
3. Agregar nombre de acción en Nombre cuadro de texto.
4. Seleccione "Javascript" en Idioma.
5. Marque "Ejecutar globalmente".
6. Haga clic en "Abrir editor".
7. 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. Tendría que descargarlo de Administrador de códigos en la interfaz de usuario de Adobe Analytics.

Una vez descargado el Appmeasurement código, haga clic en el botón + situado debajo de Acciones para crear un nuevo elemento de acción,

1. Seleccione "Principal" de Extensión desplegable .
2. Seleccione "Código personalizado" de Tipo de acción desplegable .
3. Agregar nombre de acción en Nombre cuadro de texto.
4. Seleccione "Javascript" en Idioma.
5. Marque "Ejecutar globalmente".
6. Haga clic en "Abrir editor".
7. Agregar Servicio de ID de visitante código.
8. 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)
********* VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js *********
s.visitor=Visitor.getInstance("Experience Cloud ID")

PASO 6: Agregar acciones - Heartbeat code

Descargar Heartbeat SDK de https://github.com/Adobe-Marketing-Cloud/media-sdks/tree/master/sdks/js/libs.

Una vez descargado el Heartbeat código, haga clic en el botón + situado debajo de Acciones para crear un nuevo elemento de acción,

1. Seleccione "Principal" de Extensión desplegable .
2. Seleccione "Código personalizado" de Tipo de acción desplegable .
3. Agregar nombre de acción en Nombre cuadro de texto.
4. Seleccione "Javascript" en Idioma.
5. Marque "Ejecutar globalmente".
6. Haga clic en "Abrir editor".
7. Agregar Servicio de ID de visitante código.
8. 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 de YouTube IFrame

1. Seleccione "Principal" de Extensión desplegable .
2. Seleccione "Código personalizado" de Tipo de acción desplegable .
3. Agregar nombre de acción en Nombre cuadro de texto.
4. Seleccione "Javascript" en Idioma.
5. Marque "Ejecutar globalmente".
6. Haga clic en "Abrir editor".
7. Agregue el siguiente código y haga clic en Guardar.

// 2. Este código carga la variable IFrame Player Código de API 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);

// 3. This function creates an iframe (and YouTube player)
//    after the API code downloads.

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
              }
       });
}

// 4. La API llamará a esta función cuando el reproductor de vídeo esté listo.

function onPlayerReady(event) {
       metaDataLoaded = true;
       player.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.

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 el código de HTML.

!-- 1. The iframe (and video player) will replace this div tag. --
div id="player"/divbr

PASO 8: Publicación

Publique la propiedad y la prueba.

Recursos de Business.Adobe.com