SOLVED

Re: Youtube Video tracking

Go to solution
MariaMarketo
Level 2

Youtube Video tracking

In addition to Marketo forms, we have also integrated YouTube videos in our showroom. Is there a way in Marketo to find out which person has been watching which YouTube video for how long?

2 ACCEPTED SOLUTIONS

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Youtube Video tracking


Is there a way in Marketo to find out which person has been watching which YouTube video for how long?

Yes, if you include the Munchkin-YouTube bridge, which you can download from here:

 

https://assets.codepen.io/250687/teknkl-youtubebridge-1.1.0.js

 

(download it and then reupload it to your Marketo Design Studio).

 

You can see demo of how to use and configure the Bridge here:

 

https://codepen.io/figureone/pen/PoYWLjq?editors=1010

 

There are a few settings you can tweak (or leave at defaults):

  var YouTubeMunchkinConfig = {
    interestingTimeSS : 10, // elapsed time in seconds that you find interesting
    interestingPercentPosition : 33, // elapsed percent that you find interesting
    synthUrlBase : "/munchkinVideoTracker/video/" // base path of synthetic Visit Web Page hits (video ID is appended)    
  };

 

Then you'll get Visits Web Page activities in the Activity Log like so:

 

Page: www.example.com/munchkinVideoTracker/video/tuSvnhcATUE

Query String: movie-action=pressed-play&movie-percent-position=0

 

Page: www.example.com/munchkinVideoTracker/video/tuSvnhcATUE

Query String: movie-action=pressed-pause&movie-percent-position=10

 

Page: www.example.com/munchkinVideoTracker/video/tuSvnhcATUE

Query String: movie-action=passed-im-mark&movie-percent-position=39

View solution in original post

SanfordWhiteman
Level 10 - Community Moderator

Re: Youtube Video tracking

Which link can't you access? I tested the links and they both work for me.

View solution in original post

9 REPLIES 9
SanfordWhiteman
Level 10 - Community Moderator

Re: Youtube Video tracking


Is there a way in Marketo to find out which person has been watching which YouTube video for how long?

Yes, if you include the Munchkin-YouTube bridge, which you can download from here:

 

https://assets.codepen.io/250687/teknkl-youtubebridge-1.1.0.js

 

(download it and then reupload it to your Marketo Design Studio).

 

You can see demo of how to use and configure the Bridge here:

 

https://codepen.io/figureone/pen/PoYWLjq?editors=1010

 

There are a few settings you can tweak (or leave at defaults):

  var YouTubeMunchkinConfig = {
    interestingTimeSS : 10, // elapsed time in seconds that you find interesting
    interestingPercentPosition : 33, // elapsed percent that you find interesting
    synthUrlBase : "/munchkinVideoTracker/video/" // base path of synthetic Visit Web Page hits (video ID is appended)    
  };

 

Then you'll get Visits Web Page activities in the Activity Log like so:

 

Page: www.example.com/munchkinVideoTracker/video/tuSvnhcATUE

Query String: movie-action=pressed-play&movie-percent-position=0

 

Page: www.example.com/munchkinVideoTracker/video/tuSvnhcATUE

Query String: movie-action=pressed-pause&movie-percent-position=10

 

Page: www.example.com/munchkinVideoTracker/video/tuSvnhcATUE

Query String: movie-action=passed-im-mark&movie-percent-position=39

MariaMarketo
Level 2

Re: Youtube Video tracking

Hi, thanks for the detailed answer! Although I can't access the document, unfortunately. 

SanfordWhiteman
Level 10 - Community Moderator

Re: Youtube Video tracking

Which link can't you access? I tested the links and they both work for me.
MariaMarketo
Level 2

Re: Youtube Video tracking

Thanks for the great answer!

MariaMarketo
Level 2

Re: Youtube Video tracking

Hi,

 

after successfully downloading the script and uploading it to the design studio, I created the smart list following your instruction. Everything worked pretty well!

But now I'm wondering which actions/filters I should use to build a workflow in the flow tap in order to receive my results - can you help? 

 

Tags (1)
SanfordWhiteman
Level 10 - Community Moderator

Re: Youtube Video tracking

Well... it would be the same as any interesting activity, right? You can choose to set a Program Success Status, log an Interesting Moment, etc.

markb
Level 2

Re: Youtube Video tracking

Will this approach work to capture the YouTube links on this page (Resources | Lippincott Solutions | Wolters Kluwer)? They are are displayed in a modal window.

