Cómo configurar Google Analytics 4 con Google Tag Manager y CookieYes

  1. 26-10-2023
  2. Google Analytics
  3. Javier Cerezo

Si tienes un sitio web y quieres conocer el comportamiento de tus visitantes, medir el rendimiento del sitio o gestionar de forma eficiente las cookies, en esta guía te mostraré cómo configurar Google Analytics 4 (GA4) con Google Tag Manager (GTM) y CookieYes en WordPress.

Herramientas necesarias para configurar Google Analytics 4

Las herramientas que vas a necesitar para completar esta guía de instalación de GA4 en tu sitio web son:

  • Google Analytics 4. Es una potente herramienta de análisis web, además es gratuita, que te ayuda a comprender la procedencia, el comportamiento y las características de los usuarios que visitan tu sitio web. De GA4 necesitaremos el ID de medición.
  • Google Tag Manager. Es una herramienta que facilita la gestión de etiquetas y fragmentos de código en tu sitio web sin necesidad de modificar el código fuente directamente. Al igual que GA4, también es gratuita. De GTM necesitaremos el ID de contenedor.
  • CookieYes. Es una herramienta que te permite gestionar las cookies (scripts) de tu sitio web y registrar el consentimiento de los usuarios para cumplir con las distintas regulaciones de privacidad. De CookieYes necesitaremos el Website Key.
  • GTM4WP. Es un plugin que simplifica la implementación de Google Tag Manager en WordPress. También existen alternativas para otros CMS y siempre tienes la posibilidad de no utilizar ningún plugin y hacer la integración de forma manual con las instrucciones que facilita GTM.

Pasos para configurar GA4 en tu sitio web

Los pasos que detallo a continuación te permitirán obtener una información muy valiosa sobre tus usuarios pero sobre todo cumplir con la actual regulación europea de privacidad de datos (RGPD), ¡vamos allá!

Crear una cuenta, una propiedad y un flujo de datos en Google Analytics 4

Para empezar a configurar Google Analytics 4, sigue estos pasos:

  1. Accede a https://analytics.google.com/ e inicia sesión con tu cuenta de Google o crea una nueva, sí aún no la tuvieras.
  2. En el panel de control, haz clic en «Administrar» en la parte inferior izquierda.
  3. En el botón «Crear«, selecciona «Cuenta» o elige una existente en el menú superior (junto al buscador). Las cuentas son el punto de acceso a Google Analytics 4 y agrupan las propiedades. Puedes crear hasta 100 cuentas.
  4. Si creas una cuenta, debes completar únicamente el campo «Nombre de la cuenta» y aceptar los Términos del Servicio de Google Analytics.
  5. Luego, crea una «Propiedad» de GA4 dentro de la cuenta creada o seleccionada en el paso anterior, debes incluir el nombre de la propiedad, la zona horaria y el país. Una propiedad es un sitio web, app o ambos. Puedes crear hasta 2.000 propiedades por cuenta.
  6. A continuación, completa los «Detalles de la empresa» y los «Objetivos del negocio«, no te preocupes si no lo tienes claro en el momento de seleccionar las opciones ya que podrás modificarlo más tarde.
  7. Crea un «Flujo de datos» de tipo «Web«. Cada flujo posee un código de medición único para recopilar datos. Puedes crear hasta 50 flujos de datos por propiedad y existen 3 tipos: Web, iOS y Android.
  8. Por último, copia tu identificador de seguimiento de GA4 «G-XXXXXXX» desde la configuración del flujo (ver imagen). Este ID es esencial para conectar tu sitio web con GA4. Para conservar el identificador durante los siguientes pasos, puedes abrir el bloc de notas y pegarlo ahí.

Crear una cuenta, una propiedad y un flujo de datos en Google Analytics 4

Crear una cuenta y un contenedor de Google Tag Manager

Con GTM puedes gestionar también códigos de seguimiento de Google Ads, Meta Ads, TikTok Ads o cualquier otra etiqueta que necesites configurar en tu sitio web, como la configuración de los eventos de GA4. Sigue estos pasos para configurar GTM:

  1. Visita https://tagmanager.google.com/ y accede con tu cuenta de Google.
  2. Crea una nueva «Cuenta» de GTM si aún no tienes una o selecciona una existente en el menú superior (si, junto al buscador). Las cuentas son el punto de acceso a Google Tag Manager y agrupan los contenedores.
  3. Completa la información de tu cuenta y crea un «Contenedor«. Asegúrate de seleccionar «Sitio web». Un contenedor es un grupo de etiquetas, activadores, variables y opciones de configuración y actualmente existen 5 tipos: Web, iOS, Android, AMP y Server.
  4. Por último, copia tu identificador de contenedor GTM «GTM-XXXXXX» desde la página de configuración del contenedor o desde el espacio de trabajo (ver imagen). Este ID es necesario para vincular GTM con tu sitio web. Para conservar el identificador durante el resto de pasos, pégalo en el blog de notas.

