prueba analytics con varios eventos

templates/test/index.html.twig

@@ -51,9 +51,16 @@
         <script>
             //uri codificada
             var dmUri = "{{url}}";
+            var tituloVideo = "Dreamgirls-Video-01"; // esto debe ser traido desde el controlador
             //var options = {"fluid": true}; si se activa el responsive, no sirve de nada el overlay.
             var options = {};
 
+            var progress = {
+                quarter: false,
+                half: false,
+                threeQuarters: false
+            };
+
             (function (window, videojs) {
                 var player = window.player = videojs('dg-vid-01', options, function onPlayerReady() {
                     videojs.log('Reproductor Cargado...');
@@ -82,36 +89,97 @@
 
             }(
                     window, window.videojs));
+        </script>
+        <script>
+            //CAPTURA DE EVENTOS DEL PLAYER Y ENVIO A ANALITYCS..
+
             window.player.bigPlayButton.on('click', function () {
                 console.log("Video started: " + window.player.currentTime());
-                gtag('event', "start", {
-                    'event_category': "start",
-                    'event_label': "Inicio Video 01",
-                    'value': "1"
-                }); 
+                trackEvent('event', "start", "start", "start", tituloVideo);
+            });
+
+            window.player.enterFullWindow.on('click', function () {
+
+                console.log("Video fullscreen: " + window.player.currentTime());
+                if (player.isFullscreen()) {
+                    trackEvent('event', "fullscreen", "fullscreen", "fullscreen", tituloVideo);
+                } else {
+                    console.log("Video exit fullscreen: " + window.player.currentTime());
+                    trackEvent('event', "exitfullscreen", "exitfullscreen", "exitfullscreen", tituloVideo);
+                }
+
             });
 
+            /* window.player.exitFullWindow.on('click', function () {
+             
+             console.log("Video exit fullscreen: " + window.player.currentTime());
+             gtag('event', "exitfullscreen", {
+             'event_category': "exitfullscreen",
+             'event_label': "exitfullscreen",
+             'value': "Dreamgirls-Video-01"
+             });
+             
+             });*/
+
             window.player.on("play", function (e) {
                 console.log("Video playback started: " + window.player.currentTime());
+                trackEvent('event', "play", "play", "play", tituloVideo);
             });
 
             window.player.on("pause", function (e) {
                 console.log("Video playback paused: " + window.player.currentTime());
+                trackEvent('event', "pause", "pause", "pause", tituloVideo);
             });
 
             window.player.on("seeking", function (e) {
                 console.log("Video seeking: " + window.player.currentTime());
+                trackEvent('event', "seeking", "seeking", "seeking", tituloVideo);
             });
 
 
             window.player.on("seeked", function (e) {
                 console.log("Video seek ended: " + window.player.currentTime());
+                trackEvent('event', "seeked", "seeked", "seeked", tituloVideo);
             });
 
             window.player.on("ended", function (e) {
                 console.log("Video playback ended.");
+                trackEvent('event', "ended", "ended", "ended", tituloVideo);
+            });
+
+            window.player.on('timeupdate', function () {
+                timeupdate(window.player, "timeupdated", tituloVideo);
             });
 
+            function timeupdate(player, event, tituloVideo) {
+                var elapsed = Math.round(player.currentTime());
+                var duration = Math.round(player.duration());
+                var percent = Math.round(elapsed / duration * 100);
+
+                if (!progress.quarter && percent > 25) {
+                    trackEvent('event',event, event, 'Visto mas de un 25%', tituloVideo );
+                    progress.quarter = true;
+                }
+
+                if (!progress.half && percent > 50) {
+                    trackEvent('event', event, event, 'Visto mas de un 50%', tituloVideo);
+                    progress.half = true;
+                }
+
+                if (!progress.threeQuarters && percent > 75) {
+                    trackEvent('event', event, event, 'Visto mas de un 75%', tituloVideo);
+                    progress.threeQuarters = true;
+                }
+            }
+
+            function trackEvent(gaType, event, category, label, value) {
+                gtag(gaType, event, {
+                    'event_category': category,
+                    'event_label': label,
+                    'value': value
+                });
+            }
+
         </script>    
     </body>