Implementação da análise de vídeo no Adobe Launch
Este artigo fornece etapas para implementar o rastreamento de vídeo do YouTube no Adobe Launch usando o SDK do Media Heartbeat.
Descrição description
Ambiente
Analytics
Problema/Sintomas
Implementação da análise de vídeo no Adobe Launch
Pré-requisitos
- Você tem uma implementação ativa do Adobe Launch.
- O conjunto de relatórios está ativado para a Coleção de mídia.
- O conjunto de relatórios é mapeado para a empresa de logon correta do Analytics no Adobe Experience Cloud.
- Você tem direitos de publicação no Adobe Launch.
- Você está familiarizado com a interface do usuário do Adobe Launch e como ela funciona.
Resolução resolution
Etapa 1: Criar nova regra
Crie uma nova regra na propriedade do Adobe Launch clicando no botão "Adicionar regra" na guia Regras. Esta regra conterá a condição de evento para carregar o vídeo do YouTube e os scripts da API do YouTube iFrame do Video Analytics.
- 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. Por exemplo, você adicionou uma condição "Element Exists" (Elemento existe) para procurar um reprodutor 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. Você usou alguns valores codificados. No entanto, você pode usar elementos de dados para preencher essas variáveis.
- Selecione Principal na lista suspensa Extensão.
- Selecione Código personalizado no menu suspenso Tipo de ação.
- Adicione o nome da ação na caixa de texto Nome.
- Selecione Javascript em Idioma.
- Marque Executar globalmente.
- Clique em "Abrir editor".
- 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'
}
};
})();
(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 ao Serviço de ID de Visitante
O Media Analytics precisa de uma instância do Serviço de ID de visitante. Você precisaria baixar o código do Serviço de ID de visitante do Gerenciador de código no Adobe Analytics
Depois de baixar o código do Serviço de ID de visitante, clique no botão + em ações para criar um novo item de ação e, em seguida,
- Selecione Principal na lista suspensa Extensão.
- Selecione Código personalizado no menu suspenso Tipo de ação.
- Adicione o nome da ação na caixa de texto Nome.
- Selecione Javascript em Idioma.
- Marque Executar globalmente.
- Clique em "Abrir editor".
- 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 do Appmeasurement. Você precisaria baixá-lo do Gerenciador de código na interface do Adobe Analytics.
Depois de baixar o código Appmeasurement, clique no botão + em ações para criar um novo item de ação e, em seguida,
- Selecione Principal na lista suspensa Extensão.
- Selecione Código personalizado no menu suspenso Tipo de ação.
- Adicione o nome da ação na caixa de texto Nome.
- Selecione Javascript em Idioma.
- Marque Executar globalmente.
- Clique em "Abrir editor".
- Adicionar o código do Serviço de ID do visitante.
- 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)
/<b></b><b></b> VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js <b></b><b></b>/
s.visitor=Visitor.getInstance("Experience Cloud ID")
ETAPA 6: Adicionar Ações - Código do Heartbeat
Baixe o SDK do Heartbeat em https://github.com/Adobe-Marketing-Cloud/media-sdks/blob/master/sdks/js/2.x/libs/MediaSDK.min.js.
Depois de baixar o código do Heartbeat, clique no botão + em ações para criar um novo item de ação e, em seguida,
- Selecione Principal na lista suspensa Extensão.
- Selecione Código personalizado no menu suspenso Tipo de ação.
- Adicione o nome da ação na caixa de texto Nome.
- Selecione Javascript em Idioma.
- Marque a opção "Executar globalmente.
- Clique em "Abrir editor".
- Adicionar o código do Serviço de ID do visitante.
- 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 de API do YouTube IFrame
- Selecione Principal na lista suspensa Extensão.
- Selecione Código personalizado no menu suspenso Tipo de ação.
- Adicione o nome da ação na caixa de texto Nome.
- Selecione Javascript em Idioma.
- Marque Executar globalmente.
- Clique em "Abrir editor".
- Adicione o código a seguir e clique em salvar.
- Esse código carrega o código da API do IFrame Player 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);
- Esta função cria um
<iframe>(e YouTube player) após o download do código da 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
}
});
}
- A API chamará essa função quando o reprodutor de vídeo estiver pronto.
function onPlayerReady(event) {
metaDataLoaded = true;
player.playVideo();
- A API chama essa função quando o estado do player muda. A função indica que, ao reproduzir um vídeo (estado=1), o reprodutor deve ser reproduzido por seis segundos e depois parar.
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 9: Publish
Publish sua propriedade e teste.