Trying to Track Clicks on a Marketo Landing Page

[SanfordWhiteman · Accepted solution]

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]

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

[SanfordWhiteman]

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]

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]

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]

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]

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

[Anonymous]

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

[Derek_Hays1]

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]

You'll have to provide a URL.