6

IFRAMEVimeo ビデオの埋め込み用にサイトで 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>

これは私の埋め込みコードのどこに行きますか? 誰かがこれがどのように見えるか/動作するかを教えてもらえますか?

4

2 に答える 2

6

そのようなサードパーティ ドメインの iframe 内にコードを挿入することはできないため、プレーヤー API を使用する必要があります。

プレーヤー API t用に提供されたドキュメントに基づくと、次のようになります。

実施例

<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>

上記のコードは、ライブラリで Javascript をロードすることを犠牲にして、Message Passing API を抽象化する Vimeo Mogaloop API を使用して単純化できます。

すぐに使えるプラグイン

上記のコードは例としてのみ機能することに注意してください。ページに複数のビデオがある場合、正しく表示するのが難しくなる可能性があります. または、 Vimeo Video を追跡するためのプラグインを備えたGAS (私が主な開発者です) ライブラリを使用することもできます。

互換性に関する警告

互換性に関する警告に注意してください。フラッシュ メソッドを使用してプレーヤーを挿入すると、サポートされるブラウザーの範囲を広げることができますが、iOS デバイスではプレーヤーを完全に強制終了できます。

Universal Embed Code では、プレイヤーと対話する唯一の方法は、window.postMessage を使用することです。postMessage は比較的新しい開発であるため、Internet Explorer 8 以降、Firefox 3 以降、Safari 4 以降、Chrome、および Opera 9 以降でのみ使用できます。

于 2012-11-29T20:08:32.443 に答える
1

Steroids の Google アナリティクスには、Vimeo を追跡する機能があります。チェックインする価値がある

于 2012-11-29T20:38:13.397 に答える