Dokumentation

Implementieren von Videoanalysen in Adobe Launch

Last update: Tue Dec 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

In diesem Artikel werden Schritte zur Implementierung von YouTube-Video-Tracking in Adobe Launch mit Media Heartbeat SDK beschrieben.

Beschreibung description

Umgebung

Analytics

Problem/Symptome

Implementieren von Videoanalysen in Adobe Launch

Voraussetzungen

  1. Sie haben eine aktive Adobe Launch-Implementierung.
  2. Die Report Suite ist für die Mediensammlung aktiviert.
  3. Die Report Suite ist der richtigen Analytics-Unternehmensanmeldung in Adobe Experience Cloud zugeordnet.
  4. Sie verfügen über Veröffentlichungsrechte in Adobe Launch.
  5. Sie sind mit der Adobe Launch-Benutzeroberfläche und deren Funktionsweise vertraut.

Auflösung resolution

Schritt 1: Neue Regel erstellen

Erstellen Sie eine neue Regel in Ihrer Adobe-Launch-Eigenschaft, indem Sie auf Schaltfläche „Regel hinzufügen auf der Registerkarte Regeln klicken. Diese Regel enthält die Ereignisbedingung zum Laden des YouTube-Videos und der Videoanalyse- und YouTube iFrame-API-Skripte.

  • Geben Sie den Regelnamen im Textfeld Name an.

Schritt 2: Hinzufügen von Ereignissen und/oder Bedingungen

Klicken Sie unter Ereignis und Bedingungen auf die Schaltfläche +, um Bedingungen zum Starten des YouTube-Videos zu erstellen. Sie haben zum Beispiel ein Bedingungselement Vorhanden hinzugefügt, um nach einem bestimmten div-Player zum Starten des YouTube-Videos zu suchen.

SCHRITT 3: Aktionen hinzufügen - Konfigurationsvariablen

Klicken Sie auf die Schaltfläche + unter Aktionen , um ein neues Aktionselement zu erstellen. Dies dient als zentraler Konfigurationspunkt für die Einrichtung von Videoanalysevariablen. Sie haben einige hartcodierte Werte verwendet. Sie können jedoch Datenelemente verwenden, um diese Variablen auszufüllen.

  1. Wählen Sie Core aus der Dropdown-Liste Erweiterung aus.
  2. Wählen Sie Benutzerspezifischer Code aus der Dropdownliste Aktionstyp aus.
  3. Fügen Sie den Aktionsnamen in das Textfeld Name ein.
  4. Wählen Sie JavaScript unter Sprache aus.
  5. Aktivieren Sie global ausführen.
  6. Klicken Sie „Editor öffnen“.
  7. Fügen Sie den Code hinzu und klicken Sie auf Speichern . Stellen Sie sicher, dass Sie die Werte gemäß Ihrem Unternehmen und Ihrer Report Suite aktualisieren.
(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'
        }
    };
})();

SCHRITT 4: Hinzufügen von Aktionen zum Besucher-ID-Service

Media Analytics benötigt eine Instanz des Besucher-ID-Service. Dazu müssen Sie den Besucher-ID-Dienstcode aus dem Code-Manager in Adobe Analytics herunterladen

Nachdem Sie den Besucher-ID-Dienst-Code heruntergeladen haben, klicken Sie unter „Aktionen“ auf die Schaltfläche + , um ein neues Aktionselement zu erstellen, und dann

  1. Wählen Sie Core aus der Dropdown-Liste Erweiterung aus.
  2. Wählen Sie Benutzerspezifischer Code aus der Dropdownliste Aktionstyp aus.
  3. Fügen Sie den Aktionsnamen in das Textfeld Name ein.
  4. Wählen Sie JavaScript unter Sprache aus.
  5. Aktivieren Sie global ausführen.
  6. Klicken Sie „Editor öffnen“.
  7. Fügen Sie unten den folgenden Code hinzu und klicken Sie auf „Speichern“.
