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

  1. Tiene una implementación de Launch de Adobe activa.
  2. El grupo de informes está habilitado para la recopilación de medios.
  3. El grupo de informes está asignado a la empresa de inicio de sesión de Analytics correcta en Adobe Experience Cloud.
  4. Tiene derechos de publicación en Adobe Launch.
  5. 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 la propiedad de Launch de Adobe haciendo clic en "Agregar regla" botón debajo de Reglas pestaña. Esta regla contiene la condición de evento para cargar el vídeo de YouTube y Video Analytics y Scripts de API de YouTube iFrame.

  • Especifique el nombre de la regla en el cuadro de texto Nombre.

Paso 2: Añadir eventos o condiciones

Haga clic en + 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 + 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.

  1. Seleccione Principal de la lista desplegable Extensión.
  2. Seleccione Código personalizado de la lista desplegable Tipo de acción.
  3. Agregue el nombre de la acción en el cuadro de texto Nombre.
  4. Seleccione Javascript en Idioma.
  5. Marque Ejecutar globalmente.
  6. Clic "Abrir editor".
  7. 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: Añadir 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,

  1. Seleccione Principal de la lista desplegable Extensión.
  2. Seleccione Código personalizado de la lista desplegable Tipo de acción.
  3. Agregue el nombre de la acción en el cuadro de texto Nombre.
  4. Seleccionar Javascript  en Idioma.
  5. Marque Ejecutar globalmente.
  6. Clic "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. 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,

  1. Seleccione Principal de la lista desplegable Extensión.
  2. Seleccione Código personalizado de la lista desplegable Tipo de acción.
  3. Agregue el nombre de la acción en el cuadro de texto Nombre.
  4. Seleccionar Javascript  en Idioma.
  5. Marque Ejecutar globalmente.
  6. Haga clic en "Abrir editor".
  7. Añadir el código de servicio de ID de visitante.
  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)
/<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,

  1. Seleccione Principal de la lista desplegable Extensión.
  2. Seleccione Código personalizado de la lista desplegable Tipo de acción.
  3. Agregue el nombre de la acción en el cuadro de texto Nombre.
  4. Seleccionar Javascript  en Idioma.
  5. Marque "Ejecutar globalmente.
  6. Haga clic en "Abrir editor".
  7. Añadir el código de servicio de ID de visitante.
  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 IFrame de YouTube

  1. Seleccione Principal de la lista desplegable Extensión.
  2. Seleccione Código personalizado de la lista desplegable Tipo de acción.
  3. Agregue el nombre de la acción en el cuadro de texto Nombre.
  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.
  8. 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 el reproductor de YouTube) después de descargar el código de 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: Añadir 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: Publicar

Publique la propiedad y pruebe.

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f