Tooldata Academia
Lección 5 de 32•Configuración Correcta

Instalar código de tracking

Métodos para instalar GA4 en tu sitio: directo, GTM, plugins.

15 minutos

Una vez creada tu propiedad GA4, el siguiente paso crítico es instalar el código de tracking en tu sitio web. En esta lección exploraremos las diferentes formas de hacerlo y cuál es la más adecuada según tu situación.

Métodos de instalación

Hay tres formas principales de instalar GA4:

  1. Código directo (gtag.js) - Pegando JavaScript directamente
  2. Google Tag Manager (GTM) - A través de un contenedor de tags
  3. Plugins/Integraciones - Para CMS como WordPress, Shopify, etc.

Cada método tiene sus ventajas. Veamos cada uno en detalle.

Método 1: Código directo (gtag.js)

Este es el método más simple y directo. Google proporciona un snippet de JavaScript que se pega en todas las páginas del sitio.

Obtener el código

  1. Ve a Admin > Data Streams
  2. Selecciona tu stream web
  3. En la sección Tagging Instructions, haz clic en View tag instructions
  4. Selecciona Install manually
  5. Copia el código

El código gtag.js

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

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

Dónde pegar el código

El código debe ir en el <head> de todas las páginas, lo más alto posible:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mi Sitio Web</title>

  <!-- Google Analytics GA4 - Pegar aquí -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
  </script>

  <!-- Resto de meta tags y CSS -->
</head>
<body>
  <!-- Contenido -->
</body>
</html>

Importante: El código debe estar en TODAS las páginas. Si tu sitio tiene plantillas o includes, colócalo en el archivo de header común.

Opciones de configuración adicionales

Puedes personalizar el comportamiento de GA4 con parámetros en gtag('config'):

gtag('config', 'G-XXXXXXXXXX', {
  // Anonimizar IP (útil para GDPR)
  'anonymize_ip': true,

  // Desactivar pageview automático (si lo manejas manualmente)
  'send_page_view': false,

  // Configurar dominio de cookies
  'cookie_domain': 'miempresa.com',

  // Tiempo de expiración de cookies en segundos (2 años por defecto)
  'cookie_expires': 63072000,

  // Debug mode (solo para testing)
  'debug_mode': true
});

Ventajas del código directo

  • Simple y rápido de implementar
  • Sin dependencias externas
  • Menor latencia (menos requests)

Desventajas

  • Requiere acceso al código fuente
  • Cambios futuros requieren editar código
  • Menos flexible para tracking avanzado

Método 2: Google Tag Manager (GTM)

Google Tag Manager es un sistema de gestión de etiquetas que permite agregar y modificar tags sin tocar código. Es el método recomendado para la mayoría de los casos.

Paso 1: Crear cuenta de GTM

  1. Ve a tagmanager.google.com
  2. Crea una cuenta (una por organización)
  3. Crea un contenedor (tipo Web)
  4. Acepta los términos de servicio

Paso 2: Instalar GTM en tu sitio

GTM proporciona dos snippets de código:

Código para <head> (lo más alto posible):

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Código para <body> (inmediatamente después de abrir):

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Paso 3: Crear tag de GA4 en GTM

  1. En GTM, ve a Tags > New
  2. Haz clic en Tag Configuration
  3. Selecciona Google Analytics: GA4 Configuration
  4. Ingresa tu Measurement ID (G-XXXXXXXXXX)
  5. En Triggering, selecciona All Pages
  6. Nombra el tag: "GA4 - Configuration"
  7. Haz clic en Save

Paso 4: Publicar el contenedor

  1. Haz clic en Submit (esquina superior derecha)
  2. Agrega un nombre de versión: "GA4 Inicial"
  3. Haz clic en Publish

Ventajas de GTM

  • Sin necesidad de modificar código después de la instalación inicial
  • Fácil agregar y modificar eventos
  • Historial de versiones
  • Modo preview para testing
  • Equipos de marketing pueden gestionar tags

Desventajas

  • Request adicional (ligeramente más lento)
  • Curva de aprendizaje
  • Puede ser sobrecargado para sitios simples

Tip profesional: GTM es casi siempre la mejor opción. La flexibilidad que ofrece justifica la pequeña complejidad adicional.

Método 3: Plugins e integraciones

WordPress

Opción A: Plugin oficial Site Kit by Google

  1. Instala y activa el plugin Site Kit
  2. Conecta tu cuenta de Google
  3. Vincula GA4 desde el asistente

