web-dev-qa-db-fra.com

Suivi des événements pour Vimeo dans Google Tag Manager

Je me suis cogné la tête contre le mur en essayant de faire en sorte que cela fonctionne en vain, alors j'ai pensé voir si quelqu'un d'autre avait rencontré le même problème.

J'ai essayé de configurer le suivi des événements pour suivre les lectures d'une vidéo Vimeo intégrée à l'aide de Google Tag Manager. J'utilise le plugin vimeo.ga.js créé par Sander Helibron, mais peu importe ce que je fais, je ne peux pas obtenir le tag Vimeo.

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

Et voici quelques captures d'écran de GTM:

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

Et voici un aperçu modal qui montre les balises totalement ne tirant pas: enter image description here

Toutes les idées seraient extrêmement appréciées.

3
JamiePatt

Je n'utilise pas ce plugin car il ne fonctionne pas avec mes autres plugins. Mais je surveille tout dans GA et je déploie le lecteur vidéo via GTM.

C’est le code que j’utilise dans GTM http://codepen.io/JaminQuimby/pen/yNaOwz

J'utilise les écouteurs intégrés dans Vimeo, Ads, VAST Client pour écouter les événements que je souhaite capturer.

Exemple passant au mode plein écran.

    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}});
});

L'événement Event

L'auditeur listner

Google Analytics GA

3
Jamin Quimby