Crear una cuenta y un contenedor de Google Tag Manager

Crear una cuenta y un sitio en CookieYes

CookieYes es una solución de pago pero cuenta con un plan gratuito que te permite dar de alta un sitio web con hasta 25,000 páginas vistas mensuales y escanear hasta 100 páginas para detectar la existencia de cookies. En caso de no ser suficiente, sus planes son económicos desde 9€/mes. Para comenzar, sigue estos pasos:

  1. Visita https://cookieyes.com/ y regístrate para obtener una cuenta gratuita.
  2. Después de iniciar sesión en tu cuenta de CookieYes, debes crear un nuevo sitio.
  3. Completa la información de tu sitio web, incluyendo la URL, y a continuación haz clic en «Site settings» en el menú superior, luego pulsa sobre el botón «Get Installation code» y copia sólo tu «Website Key» (ver imagen), es un código alfanumérico único que se utiliza para integrar CookieYes con tu sitio web. No copies el script completo. Anota de nuevo este código en el bloc de notas, ya que lo necesitarás más adelante.

Crear una cuenta y un sitio en CookieYes

Importar contenedor de Google Tag Manager con la configuración de CookieYes y Google Analytics 4

Una vez hemos creado las cuentas en GA4, GTM y CookieYes, ya podemos comenzar a conectar las distintas herramientas entre sí.

Y para simplificar aún más este proceso, he creado un contenedor en GTM que ya incluye las etiquetas, activadores, variables y plantillas necesarias para que todo funcione correctamente. Este contenedor incluye:

  • Variables
    • CookieYes – Cookie. Variable de tipo «Cookie de origen» para configurar la cookie cookie-consent de CookieYes.
    • CookieYes – Website Key. Variable de tipo «Constante» para configurar Website Key en la etiqueta «CookieYes».
    • Google Analytics 4 – ID. Variable de tipo «Constante» para configurar ID Google Analytics 4 en la etiqueta «Google Tag».
  • Activadores
    • CookieYes – Cookie Análisis. Activador de tipo «Evento personalizado» para detectar el estado de consentimiento en la cookie «cookie-consent» de CookieYes de las cookies analíticas. Es activador es necesario para el correcto funcionamiento de Google Analytics.
    • CookieYes – Cookie Publicidad. Activador de tipo «Evento personalizado» para detectar el estado de consentimiento en la cookie «cookie-consent» de CookieYes de las cookies publicitarias. Este activador no vamos a usarlo en esta guía aunque lo he incluido ya que te será de utilidad para configurar etiquetas de plataformas publicitarias como Meta Ads, Google Ads, TikTok Ads, etc.
  • Etiquetas
    • CookieYes. Etiqueta de tipo CookieYes preconfigurada con el activador de GTM «Inicialización del consentimiento – Todas las páginas».
    • Google Analytics 4. Etiqueta de tipo Google Tag preconfigurada con el activador «CookieYes – Cookie Análisis».
  • Plantilla Oficial de CookieYes. Necesaria para configurar la etiqueta «CookieYes». Se actualiza periódicamente por lo que recomiendo que una vez importado el contenedor compruebes si tienes la última versión, en caso contrario, la actualización requiere un simple clic y listo.

Para importar el contenedor de GTM sigue estos sencillos pasos:

  1. Accede al siguiente enlace para descargar de Google Drive un fichero JSON con una configuración específica de GTM.
  2. Accede a tu contenedor de GTM.
  3. En el panel de GTM, haz clic en «Administrar» y selecciona «Importar contenedor«.
  4. Si tu contenedor es nuevo, selecciona el espacio de trabajo existente «Default Workspace» y como opción de importación «Sobrescribir«.
  5. Si tu contenedor ha sido configurado previamente, deberás revisar en primer lugar que no haya etiquetas, activadores o variables duplicadas que puedan generar posibles conflictos. En este caso, lo recomendable es seleccionar como opción de importación «Combinar» para mantener los ajustes previos o crear otro espacio de trabajo.

Importar contenedor de Google Tag Manager con la configuración de CookieYes y Google Analytics 4

Añadir Website Key a la etiqueta CookieYes de Google Tag Manager