Opción B: Plugin MonsterInsights

  1. Instala y activa MonsterInsights
  2. Sigue el asistente de configuración
  3. Conecta tu propiedad GA4

Opción C: Insertar código manualmente

  1. Instala un plugin como "Insert Headers and Footers"
  2. Pega el código gtag.js en la sección de header

Shopify

  1. Ve a Online Store > Preferences
  2. En la sección Google Analytics, pega tu ID de medición (G-XXXXXXXXXX)
  3. O usa la integración nativa de Shopify con GA4

Wix

  1. Ve a Marketing & SEO > Marketing Integrations
  2. Conecta Google Analytics
  3. Ingresa tu ID de medición

Squarespace

  1. Ve a Settings > Advanced > External Services
  2. Agrega el código gtag.js completo

Verificar la instalación

Una vez instalado el código, debes verificar que funciona correctamente.

Método 1: Informe de tiempo real

  1. Ve a tu propiedad GA4
  2. Abre el Reporte de tiempo real
  3. Visita tu sitio en otra pestaña
  4. Deberías ver tu visita reflejada en segundos

Método 2: DebugView

DebugView muestra eventos en tiempo real con detalle:

  1. Activa el modo debug agregando ?debug_mode=true a tu URL
  2. O usa la extensión Google Analytics Debugger para Chrome
  3. Ve a Admin > DebugView en GA4
  4. Verás cada evento con sus parámetros

Método 3: Extensión Tag Assistant

  1. Instala la extensión Tag Assistant Companion de Chrome
  2. Visita tu sitio
  3. Haz clic en la extensión
  4. Verifica que GA4 aparece y está enviando datos

Método 4: Inspeccionar el código

  1. Abre DevTools en tu navegador (F12)
  2. Ve a la pestaña Network
  3. Filtra por "collect" o "analytics"
  4. Recarga la página
  5. Deberías ver requests a google-analytics.com

Troubleshooting común

No aparecen datos en tiempo real

Posibles causas:

  • Código no instalado en esa página específica
  • Bloqueador de ads activo (desactívalo para testing)
  • ID de medición incorrecto
  • Cache del navegador (limpia cache y recarga)

Solución:

  1. Verifica el código fuente (View Page Source)
  2. Busca "G-" para encontrar tu ID
  3. Confirma que el ID coincide con tu propiedad

Error de consent mode

Si tienes configurado consent mode y no has dado consentimiento:

// Los datos pueden no enviarse si el usuario no acepta cookies
gtag('consent', 'default', {
  'analytics_storage': 'denied'
});

Solución: Para testing, asegúrate de aceptar cookies o ajusta temporalmente el consent.

Datos solo en algunas páginas

Causa: El código no está en todas las páginas.

Solución: Verifica que el código está en el template común (header.php, _document.js, layout.html, etc.)

Eventos duplicados

Causa: El código está instalado múltiples veces (directo + GTM + plugin).

Solución: Usa UN solo método de instalación. Si usas GTM, elimina cualquier código directo.

Mejores prácticas de instalación

1. Usa HTTPS

GA4 funciona mejor en sitios con SSL. Si tu sitio no tiene HTTPS, considera migrarlo.

2. Un solo método

No mezcles instalación directa con GTM. Elige uno y úsalo consistentemente.

3. Documenta tu implementación

Mantén un documento con:

  • Método de instalación usado
  • ID de medición
  • Fecha de instalación
  • Eventos personalizados configurados

4. Configura alertas

Después de verificar que funciona, configura alertas de monitoreo para detectar si deja de recopilar datos.

5. Testing en staging primero

Si es posible, prueba la instalación en un ambiente de staging antes de producción.

Resumen

Para instalar GA4 correctamente:

  1. Elige un método: GTM (recomendado), código directo, o plugin
  2. Instala el código en todas las páginas
  3. Verifica usando tiempo real, DebugView, y Tag Assistant
  4. Documenta tu implementación

La instalación correcta es la base de todo lo que harás con GA4. Tómate el tiempo de verificar que funciona antes de continuar con configuraciones avanzadas.

En la próxima lección, profundizaremos en los Data Streams y cómo configurarlos para diferentes plataformas.

Completaste esta leccion?

Marca esta leccion como completada. Tu progreso se guardara en tu navegador.

Anterior
Crear propiedad GA4 desde cero
Siguiente
Configurar Data Streams (web y app)