Trying to Track Clicks on a Marketo Landing Page | Community
Skip to main content
A
Anonymous
January 29, 2015
Solved

Trying to Track Clicks on a Marketo Landing Page

  • January 29, 2015
  • 5 replies
  • 9430 views
Hi,

I am trying to track clicks on a Marketo landing page. One link is below an embedded slide deck however I am not sure if Munchkin code has been placed on the third party page where that slide deck is hosted.

Also want to track any clicks on an embedded Google Slide and Vimeo video. What steps do I need to take to ensure we can track clicks on the Marketo landing page?
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman
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.

5 replies

Josh_Hill13
Josh_Hill13
Level 10
January 29, 2015
You may not be able to track clicks on the embedded objects. Marketo offers a Clicks Link on Web Page filter, so try to see what options it gives you for the embedded link or for that page.

If you want to track those embedded items, you will need to add javascript of some type. Vidyard has a great integration to track your videos.
A
Anonymous
December 9, 2015

Hi Josh,

could you please give me a hand? We would love to use filter "visited we page" or "click in" our Marketo landing page. The problem we encounter is that any smart campaign can't see Marketo landing page so we are not able to track it. Is there any way how to do so? Any munchkin?

Thanks a lot,

Jan

A
Anonymous
January 29, 2015
If it is a standard link on your landing page, it should be tracked automatically. (An exception is if the link is inside a plain text token which are not tracked). 

If you are trying to track interactions with an embedded element like slides or a video, it can be a bit trickier. 

One method, if you can apply javascript to the container, is to create "virtual pageviews" by having the javascript simulate a visit to your domain on a URL that doesn't exist but which represents the click. 

E.g., pages.yourdomain.com/event-you-want-to-track.html

Then this would appear in the activity log and you could trigger and filter on it. 

Eric Hollebone used to have a useful guide for doing this step-by-step, but alas I think the page is down. But that is the gist. 

Alternatively for video you could use a provider like Wistia or Vidyard that integrates and will track these events for you automatically. I use Vidyard myself. Josh Hill published a detailed review: http://www.marketingrockstarguides.com/how-to-track-video-in-marketo-with-vidyard-1773/

Doesn't help you with the slides though. There may be a way for these but I haven't had to crack that nut before!
SanfordWhiteman
SanfordWhiteman
Level 10
January 29, 2015
In order to track views/clicks within embedded pages (IFRAMEs), either:

[a] the IFRAME needs to load Munchkin.js

or

[b] the IFRAME needs to have code to communicate with Munchkin on the outer page (probably via HTML5 Web Messaging)

If you have neither of these, then you'll only be tracking the views/clicks on the outer page (which could potentially include an initial click that embeds the IFRAME, for example by replacing a placeholder image, but still it won't include navigation within the IFRAME).
SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
January 29, 2015
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
    Jason_Hamilton1
    Level 6
    June 8, 2015

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

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    June 8, 2015

    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

    A
    Anonymous
    January 29, 2015
    @ Sanford, that is sweet, thanks for sharing that!

    Yes one benefit of the Vidyard integration is that you see the incremental activities with percentages, so "Watched 50%", "Watched 75%", etc. 
    Terms & ConditionsAccessibility statement

    Loading footer...