Instalar Google Tag Manager y GA4 en Shopify con pixel personalizado

En la actualidad, la configuración del seguimiento de conversiones en Shopify ha generado confusión entre muchos comerciantes. Este desasosiego se debe, en gran medida, a los cambios significativos en el proceso de pago de Shopify, que ha llevado a muchos a preguntarse cómo implementar correctamente herramientas como Google Tag Manager (GTM) y Google Analytics 4 (GA4). Este artículo ofrece una guía detallada para facilitar este proceso, asegurando que tanto los comerciantes como los especialistas en seguimiento de conversiones puedan manejar la nueva dinámica de Shopify.

Para ayudar a los usuarios a navegar por estos cambios, hemos creado una solución integral que se puede añadir fácilmente a tu tienda Shopify. Después de descargar e instalar los tres scripts disponibles en nuestro repositorio de GitHub, el paso siguiente es configurar el contenedor de GTM.

Es importante tener en cuenta que, aunque aquí se ofrece una guía exhaustiva, siempre hay posibilidad de errores o características aún no implementadas. Agradecemos cualquier comentario o sugerencia para mejorar este proceso. La colaboración es bienvenida en nuestro repositorio de GitHub.

Configuración del Google Tag Manager y GA4 en Shopify

La instalación de Google Tag Manager y Google Analytics 4 en Shopify puede parecer un desafío, pero con la información correcta, este proceso se vuelve mucho más sencillo. A continuación, exploraremos los pasos necesarios para realizar esta integración eficazmente.

Eventos de cliente en Shopify

Con la depreciación de checkout.liquid, Shopify ha adoptado un enfoque diferente hacia la extensibilidad del proceso de pago. En lugar de confiar en métodos tradicionales como inyectar JavaScript personalizado en archivos de tema, la plataforma ahora promueve el uso de píxeles personalizados para captar interacciones de usuario en toda la tienda, desde la visualización de productos hasta la presentación de formularios.

Estos píxeles personalizados se gestionan desde la configuración de la tienda, bajo la sección de Eventos de Cliente. Estos eventos estandarizados representan acciones de usuario y son accesibles para su seguimiento mediante oyentes de eventos desde los píxeles personalizados. Esto permite recolectar datos sobre el comportamiento del usuario, que pueden ser enviados a la capa de datos del navegador para su uso en sistemas de gestión de etiquetas como GTM o ser dirigidos a plataformas de análisis como Google Analytics o Meta Ads.

Beneficios de los eventos de cliente en Shopify

La implementación de eventos de cliente en Shopify ofrece una serie de ventajas significativas:

• Accesibilidad para todos los comerciantes: A diferencia de antes, donde el seguimiento detallado del proceso de pago era exclusivo para comerciantes de Shopify Plus, ahora está disponible para todos los usuarios de Shopify.
• Mayor seguridad: Los píxeles personalizados operan en un iFrame secundario, lo que crea un entorno aislado que aumenta la seguridad al restringir la ejecución de scripts arbitrarios.
• Gestionabilidad simplificada: La centralización del seguimiento de conversiones facilita su gestión y mantenimiento, lo que permite a los comerciantes actualizar y monitorear sus configuraciones de manera más eficiente.
• Enfoque en la privacidad: Los píxeles personalizados pueden clasificarse bajo categorías de marketing, análisis o preferencias, ayudando a alinearse con los banners de consentimiento nativo de Shopify.

Limitaciones de los eventos de cliente

A pesar de los beneficios, la nueva configuración también presenta algunas limitaciones que es importante considerar:

• Acceso limitado al DOM: La configuración en sandbox restringe el acceso directo al DOM, lo que dificulta el uso de disparadores estándar de GTM.
• Modo de vista previa no funcional: El entorno aislado impide que el Modo de Vista Previa de GTM funcione, lo que complica la prueba y depuración.
• URLs de página contaminadas: Los píxeles personalizados en un iFrame no pueden acceder a la información de la página principal, lo que resulta en URLs con cadenas no deseadas.
• Problemas de seguimiento de usuarios: El evento user_engagement no se registra correctamente, lo que afecta la precisión de métricas relacionadas con el tiempo de compromiso.

Incorporando códigos en Shopify

Si estás listo para proceder a la instalación de Google Tag Manager y GA4, aquí te mostramos cómo hacerlo de manera efectiva.

Repositorio de GitHub para scripts

