使用 GA 事件跟踪进行视频跟踪答案

【问题标题】：Video Tracking Using GA Event Tracking使用 GA 事件跟踪进行视频跟踪
【发布时间】：2012-11-17 22:14:29
【问题描述】：

我正在尝试在我的网站上设置 GA 事件跟踪以嵌入 IFRAME Vimeo 视频。但是，我不知道应该将跟踪对象放置在我的IFRAME 代码中的位置/方式。

这是我的 IFRAME 嵌入代码：

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

这是我认为GA Event Tracking代码应该的样子：

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

这在我的嵌入代码中的什么位置？有人可以告诉我这应该如何看/工作吗？

【问题讨论】：

标签： google-analytics google-analytics-api vimeo event-tracking

【解决方案1】：

您需要使用播放器 API，因为您无法在这样的第三方域的 iframe 内注入代码。

根据为player API 提供的文档，t 应该看起来像这样。

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>

上面的代码可以通过使用 Vimeo Mogaloop api 来简化 a，它为您抽象了 Message Passing API，代价是使用库加载 Javascript。

插件即可使用

请注意，上述代码仅用作示例，如果您在一个页面上有多个视频，则可能更难正确处理。或者，您也可以使用具有plugin for tracking Vimeo Video 的GAS（我是那里的主要开发人员）库。

兼容性警告

注意关于兼容性的警告，我想如果你使用 flash 方法插入播放器，你可以获得更广泛的浏览器支持，但在 iOS 设备上完全杀死播放器：

使用通用嵌入代码，与播放器是通过使用 window.postMessage。 postMessage 是一个比较新的开发，所以它只在 Internet Explorer 8+、Firefox 中可用 3+、Safari 4+、Chrome 和 Opera 9+。

【讨论】：

似乎有很多变通办法只是为了“播放”一个视频。感谢您的帮助，非常有帮助。
我在舞台和开发环境中为我的站点工作，但它似乎不适用于生产。生产站点在 https，您认为这可能是原因吗？

【解决方案2】：

Google Analytics on Steroids 具有跟踪 Vimeo 的功能。值得一试

【讨论】：