Youtube Video tracking

[MariaMarketo]

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?

[SanfordWhiteman · Accepted solution]

---

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]

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

[SanfordWhiteman · Accepted solution]

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

[MariaMarketo]

Thanks for the great answer!

[MariaMarketo]

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? 

[SanfordWhiteman]

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]

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]

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]

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.