Wie kann man YouTube-Videos mit DTM nachverfolgen?

DTM ist ein Tool, mit dem Sie Dinge schneller erledigen können. Wir können HTML5-Videos mit ereignisbasierten Regeln in DTM nachverfolgen. Es hat jedoch keine Out-of-the-Box-Funktionalität, um Videos anderer Videoanbieter (Brightcove, YouTube, Vimeo, VideoJS, Flowplayer etc.) zu verfolgen.

Wenn jemand den Videodienst verwendet, der eine Art JavaScript-API hat (Brightcove, YouTube, Vimeo, VideoJS, Flowplayer usw.), können wir mithilfe von DTM den API-Code hinzufügen, um die verschiedenen Videoereignisse abzuhören. Es ist erforderlich, den benötigten Code in eine Seitenladeregel, eine App-Messung oder eine s_code-Datei zu laden (stellen Sie sicher, dass er an der richtigen Stelle geladen wird, d. h. oben oder unten auf der Seite). Dies richtet die API und/oder die Zuhörer ein, um die Videos zu verfolgen. Danach müssen wir festlegen, was wir beim Erfassen und Versenden der Videodaten tun wollen. Wir können die Implementierung des Medienmoduls verwenden, für die keine zusätzlichen Einstellungen in DTM erforderlich sind.

Bitte beachten Sie die folgenden Schritte zur Verfolgung des „YouTube-Videos“ über die Implementierung des Medienmoduls.

Schritt 1: YouTube-Videos lassen sich in einer Webseite entweder durch einen iframe oder einen Objekt-Tag einbetten.

Objekt einbetten: Betten Sie das Video auf Ihrer Webseite ein (mit eingeschaltetem API), z. B. http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer.

Hinweis: Stellen Sie sicher, dass Sie nicht zwei Tags mit derselben ID haben, aber achten Sie darauf, dass das Tag eine ID aufweist, die dem Playerapiid-Parameter entspricht

 

    <p>Sample YouTube in OBJECT embed tag</p>
     <object id="myytplayer" width="425" height="344" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
        <param name="movie" value="http://www.youtube.com/v/AhgtoQIfuQ4?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed id="myytplayer2" src="http://www.youtube.com/v/AhgtoQIfuQ4?fs=1&rel=0wcv8zQo9HyU&enablejsapi=1&playerapiid=myytplayer2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
    </object>

Iframe einbetten: Einbetten von Video in einem iframe auf Ihrer Webseite (mit eingeschaltetem API), z. B. http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1

Hinweis: Ein "id" muss dem iframe bereitgestellt werden. Weitere Hilfe finden Sie im untenstehenden Code.

<p>YouTube  video in iframe embed tag</p>
<iframe id="player1" frameborder="0" width="425" height="344" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/wcv8zQo9HyU?enablejsapi=1">

Schritt 2: Fügen Sie das Adobe Analytics-Media-Tracking-Modul zu Ihrem AppMeasurement (oder ähnlichem) hinzu. Es sollte nach dem Config-Abschnitt und vor „Ändern Sie nichts unterhalb dieser Linie!“ platziert werden. Im Falle einer älteren Implementierung benötigen Sie eine Codeversion von H.15.1 oder neuer. Sie erhalten dieses Medienmodul von Ihrem Adobe Analytics-Account: Admin ----> Code Manager ----> App Measurement ------> App Measurement Media Module.js.

Hinweis:

Wenn der „Code Manager“ unter Admin nicht angezeigt wird, haben Sie keinen Zugriff. Um Zugriff zu erhalten, lassen Sie einen Benutzer mit Administratorrechten Ihr Konto einer Gruppe hinzufügen, die Zugriff auf den Code-Manager hat. 

