Home/ Questions/Q 8946199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T12:26:54+00:00

I’m trying to setup GA Event Tracking on my site for an IFRAME Vimeo

  • 0

I’m trying to setup GA Event Tracking on my site for an IFRAME Vimeo Video embed. However, I can’t figure out where/how the tracking object should be placed in my IFRAME code.

Here’s my IFRAME embed code: 

<iframe src="http://player.vimeo.com/video/51447433" width="500" 
  height="281"frameborder="0" webkitAllowFullScreen 
  mozallowfullscreen allowFullScreen></iframe>

Here’s what I think the GA Event Tracking code should look like: 

<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Title']);">Play</a>

Where does this go in my embed code? Can somebody show me how this should look/work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to use the player API because you can’t inject code inside an iframe on a third party domain like that.

    Based on the docs provided for the player API t should look something like this.

    Working Example

    <html>
<head>
  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<script>
var f = document.getElementsByTagName('iframe')[0],
    url = f.src.split('?')[0];

// Listen for messages from the player
if (window.addEventListener){
    window.addEventListener('message', onMessageReceived, false);
}
else {
    window.attachEvent('onmessage', onMessageReceived, false);
}

// Handle messages received from the player
function onMessageReceived(e) {
    var data = JSON.parse(e.data);

    switch (data.event) {
        case 'ready':
            onReady();
            break;

        case 'play':
            onPlay();
            break;

        case 'finish':
            onFinish();
            break;
    }
}

// Helper function for sending a message to the player
function post(action, value) {
    var data = { method: action };

    if (value) {
        data.value = value;
    }

    f.contentWindow.postMessage(JSON.stringify(data), url);
}

function onReady() {
    post('addEventListener', 'finish');
    post('addEventListener', 'play');
}


function onFinish() {
    _gaq.push(['_trackEvent', 'Vimeo Video', 'finish', url]);
}

function onPlay() {
    _gaq.push(['_trackEvent', 'Vimeo Video', 'play', url]);
}
</script>
</head>
<body>
  <iframe src="http://player.vimeo.com/video/27855315?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</body>
</html>

    The code above can be simplified a by using the Vimeo Mogaloop api that abstracts the Message Passing API for you, at the cost of loading the Javascript with the library.

    Plugins Ready to use

    Note that the above code will only work as an example and if you have multiple videos on a page it can be harder to get it right. Alternatively you can also use the GAS (I’m the main developer there) library that has a plugin for tracking Vimeo Video.

    Warning about compatibility

    Note the Warning about compatibility, I guess if you insert the player using the flash method you can get a wider range of browsers supported but kill the player completely for iOS devices:

    With the Universal Embed Code, the only way to interact with the
    player is by using window.postMessage. postMessage is a relatively new
    development, so it’s only available in Internet Explorer 8+, Firefox
    3+, Safari 4+, Chrome, and Opera 9+.

    • 0