Google Analytics para Jekyll

by Fredy Sandoval

Posted on September 16, 2022.

Google Analytics para Jekyll

El sistema de Monitoreo de Google Analytics es un servicio gratis, ofrecido por Google. Que monitorea y reporta el tráfico de una página Web. En este tutorial, te mostraré como agregar en nuevo script “Global Site Tag” a tu sitio de Jekyll.

Paso 1.

Has Login en tu sitio de Google Analitics y crea una nueva propiedad para recibir un “Tracking ID” para tú página Web. Ejemplo: XX-XXXXXX

Paso 2.

Instalando el tracking de Google Analytics

primero crea un nuevo archivo llamado analytics.html en tu archivo llamado _includes .

Ahora Copia y pega el siguiente código “Global Site Tag” (gtag.js) en tu archivo llamado analytics.html y guárdalo.

<script async src="https://www.googletagmanager.com/gtag/js?id=G-M7RTRWEW1C"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-M7RTRWEW1C');
</script>

Encontrarás tu propio código en la página de Google Analytics (gtag.js) Admin > Property > Tracking info > Tracking code. Tu propio codigo “Tracking ID” se muestra en la parte superior de la pagina.

El {{ site.google_analitics }}" que e incluido arriba, te permitirá configurar tu propio Tracking ID en el archivo _config.yml.

Añadiendo tu Tracking ID de Google Analytics a tu Jekyll archivo de configuración

Abre tu _config.yml y agrega las siguientes líneas de código. Es importante que incluyas tu propio “Tracking ID” asi que remplaza XX-XXXXXX por el código de tu propia página.

# Google Analytics
google_analytics: UA—XXXXXXXX-X

Finalmente

Google recomienda colocar el script dentro de la sección <head> de tu página web, para que funcione correctamente.

{% if site.google_analytics and jekyll.environment == 'production' %}
  {% include analytics.html %}
{% endif %}

En el futuro, cuando tú ejecutes bundle exec jekyll serve la parte de Google Analytics no se vera afectada si esta accedes a la página localmente. “localhost:4000”.

Si necesitas que se muestre el tag dentro de un entorno de desarrollo, puedes ejecutar

JEKYLL_ENV=production bundle exec jekyll build

Siempre asegúrate manualmente que tu tag está insertado correctamente.