Los scripts necesarios para el seguimiento se pueden descargar desde nuestro repositorio de GitHub. Con estos scripts, podrás rastrear una variedad de eventos, que incluyen:

• page_view
• view_item_list
• view_item
• add_to_cart
• view_cart
• remove_from_cart
• begin_checkout
• add_shipping_info
• add_payment_info
• purchase
• view_search_results
• form_submit
• clicks

Notas importantes para la implementación

Asegúrate de considerar lo siguiente antes de comenzar con la instalación:

• Actualización a la extensibilidad del checkout: Debes actualizar tu tienda para utilizar los eventos de cliente y los píxeles personalizados.
• Evitar datos duplicados: Desactiva otras herramientas que puedan estar enviando datos de eventos a Google Analytics para evitar duplicados.
• Problemas de atribución: Monitorea de cerca los datos de atribución, ya que el uso de píxeles personalizados podría afectar la precisión de la atribución en algunos casos.

Instrucciones de instalación

La instalación requiere insertar tres scripts en ubicaciones específicas dentro de Shopify. Aquí están los pasos detallados:

• Insertar el script de eventos de cliente: Este script escucha eventos de clic en el frontend y lo envía al píxel personalizado. Crea un nuevo fragmento en la sección de fragmentos de tu tema y nómbralo ‘gtm-customer-events-storefront’.
• Agregar el script del tema: Localiza el archivo theme.liquid y añade el contenido del script del tema en la sección .
• Configurar el píxel personalizado: En la configuración de la tienda, ve a Eventos de Cliente, añade un píxel personalizado y reemplaza el código de marcador de posición con el contenido del script del píxel personalizado.

Pruebas de instalación

La prueba en este entorno no es tan sencilla debido a la falta de funcionalidad del Modo de Vista Previa de GTM. Aquí hay algunas estrategias que puedes utilizar:

• Observación de la capa de datos: Usa las herramientas de desarrollo del navegador para acceder a la capa de datos y asegurarte de que los valores se están poblados correctamente.
• Registro en consola: Agrega código de registro a cada evento en el script del píxel personalizado para verificar los datos antes de que se envíen a Google Analytics.
• Solicitudes de red: Utiliza la pestaña de «Red» en las herramientas de desarrollador para verificar la información que se envía a Google Analytics 4.

Seguimiento de vistas de páginas

El seguimiento de vistas de páginas implica suscribirse al evento page_viewed de Shopify y enviarlo como page_view a la capa de datos para los propósitos de GTM. Para asegurar que los parámetros de página estén limpios, extraemos la información de la página directamente del event.context.document.

Eventos de ecommerce

Se rastrean eventos de ecommerce a lo largo del viaje del cliente, como se detalla a continuación:

Evento de cliente de Shopify	Evento enviado a la capa de datos
collection_viewed	view_item_list
product_viewed	view_item
product_added_to_cart	add_to_cart
cart_viewed	view_cart
product_removed_from_cart	remove_from_cart
checkout_started	begin_checkout
checkout_shipping_info_submitted	add_shipping_info
payment_info_submitted	add_payment_info
checkout_completed	purchase

Seguimiento de búsquedas en el sitio

El seguimiento de búsqueda en el sitio se implementa al suscribirse al evento search_submitted de Shopify, enviándolo a la capa de datos como view_search_results.

Seguimiento de envíos de formularios

Podemos rastrear envíos de formularios al suscribirnos al evento form_submitted de Shopify. Este evento se envía a la capa de datos como form_submit.

Seguimiento de clics

El seguimiento de clics requiere un enfoque híbrido debido a limitaciones con el evento de clic de Shopify. Mientras que este evento rastrea clics en elementos, hemos implementado eventos de clic personalizados en las páginas del frontend para capturar tanto clics en elementos como en enlaces.

Contenido adicional: grupos de contenido y plantilla de GTM

Para enriquecer tus análisis, puedes implementar el seguimiento de grupos de contenido, permitiendo desglosar los informes por tipos de páginas. También ofrecemos una plantilla de contenedor GTM que funciona sin problemas con nuestros scripts de seguimiento.

Este artículo proporciona una guía exhaustiva para configurar Google Tag Manager y Google Analytics 4 en Shopify. Siguiendo estos pasos y utilizando los scripts proporcionados, podrás establecer un sistema de seguimiento eficaz que te permitirá obtener valiosos datos sobre el comportamiento de tus clientes y optimizar tus estrategias de marketing.