Implementação da análise de vídeo no Adobe Launch

Última atualização em 2023-10-31

Descrição


Ambiente

Este artigo fornece etapas para implementar o rastreamento de vídeo do YouTube no Adobe Launch usando o SDK do Media Heartbeat.



Problema/Sintomas


Pré-requisitos

  1. Você tem uma implementação ativa do Adobe Launch.
  2. O conjunto de relatórios está ativado para a Coleção de mídia.
  3. O conjunto de relatórios é mapeado para a empresa de logon correta do Analytics no Adobe Experience Cloud.
  4. Você tem direitos de publicação no Adobe Launch.
  5. Você está familiarizado com a interface do usuário do Adobe Launch e como ela funciona.

Resolução

ETAPA 1: Criar nova regra

Crie uma nova regra na propriedade do Adobe Launch clicando no botão "Adicionar regra" na guia "Regras". Essa regra conterá a condição de evento para carregar o vídeo do YouTube e os scripts da API do iFrame do Video Analytics e do YouTube.

  • Especifique o nome da regra na caixa de texto Nome.

ETAPA 2: Adicionar eventos e/ou condições

Clique no botão + em Evento e condições para criar condições para iniciar o vídeo do YouTube. No meu exemplo, adicionei uma condição "Element Exists" (Elemento existe) para procurar um "player" div específico para iniciar o vídeo do YouTube.

ETAPA 3: Adicionar ações - Variáveis de configuração

Clique no botão + em Ações para criar um novo item de ação. Isso atuará como um único ponto de configuração para definir variáveis do Video Analytics. Usei alguns valores embutidos em código. No entanto, você pode usar elementos de dados para preencher essas variáveis.

  1. Selecionar "Núcleo" de Extensão lista suspensa.
  2. Selecionar "Custom Code" de Tipo de ação lista suspensa.
  3. Adicionar nome da ação em Nome texto.
  4. Selecione "Javascript" em Idioma.
  5. Marcar "Executar globalmente".
  6. Clique em "Abrir editor".
  7. Adicione o código e clique em Salvar. Atualize os valores de acordo com sua empresa e conjunto de relatórios.
(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'
        }
    };
})();

ETAPA 4: Adicionar ações Serviço de ID de visitante

O Media Analytics precisa de uma instância de Serviço de ID de visitante. Você precisaria baixar Serviço de ID de visitante código de Gerenciador de código na interface do Adobe Analytics.

Depois de fazer o download Serviço de ID de visitante clique no botão + em Ações para criar um novo item de ação, em seguida

  1. Selecionar "Núcleo" de Extensão lista suspensa.
  2. Selecionar "Custom Code" de Tipo de ação lista suspensa.
  3. Adicionar nome da ação em Nome texto.
  4. Selecione "Javascript" em Idioma.
  5. Marque "Executar globalmente".
  6. Clique em "Abrir editor".
  7. Na parte inferior, adicione o seguinte código e clique em Salvar.
var visitor = Visitor.getInstance("Experience Cloud ID", {
trackingServer: "tracking server", // same as s.trackingServer
trackingServerSecure: " tracking server " // same as s.trackingServerSecure
});

ETAPA 5: Adicionar ações - código Appmeasurement

O Media Analytics precisa de uma instância de Appmeasurement. Você precisaria baixá-lo de Gerenciador de código na interface do Adobe Analytics.

Depois de fazer o download do Appmeasurement clique no botão + em Ações para criar um novo item de ação, em seguida

  1. Selecionar "Núcleo" de Extensão lista suspensa.
  2. Selecionar "Custom Code" de Tipo de ação lista suspensa.
  3. Adicionar nome da ação em Nome texto.
  4. Selecione "Javascript" em Idioma.
  5. Marque "Executar globalmente".
  6. Clique em "Abrir editor".
  7. Adicionar Serviço de ID de visitante código.
  8. Na parte superior, adicione o seguinte código e clique em Salvar.
// 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")

ETAPA 6: Adicionar ações - Heartbeat código

Baixar Heartbeat SDK de https://github.com/Adobe-Marketing-Cloud/media-sdks/releases.

Depois de fazer o download do Heartbeat clique no botão + em Ações para criar um novo item de ação, em seguida

  1. Selecionar "Núcleo" de Extensão lista suspensa.
  2. Selecionar "Custom Code" de Tipo de ação lista suspensa.
  3. Adicionar nome da ação em Nome texto.
  4. Selecione "Javascript" em Idioma.
  5. Marque "Executar globalmente".
  6. Clique em "Abrir editor".
  7. Adicionar Serviço de ID de visitante código.
  8. Na parte inferior, adicione o seguinte código e clique em Salvar.
//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;

ETAPA 7: Adicionar ações - Código da API do YouTube IFrame

  1. Selecionar "Núcleo" de Extensão lista suspensa.
  2. Selecionar "Custom Code" de Tipo de ação lista suspensa.
  3. Adicionar nome da ação em Nome texto.
  4. Selecione "Javascript" em Idioma.
  5. Marque "Executar globalmente".
  6. Clique em "Abrir editor".
  7. Adicione o código a seguir e clique em Salvar.

// 2. Esse código carrega o Reprodutor do IFrame Código de API de forma assí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. A API chamará essa função quando o reprodutor de vídeo estiver pronto.

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

ETAPA 8: Adicionar HTML

Adicione o seguinte código no código HTML.

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

ETAPA 8: Publicar

Publique sua propriedade e teste.

Nesta página