Google analitics

index.html

@@ -578,6 +578,15 @@
             </p>
         </div>
 
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-MGG5NY0HCN"></script>
+        <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-MGG5NY0HCN');
+        </script>
         <script src="scripts/lyrics.js"></script>
         <script src="scripts/navegacio.js"></script>
     </body>

scripts/navegacio.js

@@ -21,6 +21,24 @@ function initialize() {
     let isTransitioning = false;
     let isHorizontalSwipe = false;
 
+    let pageEnterTime = Date.now();
+    function sendPageViewEvent(pageIndex) {
+        gtag('event', 'page_view', {
+            'event_category': 'Navegación',
+            'event_label': `Página ${pageIndex + 1}`, // Página actual (index empieza en 0)
+            'page_index': pageIndex,
+            'non_interaction': true
+        });
+        const timeSpent = Math.round((Date.now() - pageEnterTime) / 1000); // Tiempo en segundos
+        gtag('event', 'time_on_page', {
+            'event_category': 'Tiempo en página',
+            'event_label': `Página ${pageIndex + 1}`,
+            'value': timeSpent
+        });
+        pageEnterTime = Date.now(); // Reiniciar el tiempo para la nueva página
+    }
+
+
     // Function to handle navigation
     function scrollByDirection(direction) {
         if (isTransitioning) return; // Prevent new transitions if one is in progress
@@ -144,6 +162,8 @@ function initialize() {
         } else {
             arrowLeft.classList.remove("disabled");
         }
+         // Enviar el evento de visualización de página
+        sendPageViewEvent(currentPageIndex);
     }
 
     // Scroll left
@@ -269,6 +289,12 @@ function initialize() {
             } else {
                 bt.innerHTML = "Mostrar acordes";
             }
+             // Enviar evento a Google Analytics
+        gtag('event', 'boton_acordes', {
+            'event_category': 'Interacción',
+            'event_label': `Canción ${songId}`,
+            'value': 1
+        });
         });
     });