web-dev-qa-db-ja.com

GoogleタグマネージャーでのVimeoのイベントトラッキング

私はこれを役に立たないようにしようと壁に頭を叩いてきましたので、他の誰かが同じ問題に直面しているかどうかを見るかもしれません。

Googleタグマネージャーを使用して、埋め込みVimeoビデオの再生を追跡するイベントトラッキングを設定しようとしています。 Sander Helibronが作成した vimeo.ga.jsプラグイン を使用しましたが、何をしてもVimeoタグを配信できません。

これが私のhtmlです。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/vimeo.ga.min.js"></script>

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).Push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-6705138-42', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
    </script>

  <!--start dataLayer-->
<script>
dataLayer.Push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Started video', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.Push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Paused video', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.Push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Resumed video', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.Push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Completed video', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
dataLayer.Push({'event': 'Vimeo', 'eventCategory': 'Vimeo', 'eventAction': 'Skipped video forward or backward', 'eventLabel': 'https://player.vimeo.com/video/22439234', 'eventValue': undefined, 'eventNonInteraction': true});
</script>
<!--end dataLayer-->

    <!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-N2SQQP" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>
    (function(w,d,s,l,i){
        w[l]=w[l]||[];w[l].Push({
            'gtm.start': new Date().getTime(),event:'gtm.js'
        });
        var f=d.getElementsByTagName(s)[0], 
            j=d.createElement(s),
            dl=l!='dataLayer'?'&l='+l:'';j.
            async=true;
            j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })
    (window,document,'script','dataLayer','GTM-N2SQQP');
</script>
<!-- End Google Tag Manager -->

    <iframe src="//player.vimeo.com/video/22439234?api=1&player_id=vimeo-player-1" id="vimeo-player-1" width="640" height="390" frameborder="0" data-progress="true" data-seek="true" data-bounce="true" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

</body>
</html>

また、GTMのスクリーンショットをいくつか紹介します。

enter image description hereenter image description hereenter image description hereenter image description here

そして、タグが完全に起動していないことを示すプレビューモーダルがあります： enter image description here

どんなアイデアでも大歓迎です。

google-analyticsevent-trackinggoogle-tag-manager
3
JamiePatt

他のプラグインでは動作しないため、このプラグインは使用しません。しかし、GAですべてを追跡し、GTMを介してビデオプレーヤーを展開します。

これは私がGTMで使用するコードです http://codepen.io/JaminQuimby/pen/yNaOwz

Vimeo、Ads、VAST Clientの組み込みリスナーを使用して、キャプチャしたいイベントをリッスンします。

全画面モードに展開する例。

    player.on("fullscreenchange", function() {
if (settings.debug) {console.info('player on fullscreenschage');}
if (player.isFullscreen()) {settings.state.screen = 'Enter ';} else {settings.state.screen = 'Exit ';}
gt.Push({event: 'gtm_video',video: {category: 'Vimeo',action: settings.state.screen + 'Full Screen Mode',label: data.name,value: data.link}});
});

行事 - Event

リスナー - listner

グーグルアナリティクス - GA

3
Jamin Quimby