Schritt 3: Fügen Sie den folgenden Code in den Anfang der Webseite, auf der das YouTube-Video direkt unterhalb des DTM-Titelcodes eingebettet ist.

    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
     
    <script type="text/javascript">
        var video_obj=null;
        var video_length=0;
        var video_name='Movie name ' + new Date().getTime();
     
     
        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
            console.log('*** iFrame embed onYouTubeIframeAPIReady');
     
            player = new YT.Player("player1", {
              
              events: {
              
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
        }
     
        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            // event.target.playVideo();
            console.log('*** iFrame embed onPlayerReady ', player);
        }
     
        // 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.
        var done = false;
        function onPlayerStateChange(event) {
            console.log('*** iFrame embed onPlayerStateChange ' + event.data + ' --- YT Player state ' + YT.PlayerState.PLAYING, player.getCurrentTime(), player);
            /*
            if (event.data == YT.PlayerState.PLAYING && !done) {
                setTimeout(stopVideo, 6000);
                done = true;
            }
            */
            video_name = player.getVideoData();
            video_name = video_name.title;
            video_length = player.getDuration();
     
            // if(event.data === YT.PlayerState.PLAYING && (event.data === 1 || event.data < 0)){
            if((event.data === 1 || event.data < 0) && YT.PlayerState.PLAYING === 1){
                    //*-* PLAY
                    console.log("*-* Player is on play mode " + event.data + ' ' + player.getCurrentTime(), s);
                    if(player.getCurrentTime() === 0) {
                        s.Media.open(video_name, video_length, 'Youtube Object Embed');
                        s.Media.play(video_name, player.getCurrentTime());
                    } else {
                        s.Media.play(video_name, player.getCurrentTime());
                    }
                }else if(event.data === 2){
                    //*-* PAUSE --- CAN USE THIS FOR ENDING TOO =-- check on time -5 sec!!
                    console.log("*-* Player is on pause mode " + event.data+' '+player.getCurrentTime());
                    s.Media.stop(video_name, player.getCurrentTime());//this will cause the monitor to have media.event='STOP'
                }else if(event.data === 3){
                    //*-* SKIPPING
                    console.log("*-* Player is on skipping mode " + event.data);
                    s.Media.stop(video_name, player.getCurrentTime());//this will cause the monitor to have media.event='STOP'
                }else if(event.data === 0){
                    //*-* Completed
                    console.log("*-* Player has been completed " + event.data);
                    s.Media.stop(video_name, player.getCurrentTime());
                    s.Media.close(video_name);
                }
        }
      
            function onYouTubePlayerReady(playerId) {
                video_obj=document.getElementById(playerId);//playerId
     
                video_obj.addEventListener("onStateChange", "onytplayerStateChange");
     
                video_length= video_obj.getDuration();
     
                console.log('*-* Youtube Video Ready - in call back function --- ' + playerId, 'video duration= ' + video_obj.getDuration(), 'video current time= ' + video_obj.getCurrentTime());
            }
     
     
            function onytplayerStateChange(newState) {
                console.log("*-* Player's new state: " + newState);
                //-1 --> <0 is not started
                if(newState===1){
                    //*-* PLAY
                    console.log("*-* Player is on play mode " + newState + ' ' + video_obj.getCurrentTime(), s);
                    if(video_obj.getCurrentTime() === 0) {
                        s.Media.open(video_name, video_length, 'Youtube Object Embed');
                        s.Media.play(video_name, video_obj.getCurrentTime());
     
                        // s.Media.play(video_name, video_obj.getCurrentTime(),5,'a segment name', 30);
                    } else {
                        s.Media.play(video_name, video_obj.getCurrentTime());
                    }
                }else if(newState===2){
                    //*-* PAUSE --- CAN USE THIS FOR ENDING TOO =-- check on time -5 sec!!
                    console.log("*-* Player is on pause mode " + newState+' '+video_obj.getCurrentTime());
                    s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP'
     
                    // s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP'
                    //*-*if not used (ie. not pausing) then CLOSE will kick in when the video completes otherwise video completes will also send 'STOP'
                }else if(newState===3){
                    //*-* SKIPPING
                    console.log("*-* Player is on skipping mode " + newState);
                    s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP'
                }else if(newState===0){
                    //*-* Completed
                    console.log("*-* Player has been completed " + newState);
                    s.Media.stop(video_name, video_obj.getCurrentTime());
                    s.Media.close(video_name);
                }
            }
     
        </script>

Schritt 4: Nachdem Sie den Code in Ihr Projekt eingefügt haben, müssen Sie die Umrechnungsvariablen und Ereignisse protokollieren, die Sie verwenden, um Videos zu verfolgen. Fügen Sie den folgenden Code in die Datei AppMeasurement oder s_code hinzu.

    s.loadModule("Media");
     
    s.Media.onLoad = function() {
        console.log('**** MEDIA module loaded');
     /*Configure Media Module Functions */
     
     s.Media.autoTrack= false;
     s.Media.trackWhilePlaying=false;
     // s.Media.trackSecond=0; // set to 30 if milestone in seconds
      console.log('**** MEDIA module loaded1');
     s.Media.completeByCloseOffset = true; //*** Enabled if you want to allow the video to be completed a few seconds before the actual end of the video
     s.Media.completeCloseOffsetThreshold = 10; 
     
     s.Media.trackVars="events,eVar16,eVar17"; //**NOTE: Add additional data which will be pushed either in the plugin or on the page
     s.Media.trackEvents="event16,event17,event18,event19,event20,event21"; //**NOTE: Add additional data which will be pushed either in the plugin or on the page
     s.Media.trackMilestones="25,50,75";
     s.Media.playerName="My TEst You tube video tracking";
     s.Media.segmentByMilestones = false;
     s.Media.trackUsingContextData = true;
       console.log('**** MEDIA module loaded2');
     s.Media.contextDataMapping = {
      "a.media.name":"eVar16",
      "a.media.segment":"",
      "a.contentType":"eVar17",
      "a.media.timePlayed":"event18",
      "a.media.view":"event16",
      "a.media.segmentView":"",
      "a.media.complete":"event17",
      "a.media.milestones": {
       25:"event19",
       50:"event20",
       75:"event21"
      }
     }
       console.log('**** MEDIA module loaded3');
     /*
     * can use the below IF wanna pass additional data --- Need to update s.Media.trackVars --- BUT we could potential set it on above var and avoid using the below
     */
     s.Media.monitor =function(s, media){
      console.log('**** MEDIA module loaded4');
        console.log(media);
      //https://marketing.adobe.com/resources/help/en_US/sc/appmeasurement/video/video_mediamonitor.html
      console.log('in the video monitor, can help add additional evar, prop or events', media);
      if(media.event == "OPEN") {
       s.contextData = s.Media.contextDataMapping
       s.Media.track(media.name);
      } else if(media.event == "MILESTONE") {
       s.contextData = s.Media.contextDataMapping
       s.Media.track(media.name);
      } else if(media.event == "CLOSE") {
       s.contextData = s.Media.contextDataMapping
       s.Media.track(media.name);
      }
     }
     
     
    }

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Adobe MAX 2024

Adobe MAX
Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX

Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX 2024

Adobe MAX
Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX

Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online