SOLVED

Re: Trying to Track Clicks on a Marketo Landing Page

Go to solution
SanfordWhiteman
Level 10 - Community Moderator

Re: Trying to Track Clicks on a Marketo Landing Page

Here's sample code that tracks YouTube events (Play, Pause, Play Until End) using Munchkin.  Adapted from YT's guide here.
 
<!-- 1. this DIV is replaced by the player IFRAME -->
<div id="player"></div>
<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  document.getElementsByTagName('head')[0].appendChild(tag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player, videoId = 'M7lc1UVf-VE';
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: videoId,
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API calls this function when the player's state changes.
  function onPlayerStateChange(event) {
    switch( event.data ) {
    case YT.PlayerState.PLAYING:
        Munchkin.munchkinFunction('visitWebPage', {
            url: 'https://youtube.com/'+videoId
           ,params: 'movie-action=pressed-play'
           }
        );
        break;
    case YT.PlayerState.PAUSED:
        Munchkin.munchkinFunction('visitWebPage', {
            url: 'https://youtube.com/'+videoId
           ,params: 'movie-action=paused'
           }
        );
        break;
    case YT.PlayerState.ENDED:
        Munchkin.munchkinFunction('visitWebPage', {
            url: 'https://youtube.com/'+videoId
           ,params: 'movie-action=played-til-end'
           }
        );
        break;
     }

  }
</script>

Of course you probably don't care about multiple Play events and likely don't care about Pause. Play Until End is significant -- but the catch is that the lead could pause 1 sec. before the end and you'd just see a Pause.
Jason_Hamilton1
Level 8 - Champion Alumni

Re: Trying to Track Clicks on a Marketo Landing Page

Sanford Whiteman​ this looks great, is it possible to have multiple videos on the page with this type of tracking?

SanfordWhiteman
Level 10 - Community Moderator

Re: Trying to Track Clicks on a Marketo Landing Page

Sure, just create a YT.Player for each video. You would want to avoid duplicate variable names, too -- probably use an array of video IDs, etc.

BTW the latest code is at MktoMunchkin :: YouTube Player API - JSFiddle

Diego_Lineros2
Level 7

Re: Trying to Track Clicks on a Marketo Landing Page

No so quick... I did try with more than one video the code below and I've got inconsistent tracking. So I did add alerts, put in a fiddle and in Marketo. The fiddle works well but live in Marketo doesn't. I got better results in FF.

Any ideas?

<div id="player1"></div>

<div id="player2"></div>

<script>

    var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";

      var firstScriptTag = document.getElementsByTagName('script')[0];

      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    

      var player1;

      var player2;

      var videoId1 = "D_VRSFpUcp0";

      var videoId2 = "ncvFAm4kYCo";

  function onYouTubeIframeAPIReady() {

    player1 = new YT.Player('player1', {

    videoId: 'D_VRSFpUcp0',

    events: {

        'onStateChange': onPlayerStateChange1

                       }

    });

   

      player2 = new YT.Player('player2', {

    videoId: 'ncvFAm4kYCo',

    events: {

           'onStateChange': onPlayerStateChange2

                       }

    });

    }

   

   function onPlayerStateChange1(event) {

     switch( event.data ) {     

    case YT.PlayerState.PLAYING:

    alert(videoId1);   

    Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+videoId1

            ,params: 'movie-action=pressed-play'

           }

        );

  

    case YT.PlayerState.PAUSED:

             Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+videoId1

           ,params: 'movie-action=paused'

           }

        );

     

    case YT.PlayerState.ENDED:

             Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+videoId1

            ,params: 'movie-action=played-til-end'

           }

        );

     

     }

  }

function onPlayerStateChange2(event) {

      switch( event.data ) {

   case YT.PlayerState.PLAYING:

    alert(videoId2);

        Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+videoId2

            ,params: 'movie-action=pressed-play'

           }

        );

       

    case YT.PlayerState.PAUSED:

   

        Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+videoId2

           ,params: 'movie-action=paused'

           }

        );

    

    case YT.PlayerState.ENDED:

    

        Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+videoId2

            ,params: 'movie-action=played-til-end'

           }

        );

    

     }

  }

 

</script>

SanfordWhiteman
Level 10 - Community Moderator

Re: Trying to Track Clicks on a Marketo Landing Page

I'm going to need more details about "inconsistent."  But first, you must simplify your code.  There's no reason to have different state change event listeners.  The Video ID is always available as event.target.getVideoData().video_id.  So just have one listener function.

Diego_Lineros2
Level 7

Re: Trying to Track Clicks on a Marketo Landing Page

This is a version with only one listener, the story is that the second player is not firing the event in Marketo. It does in the fiddle Edit fiddle - JSFiddle

<div id="player1"></div>

<div id="player2"></div>

<script>

    

    var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";

      var firstScriptTag = document.getElementsByTagName('script')[0];

      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);   

      var palyer1, player2;

      function onYouTubeIframeAPIReady() {

    player1 = new YT.Player('player1', {

    videoId: 'D_VRSFpUcp0',

    events: {

        'onStateChange': onPlayerStateChange

                       }

    });

  

      player2 = new YT.Player('player2', {

    videoId: 'ncvFAm4kYCo',

    events: {

           'onStateChange': onPlayerStateChange

                       }

    });

    }

  

   function onPlayerStateChange(event) {

    vid = event.target.getVideoData().video_id;

    switch( event.data ) {

    case YT.PlayerState.PLAYING:

    alert(vid);  

    Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+vid

            ,params: 'movie-action=pressed-play'

           }

        );

  break;

    case YT.PlayerState.PAUSED:

             Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+vid

           ,params: 'movie-action=paused'

           }

        );

    break;

    case YT.PlayerState.ENDED:

             Munchkin.munchkinFunction('visitWebPage', {

            url: 'https://youtube.com/'+vid

            ,params: 'movie-action=played-til-end'

           }

        );

     break;

     }

  }

</script>

Diego_Lineros2
Level 7

Re: Trying to Track Clicks on a Marketo Landing Page

I found the issue, My Jquery library was 1.7, updated to 2.1.3 and all working

Anonymous
Not applicable

Re: Trying to Track Clicks on a Marketo Landing Page

I've encountered problem using this code  - it is not responsive , any ideas on how to make it fully responsive?

Derek_Hays1
Level 1

Re: Trying to Track Clicks on a Marketo Landing Page

The code referenced here by @SanfordWhiteman as well as the YouTube code works great on a standard HTML page. But when I pull it into the Custom HTML for Known people it does not work. Can't figure out why. Any ideas? what am I missing?

SanfordWhiteman
Level 10 - Community Moderator

Re: Trying to Track Clicks on a Marketo Landing Page

You'll have to provide a URL.