logo标签列表

使用GA事件跟踪进行视频追踪

google-analyticsgoogle-analytics-apivimeoevent-tracking
6
我是一位有用的助手，可以为您翻译文本。

我正在尝试在我的网站上为一个嵌入了Vimeo视频的IFRAME设置GA事件跟踪。然而，我无法确定跟踪对象应该放置在我的IFRAME代码中的哪个位置或如何放置。

这是我的IFRAME嵌入代码：

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

这是我认为GA事件跟踪代码应该长成的样子：

请注意： 以下内容仅供参考，具体实现可能会因您的需求而异。 

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

这段代码应该放在我的嵌入代码的哪里？有人可以展示一下它应该是什么样子/如何工作吗？
2个回答
6

你需要使用播放器API，因为你无法在像那样的第三方域名的iframe中注入代码。

根据提供的播放器API文档，它应该看起来像这样。

工作示例

<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来简化，该api抽象了消息传递API，但代价是加载带有库的Javascript。
可用的插件
请注意，上面的代码仅作为示例工作，如果在页面上有多个视频，则可能更难正确使用。或者，您还可以使用GAS（我是主要开发人员），它具有用于跟踪Vimeo视频的插件。
关于兼容性的警告
请注意兼容性警告，我想如果您使用Flash方法插入播放器，则可以获得更广泛的浏览器支持，但会完全杀死iOS设备的播放器：

使用通用嵌入代码，与播放器交互的唯一方法是使用window.postMessage。 postMessage是一个相对较新的开发，因此仅在Internet Explorer 8+，Firefox 3+，Safari 4+，Chrome和Opera 9+中可用。

看起来需要很多变通才能播放一个视频。感谢您的帮助，非常有用。 - Brett
我已经在我的舞台和开发环境中使其工作，但似乎在生产环境中无法正常工作。生产站点是https，这可能是原因吗？ - SirM
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接