var visitor = Visitor.getInstance("Experience Cloud ID", {
trackingServer: "tracking server", // same as s.trackingServer
trackingServerSecure: " tracking server " // same as s.trackingServerSecure
});

SCHRITT 5: Hinzufügen von Aktionen - AppMeasurement-Code

Media Analytics benötigt eine Instanz von AppMeasurement. Sie müssen ihn aus dem Code-Manager in der Adobe Analytics-Benutzeroberfläche herunterladen.

Nachdem Sie den AppMeasurement-Code heruntergeladen haben, klicken Sie unter „Aktionen“ auf die Schaltfläche "+", um ein neues Aktionselement zu erstellen, und

  1. Wählen Sie Core aus der Dropdown-Liste Erweiterung aus.
  2. Wählen Sie Benutzerspezifischer Code aus der Dropdownliste Aktionstyp aus.
  3. Fügen Sie den Aktionsnamen in das Textfeld Name ein.
  4. Wählen Sie JavaScript unter Sprache aus.
  5. Aktivieren Sie global ausführen.
  6. Klicken Sie auf Editor öffnen“.
  7. Hinzufügen des Besucher-ID-Dienst-Codes.
  8. Fügen Sie oben den folgenden Code hinzu und klicken Sie auf „Speichern“.
// 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")

SCHRITT 6: Aktionen hinzufügen - Heartbeat-Code

Laden Sie Heartbeat SDK von https://github.com/Adobe-Marketing-Cloud/media-sdks/blob/master/sdks/js/2.x/libs/MediaSDK.min.js herunter.

Nachdem Sie den Heartbeat-Code heruntergeladen haben, klicken Sie unter „Aktionen“ auf die Schaltfläche + , um ein neues Aktionselement zu erstellen, und

  1. Wählen Sie Core aus der Dropdown-Liste Erweiterung aus.
  2. Wählen Sie Benutzerspezifischer Code aus der Dropdownliste Aktionstyp aus.
  3. Fügen Sie den Aktionsnamen in das Textfeld Name ein.
  4. Wählen Sie JavaScript unter Sprache aus.
  5. Aktivieren Sie „Global ausführen.
  6. Klicken Sie auf Editor öffnen“.
  7. Hinzufügen des Besucher-ID-Dienst-Codes.
  8. Fügen Sie unten den folgenden Code hinzu und klicken Sie auf „Speichern“.
//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;

SCHRITT 7: Aktionen hinzufügen - YouTube IFrame-API-Code

  1. Wählen Sie Core aus der Dropdown-Liste Erweiterung aus.
  2. Wählen Sie Benutzerspezifischer Code aus der Dropdownliste Aktionstyp aus.
  3. Fügen Sie den Aktionsnamen in das Textfeld Name ein.
  4. Wählen Sie JavaScript unter Sprache aus.
  5. Aktivieren Sie global ausführen.
  6. Klicken Sie auf Editor öffnen“.
  7. Fügen Sie den folgenden Code hinzu und klicken Sie auf „Speichern“.
  8. Dieser Code lädt den IFrame Player-API-Code asynchron.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')0;
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  • Diese Funktion erstellt einen < iframe >und YouTube-Player) nach dem Herunterladen des API-Codes.
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
              }
       });
}
  • Die API ruft diese Funktion auf, wenn der Video-Player bereit ist.
function onPlayerReady(event) {
       metaDataLoaded = true;
       player.playVideo();
  • Die API ruft diese Funktion auf, wenn sich der Status des Players ändert. Die Funktion gibt an, dass der Player beim Abspielen eines Videos (Status = 1) sechs Sekunden lang abspielen und dann anhalten soll.
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);
}

SCHRITT 8: HTML HINZUFÜGEN

Fügen Sie den folgenden Code in Ihren HTML-Code ein.

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

SCHRITT 9: Publish

Publish Ihre Eigenschaft und testen Sie sie.

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