Integración de Google Analytics en tu sitio web paso a paso

Clase 14 de 17 • Curso de Introducción a Jamstack

Resumen

¿Cómo integrar Google Analytics en tu sitio web?

Medir y analizar los datos de nuestros visitantes es clave para mejorar la estrategia de contenido en cualquier sitio web. Para lograrlo, utilizar herramientas como Google Analytics ofrece la posibilidad de rastrear de manera efectiva quién visita tu página y cómo interactúa con ella. Esto es especialmente útil si, en algún momento, se planea ejecutar campañas de marketing o ventas.

¿Preparativos necesarios para comenzar?

Para poder integrar Google Analytics en tu sitio, necesitarás:

Tener una cuenta de correo electrónico en Gmail.
Acceder al enlace para Google Analytics que se proporcionará en los recursos mencionados.
Crear una cuenta en Google Analytics e identificar el nombre de tu dominio de manera clara y precisa.

¿Configuración inicial de Google Analytics?

Crear una cuenta y propiedad: Decide si deseas compartir o no datos con Google. Asigna un nombre a la cuenta y configura el huso horario acorde a tu ubicación. Por ejemplo, si estás en Colombia, el huso horario sería GMT -5.
Definir el sector y objetivo: Selecciona el sector en el que se desempeña tu sitio web. En el ejemplo proporcionado, el sector es "informática". También establece para qué usarás Google Analytics. Esto puede incluir la medición de la interacción de los usuarios o rastrear datos de múltiples dispositivos y plataformas.
Aceptar términos y acuerdos: Lee y comprende los términos de uso. Es importante considerar traducirlos a tu idioma y revisarlos basándote en las leyes locales.

¿Cómo integrar Google Analytics en tu sitio web?

Una vez que haya sido creada la cuenta en Google Analytics, se debe elegir el recurso que deseas rastrear. En este ejemplo se elige una página web.

Configurar el dominio en modo seguro: Asegúrate de que tu sitio esté habilitado en HTTPS.
Anotar el código de seguimiento: Google Analytics te proporcionará un código de seguimiento. Este código debe ser integrado en tu sitio a través del editor de código de tu elección.
Modificar el documento de páginas: Si usas una plataforma como Next.js, es esencial modificar el archivo _document.js para añadir el script de seguimiento.

// Ejemplo de inserción del script de Google Analytics
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }
  
  render() {
    return (
      <Html>
        <Head>
          {/* Aquí se añade el script de Google Analytics */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
                (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','https://www.google-analytics.com/analytics.js','ga');
                ga('create', 'TU_CODIGO_DE_RASTREO', 'auto');
                ga('send', 'pageview');
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

¿Cómo finalizar la integración?

Finalmente, para que los cambios tengan efecto:

Guardar y enviar los cambios: Es importante guardar toda esta información. Usa comandos Git para guardar y subir los cambios a producción.

# Comandos para guardar y subir cambios a la nube
git status
git add .
git commit -m "Integración de Google Analytics"
git push origin master

Una vez que el código esté en producción, Google Analytics podrá empezar a recopilar y mostrar datos sobre el tráfico de tu sitio web, lo cual es crucial para tomar decisiones basadas en datos sólidos. ¡Anímate a explorar y seguir aprendiendo sobre cómo mejorar tu presencia en línea!