Lions Den

The Code and Times of Hanan Schwartzberg

About Hanan | Hanan's CV | Contact Hanan

August 2, 2016

How to track embeded Youtube videos with Google Universal Analytics event

Filed under: Google,JavaScript — Tags: , , , , — Hanan Schwartzberg @ 10:22 am

The problem

You have a Youtube video embedded in an iframe and you need to track it via Google Analytics

The Solution

Since it’s in an iframe you need to use the Youtube API to handle the different events. This requires a few steps.

  1. Include this parameter in the src of the iframe
    ?enablejsapi=1
  2. Include the Youtube API script file
    var tag = document.createElement('script');
    tag.id = 'iframe-demo';
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  3. Assign the event handler to the required events. In this case the iframe’s ID is frmVideo.
    var player;
    function onYouTubeIframeAPIReady(event) {
        player = new YT.Player((event ? event.id : 'frmVideo')), {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }
  4. Actually handle the events
    var pauseFlag = false;
    function onPlayerStateChange(event) {
        // track when user clicks to Play
        if (event.data == YT.PlayerState.PLAYING) {
            ga('send', 'event', 'Video', 'Play', event.target.getVideoData()["title"]);
            pauseFlag = true;
        }
        // track when user clicks to Pause
        if (event.data == YT.PlayerState.PAUSED && pauseFlag) {
            ga('send', 'event', 'Video', 'Pause', event.target.getVideoData()["title"]);
            pauseFlag = false;
        }
        // track when video ends
        if (event.data == YT.PlayerState.ENDED) {
            ga('send', 'event', 'Video', 'End', event.target.getVideoData()["title"]);
        }
    }
  5. On my site the API continuously loaded before the video resulting in it not finding the video in step 3. The other problem was that it needed to have the same name for ever video and would only work for one video on a page. Instead, include an onload event on the iframe and pass the iframe itself in as the event and just default to ‘frmVideo’ if no video was passed in

    onload="onYouTubeIframeAPIReady(this)"

    Downloads

    Right click here and select 'Save link as...' to download this code.

    References

December 15, 2015

Responsively embed a YouTube video

Filed under: CSS — Tags: , , , , , — Hanan Schwartzberg @ 9:35 am

The Issue

The default YouTube embedding code sets the video to a fixed size.

The Solution

Add these classes to your css:

.divVideoContainer {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
 
    .divVideoContainer iframe, .divVideoContainer object, .divVideoContainer embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

Now wrap your embedding code in a div with the class defined above.

<div class="divVideoContainer">
    <iframe width="640" height="360" src="https://www.youtube.com/embed/MtN1YnoL46Q?controls=0"
        frameborder="0" allowfullscreen></iframe>
</div>
Home | Site Design | Banner Design | Code Den | Offsite Posts | Downloads | Photography | About Hanan | Hanan's CV | Contact Hanan
Copyright © 2009 Hanan Schwartzberg. All rights reserved.