DEV Community

loading...
Cover image for Cómo añadir Google Analytics a su sitio con Hugo

Cómo añadir Google Analytics a su sitio con Hugo

charly3pins
By day I’m a Software Engineer. By night I’m open sourcing, learning, reading, listening and blogging. In love with Go and willing to learn new things every day. Posts in English and Spanish.
Originally published at charly3pins.dev on ・2 min read

Google Analytics

En primer lugar, lo que necesita es obtener un ID de seguimiento de Google Analytics. Para eso, debe registrarse en Google Analytics. Luego, debe crear un ID de seguimiento siguiendo los siguientes pasos:

  • Haga clic en el botón Admin (en la esquina inferior izquierda).
  • Haga clic en el botón "Crear cuenta".
  • Después de completar todos los pasos, haga clic en el botón "Crear" y acepte los términos y condiciones.

Después de completar estos pasos, obtendrá su ID de seguimiento. Cópielo para agregarlo a su sitio de Hugo más tarde.

Configuración de Hugo

Ahora es el turno de agregar el ID de seguimiento a su sitio.
La forma más sencilla de hacerlo es utilizando la [plantilla interna] de Hugo (https://gohugo.io/templates/internal/#google-analytics) proporcionada por Hugo. Solo necesita agregar una nueva variable llamada googleAnalytics con el tracking ID obtenido del paso anterior en su config.toml como:

googleAnalytics = "UA-123-45"
Enter fullscreen mode Exit fullscreen mode

El siguiente paso es agregar el siguiente fragmento de código en su sitio:

{{ template "_internal/google_analytics.html" . }}
Enter fullscreen mode Exit fullscreen mode

Debería buscar la plantilla parcial head y agregarla dentro de las etiquetas <head> </head>.

Comprobando la integración

Antes de pasar eso a producción, puede probarlo ejecutando su sitio localmente realizando el siguiente comando:

hugo serve
Enter fullscreen mode Exit fullscreen mode

La URL predeterminada en localhost es http://localhost:1313.

Vuelva a abrir o actualice Google Analytics en una pestaña diferente.

Verifique el tablero y debería poder ver el número en la sección Usuarios activos en este momento como 1 como la imagen a continuación:
active-users

No dude en comentar aquí o contactarme en mis redes sociales para cualquier comentario, pregunta o sugerencia.

Discussion (0)