SanfordWhiteman
Level 10 - Community Moderator

Re: Youtube Video tracking

Not on that page as currently set up. It's not so much the modals (it's no problem to track modal YT players) but they have to be set up to be captured by the YT IFRAME API.

DW530
Level 1

Re: Youtube Video tracking

Hi @SanfordWhiteman - this is extremely helpful. However, I was wondering how I would adjust the code to capture multiple interestingPercentPosition? Specifically 25%, 50% and 75%. I tried to simply replace: (interestingPercentPosition : 33,) with (interestingPercentPosition : [25, 50, 75],). See code below:

 

<script>
  var YouTubeMunchkinConfig = {
    //interestingTimeSS : 10,  elapsed time in seconds that you find interesting
    interestingPercentPosition : [25, 50, 75], // elapsed percent that you find interesting
    synthUrlBase : "/munchkinVideoTracker/video/" // base path of synthetic Visit Web Page hits (video ID is appended)    
  };
</script>

 

 However, this doesn't work. Below is the entire code that I'm using on the test page.

 

<script>
  var YouTubeMunchkinConfig = {
    //interestingTimeSS : 10,  elapsed time in seconds that you find interesting
    interestingPercentPosition : [25, 50, 75], // elapsed percent that you find interesting
    synthUrlBase : "/munchkinVideoTracker/video/" // base path of synthetic Visit Web Page hits (video ID is appended)    
  };
</script>

<script>
(function () {
    var ytLib = document.createElement("script");
    ytLib.src="https://www.youtube.com/iframe_api";
    document.head.appendChild(ytLib);
    var interestingTimeSS = 10,
        interestingPercentPosition = 50,
        synthUrlBase = "/munchkinVideoTracker/video/";
    var YTMunchkin = { PlayerState: { PASSED_INTERESTING_MOMENT: 10 } },
        friendlyStates = {};
    var players = [],
        arrayify = getSelection.call.bind([].slice);
    window.onYouTubeIframeAPIReady = function () {
        friendlyStates[YT.PlayerState.PLAYING] = "pressed-play";
        friendlyStates[YT.PlayerState.PAUSED] = "pressed-pause";
        friendlyStates[YT.PlayerState.ENDED] = "played-til-end";
        friendlyStates[YTMunchkin.PlayerState.PASSED_INTERESTING_MOMENT] = "passed-im-mark";
        arrayify(document.querySelectorAll(".youtube-wrapper")).forEach(function (wrapper) {
            players.push({
                player: new YT.Player(wrapper, {
                    width: wrapper.getAttribute("data-video-width"),
                    height: wrapper.getAttribute("data-video-height"),
                    videoId: wrapper.getAttribute("data-video-id"),
					playerVars: { 'controls': 0, 'cc_load_policy': 1, 'enablejsapi': 1, 'rel': 0 },
                    events: { onStateChange: onPlayerStateChange },
                }),
            });
        });
    };
    function onPlayerStateChange(event) {
        var player = event.target,
            states = [event.data],
            videoId = player.getVideoData().video_id,
            synthUrl = YouTubeMunchkinConfig.synthUrlBase + videoId,
            timePositionSS = player.getCurrentTime(),
            durationSS = player.getDuration(),
            percentPosition = (timePositionSS / durationSS).toFixed(2) * 100;
        if ((timePositionSS >= YouTubeMunchkinConfig.interestingTimeSS || percentPosition >= YouTubeMunchkinConfig.interestingPercentPosition) && !player.loggedInterestingMoment) {
            states.push(YTMunchkin.PlayerState.PASSED_INTERESTING_MOMENT);
        }
        states.forEach(function (state) {
            switch (state) {
                case YT.PlayerState.PLAYING:
                case YT.PlayerState.PAUSED:
                case YT.PlayerState.ENDED:
                case YTMunchkin.PlayerState.PASSED_INTERESTING_MOMENT:
                    console.log("YTMunchkin: " + friendlyStates[state]);
                    Munchkin.munchkinFunction("visitWebPage", { url: synthUrl, params: "movie-action=" + friendlyStates[state] + "&" + "movie-percent-position=" + percentPosition });
                    break;
            }
            if (state == YTMunchkin.PlayerState.PASSED_INTERESTING_MOMENT) {
                player.loggedInterestingMoment = true;
            }
        });
    }
})();
</script>

 

If needed, I can share the test page. Any assistance would be greatly appreciated.