Implementação do Video Analytics no Adobe Launch

Descrição

Ambiente

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

Problema/Sintomas


Pré-requisitos

Resolução

ETAPA 1: Criar nova regra

Crie uma nova regra na propriedade Adobe Launch clicando no botão "Adicionar regra" na guia "Regras". Essa regra conterá a condição do 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" 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 em + botão abaixo Ações para criar um novo item de ação. Isso atuará como um único ponto de configuração para configurar as variáveis do Video Analytics. Eu usei alguns valores codificados. No entanto, você pode usar elementos de dados para preencher essas variáveis.

1. Selecione "Núcleo" de Extensão menu suspenso.
2. Selecione "Código personalizado" de Tipo de ação menu suspenso.
3. Adicionar o nome da Ação em Nome caixa de texto.
4. Selecione "Javascript" em Idioma.
5. Verifique "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 usuário do Adobe Analytics.

Após o download Serviço de ID de visitante clique em + botão em Ações para criar um novo item de ação,

1. Selecione "Núcleo" de Extensão menu suspenso.
2. Selecione "Código personalizado" de Tipo de ação menu suspenso.
3. Adicionar o nome da Ação em Nome caixa de 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 do Appmeasurement

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

Depois de fazer o download da variável Appmeasurement clique em + botão em Ações para criar um novo item de ação,

1. Selecione "Núcleo" de Extensão menu suspenso.
2. Selecione "Código personalizado" de Tipo de ação menu suspenso.
3. Adicionar o nome da Ação em Nome caixa de 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/tree/master/sdks/js/libs.

Depois de fazer o download da variável Heartbeat clique em + botão em Ações para criar um novo item de ação,

1. Selecione "Núcleo" de Extensão menu suspenso.
2. Selecione "Código personalizado" de Tipo de ação menu suspenso.
3. Adicionar o nome da Ação em Nome caixa de 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. Selecione "Núcleo" de Extensão menu suspenso.
2. Selecione "Código personalizado" de Tipo de ação menu suspenso.
3. Adicionar o nome da Ação em Nome caixa de 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 IFrame Player Código da 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.

Recursos do Business.Adobe.com