Para asegurarte de que CookieYes funcione correctamente en tu sitio web, debes agregar el Website Key que obtuviste anteriormente. Sigue estos pasos:

  1. En tu contenedor de GTM, navega a la sección de «Variables«.
  2. Haz clic en la variable «CookieYes – Website Key» y nuevamente haz clic en la «Configuración de la variable» para editarla.
  3. Reemplaza el «Valor» por defecto «XXXXXXXX» por tu Website Key y guarda la configuración.

Añadir Website Key en la etiqueta CookieYes de Google Tag Manager

Añadir el ID de Google Analytics 4 a la etiqueta Google Tag de GTM

Para configurar Google Analytics 4 en tu sitio web a través de GTM, necesitas configurar la etiqueta Google Tag. Sigue estos pasos:

  1. En tu contenedor de GTM, navega a la sección de «Variables«.
  2. Haz clic en la variable «Google Analytics 4 – Identificador» y nuevamente haz clic en la «Configuración de la variable» para editarla.
  3. Reemplaza el «Valor» por defecto «G-XXXXXXXX» por tu ID de medición de Google Analytics 4 y guarda la configuración.
  4. Por último, debes publicar todos los cambios del contenedor, para ello haz clic en el botón «Enviar» que se encuentra junto al identificador de GTM en la parte superior derecha.

Añadir el ID de Google Analytics 4 en la etiqueta Google Tag de GTM

Añadir el ID de Google Tag Manager en WordPress con el plugin GTM4WP

Si tu sitio web funciona con WordPress, puedes simplificar la integración de GTM utilizando el plugin «GTM4WP», en caso contrario puede utilizar otras integraciones disponibles o también incluir manualmente el código de contenedor de GTM, siguiendo sus instrucciones. Sigue estos pasos:

  1. Inicia sesión en tu panel de administración de WordPress.
  2. En el menú de la izquierda, ve a «Plugins» y selecciona «Agregar nuevo«.
  3. Busca «GTM4WP» y haz clic en «Instalar ahora«. Activa el plugin una vez que se haya instalado.
  4. Después de instalar el plugin GTM4WP, ve a «Ajustes > Google Tag Manager» en el menú de la izquierda.
  5. Ingresa tu ID de contenedor GTM «GTM-XXXXXX» en el campo correspondiente.
  6. Guarda la configuración.

Añadir el ID de Google Tag Manager en WordPress con el plugin GTM4WP

Comprobar que todo funciona y se recogen datos en Google Analytics 4

Una vez que hayas completado todos los pasos anteriores, es importante comprobar que se están recogiendo datos correctamente. Para hacerlo:

  1. Asegúrate de que tu sitio web esté en funcionamiento y sea accesible.
  2. Accede a CookieYes, ve al apartado «Cookie Manager» y pulsa el botón «Scan now«. Una vez haya finalizado el escaneo, deberían aparecer en el listado de cookies, al menos, las siguientes: «cookieyes-consent», «_ga» y «_ga:*».
  3. Accede a tu contenedor de Google Tag Manager y pulsa el botón «Vista previa» ubicado en la parte superior derecha de la pantalla. Se abrirá una nueva pestaña, a continuación añade la URL de tu sitio web y pulsa el botón «Connect». Tras esto se abrirá una nueva pestaña con tu sitio web. Acepta las cookies en el banner de consentimiento de CookieYes.
  4. Por último, accede a Google Analytics 4, haz clic en «Administrar» en la parte inferior izquierda. Haz clic en la opción «DebugView» dentro de la propiedad. En la siguiente pantalla verás una línea de tiempo, en el momento en el que empieces a navegar por tu sitio web, está línea se irá actualizando con las acciones realizadas.

Comprobar que todo funciona y se recogen datos en Google Analytics 4

Si has seguido correctamente todos los pasos detallados en esta guía para configurar Google Analytics 4 con Google Tag Manager y CookieYes, ya puedes empezar a recopilar información sobre tus usuarios, y lo más importante, cumpliendo con el Reglamento General de Protección de Datos. En próximos artículos profundizaremos en la configuración avanzada de Google Analytics 4 para sacarle el máximo partido a este herramienta.

Entradas sobre Google Analytics que pueden interesarte

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Te informamos que los datos de contacto de carácter personal recogidos serán tratados por Javier Cerezo Medina, como responsable de tratamiento. La finalidad es hacerte llegar la información solicitada bajo tu consentimiento, además de nuestras ofertas comerciales, en caso de haberlo manifestado. Tus datos no se cederán a terceros, salvo obligación legal. Puedes ejercer tus derechos de acceso, rectificación, supresión, oposición, limitación y portabilidad en rebelate@brandalismo.es. Más información Política de privacidad.