Implementación de Video Analytics en Adobe Launch

Última actualización: 2023-10-31

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

  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

PASO 1: Crear nueva regla

Cree una nueva regla en la propiedad de Launch de Adobe haciendo clic en el botón "Agregar regla" en la pestaña "Reglas". Esta regla contiene la condición de evento para cargar 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: Añadir 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. En mi ejemplo, he añadido una condición "Element Exists" (El elemento existe) para buscar un "player" div específico para iniciar el vídeo de YouTube.

PASO 3: Agregar acciones: variables de configuración

Haga clic en el botón + 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 "Núcleo" de Extensión desplegable.
  2. Seleccione "Código personalizado" de Tipo de acción desplegable.
  3. Añadir nombre de la acción en Nombre cuadro de texto.
  4. Seleccione "Javascript" en Idioma.
  5. Marque "Ejecutar globalmente".
  6. Haga clic en "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'
        }
    };
})();

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 IU de Adobe Analytics.

Una vez descargado, Servicio de ID de visitante , haga clic en el botón + de Acciones para crear un nuevo elemento de acción, haga lo siguiente

  1. Seleccione "Núcleo" de Extensión desplegable.
  2. Seleccione "Código personalizado" de Tipo de acción desplegable.
  3. Añadir nombre de la 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 desde el Administrador de códigos en la IU de Adobe Analytics.

Una vez descargado el Appmeasurement , haga clic en el botón + de Acciones para crear un nuevo elemento de acción, haga lo siguiente

  1. Seleccione "Núcleo" de Extensión desplegable.
  2. Seleccione "Código personalizado" de Tipo de acción desplegable.
  3. Añadir nombre de la acción en Nombre cuadro de texto.
  4. Seleccione "Javascript" en Idioma.
  5. Marque "Ejecutar globalmente".
  6. Haga clic en "Abrir editor".
  7. Añadir 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 código

Descargar Heartbeat SDK desde https://github.com/Adobe-Marketing-Cloud/media-sdks/releases.

Una vez descargado el Heartbeat , haga clic en el botón + de Acciones para crear un nuevo elemento de acción, haga lo siguiente

  1. Seleccione "Núcleo" de Extensión desplegable.
  2. Seleccione "Código personalizado" de Tipo de acción desplegable.
  3. Añadir nombre de la acción en Nombre cuadro de texto.
  4. Seleccione "Javascript" en Idioma.
  5. Marque "Ejecutar globalmente".
  6. Haga clic en "Abrir editor".
  7. Añadir 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 IFrame de YouTube

  1. Seleccione "Núcleo" de Extensión desplegable.
  2. Seleccione "Código personalizado" de Tipo de acción desplegable.
  3. Añadir nombre de la acción en Nombre cuadro de texto.
  4. Seleccione "Javascript" en Idioma.
  5. Marque "Ejecutar globalmente".
  6. Haga clic en "Abrir editor".
  7. Añada el siguiente código y haga clic en Guardar.

// 2. Este código carga la variable Reproductor IFrame Código de API asincrónicamente.

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 invocará 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: Añadir un 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 8: Publicar

Publique la propiedad y pruebe.

En esta página