How do you create a Munchkin API call to track video plays?

[Anonymous]

To call the API for a web event such as video play, do you have to create a separate javascript code for each webpage or landing page that has a video on it? Or what type of URL do you need to input in the bolded section below (found this basic code template in the developers marketo website)? Would we put this code inside, below, or above the existing munchkin tracking code in our landing page templates and website? Where can we get a basic template of the javascript code so we can pass to our developers to create the code?

mktoMunchkinFunction('visitWebPage', { url: document.location.path, params: 'playedVideo=true' }); 

Thanks,

Shirleen

[KanakoTone]

Ok, then I need to rephrase that I don't know how to get into dev tools.

Click the Activity ID and you'll see the QS.  Build your Smart Lists constrained by the QS.

This is it! I thought the QS will show up right on the activity log, but it is deep inside.

[KanakoTone]

But smart list doesn't work

[KanakoTone]

Oops, accidentally hit Post before finishing.

The smart list with Visited Webpage filter with "QS contains movie-action=passed-im-mark" doesn't show up anyone. The Clicked Link on Webpage filter doesn't work either. Am I missing anything?

[SanfordWhiteman]

It's a Clicked Link on Web Page ​activity, not a view.

[Anonymous]

Sanford Whiteman

This is great! I have a couple questions for you:

1) Is it possible to implement this in a way to capture this activity without specifying which video it is? I'd like to track embedded YouTube videos and score them across the entire website. We have a tag in Google Tag Manager that is firing off any time a video is played and it captures the ID and sends the data to Google Analytics. I'd love to be able to track this similarly. The script used for GA events is this:

<script type="text/javascript">

// OPTIONAL: Enable JSAPI if it's not already on the URL

// note: this will cause the Youtube player to "flash" on the page when reloading to enable the JS API

for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;)

  if (/youtube.com\/embed/.test(e[x].src))

     if(e[x].src.indexOf('enablejsapi=') === -1)

        e[x].src += (e[x].src.indexOf('?') ===-1 ? '?':'&') + 'enablejsapi=1';

var gtmYTListeners = []; // support multiple players on the same page

// attach our YT listener once the API is loaded

function onYouTubeIframeAPIReady() {

    for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) {

        if (/youtube.com\/embed/.test(e[x].src)) {

            gtmYTListeners.push(new YT.Player(e[x], {

                events: {

                    onStateChange: onPlayerStateChange,

                    onError: onPlayerError

                }

            }));

            YT.gtmLastAction = "p";

        }

    }

}

// listen for play/pause, other states such as rewind and end could also be added

// also report % played every second

function onPlayerStateChange(e) {

    e["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e["target"]);

    var video_data = e.target["getVideoData"](),

        label = video_data.video_id+':'+video_data.title;

    if (e["data"] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") {

        dataLayer.push({

            event: "youtube",

            action: "play",

            label: label

        });

        YT.gtmLastAction = "";

    }

    if (e["data"] == YT.PlayerState.PAUSED) {

        dataLayer.push({

            event: "youtube",

            action: "pause",

            label: label

        });

        YT.gtmLastAction = "p";

    }

}

// catch all to report errors through the GTM data layer

// once the error is exposed to GTM, it can be tracked in UA as an event!

// refer to https://developers.google.com/youtube/js_api_reference#Events onError

function onPlayerError(e) {

    dataLayer.push({

        event: "error",

        action: "GTM",

        label: "youtube:" + e

    })

}

// report the % played if it matches 0%, 25%, 50%, 75% or completed

function onPlayerPercent(e) {

    if (e["getPlayerState"]() == YT.PlayerState.PLAYING) {

        var t = e["getDuration"]() - e["getCurrentTime"]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 4) / 4).toFixed(2);         if (!e["lastP"] || t > e["lastP"]) {

            var video_data = e["getVideoData"](),

                label = video_data.video_id+':'+video_data.title;

            e["lastP"] = t;

            dataLayer.push({

                event: "youtube",

                action: t * 100 + "%",

                label: label

            })

        }

        e["lastP"] != 1 && setTimeout(onPlayerPercent, 1000, e);

    }

}

// Crossbrowser onbeforeunload hack/proxy

// https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onbeforeunload

window.onbeforeunload = function (e) {

var e = e || window.event;

// For IE and Firefox prior to version 4

if(e)

e.returnValue = 'na';

// For Safari

return 'na';

};

window.onbeforeunload = trackYTUnload;

function trackYTUnload() {

for (var i = 0; i < gtmYTplayers.length; i++)

if (gtmYTlisteners[i].getPlayerState() === 1) { // playing

var video_data = gtmYTlisteners[i]['getVideoData'](),

label = video_data.video_id+':'+video_data.title;

dataLayer.push({

event: 'youtube',

action: 'exit',

label: label

});

}

}

// load the Youtube JS api and get going

var j = document.createElement("script"),

    f = document.getElementsByTagName("script")[0];

j.src = "//www.youtube.com/iframe_api";

j.async = true;

f.parentNode.insertBefore(j, f);

</script>

2) How can I embed the video so that the size is fluid? The code currently defines the width and height in a static manner. This is how I'm embedding each video currently:

<center>

<style>

   .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }

.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; }

</style>

<div class="videoWrapper">

<iframe width="640" height="360" src="https://www.youtube.com/embed/R5mdtglmRnk?rel=0" frameborder="0" allowfullscreen></iframe>

</div>

</center>

Thank you in advance for your help!

[SanfordWhiteman]

1) Is it possible to implement this in a way to capture this activity without specifying which video it is?

The current code doesn't contain any hard-coded Video IDs. They're picked up from the <div> wrappers automatically.

2) How can I embed the video so that the size is fluid? The code currently defines the width and height in a static manner. This is how I'm embedding each video currently:

The video height/width is taken from data- attributes on the <div> wrappers, so you can set them to whatever you want.

[Anonymous]

The current code doesn't contain any hard-coded Video IDs. They're picked up from the <div> wrappers automatically.

I was giving an example of the code currently used to push events to GA. I'm hoping to implement your code (MktoMunchkin :: YouTube Player API - JSFiddle) without hard-coding any video IDs, but by having it recognize video plays on any page.

The video height/width is taken from data- attributes on the <div> wrappers, so you can set them to whatever you want.

Again, that's the current method I'm using to embed videos. Your script embeds an <iframe>, however I'm having trouble creating a responsive video.

[SanfordWhiteman]

I was giving an example of the code currently used to push events to GA. I'm hoping to implement your code (MktoMunchkin :: YouTube Player API - JSFiddle) without hard-coding any video IDs, but by having it recognize video plays on any page.

It's possible to try to use the JS API on existing video elements, but I wouldn't advise it nor expect it to work going forward: the YouTube IFRAME Player API is the only API currently supported by YT. Hence instantiating and tracking the players should both be done programmatically.

You shouldn't have any trouble using this model as you simply need to create placeholders for your videos and then the let the code instantiate the players.

Using IFRAMEs for video players doesn't stop them from being responsive. It's all in the measurements (i.e. percentages) you choose for the contents.

[Anonymous]

Shirleen Solares​ FYI. I moved your post to the Products and Support​ section of the site -- you will get an answer there faster.

Also, I noticed you have a few accounts on the site. Can you put the word 'Primary' next to your title so we know which one is your primary email address and account. You can see my profile and how I added the word 'Primary' next to my title.