Integración de GA4 vía Shopify Custom Pixel

Última actualización el 13 may 20264 min de lectura

Índice de contenidos

• En resumen
• Envío de los datos de Varify mediante GTM o GTAG a través del Custom Pixel de Shopify
• Opción 1: Integración con Google Tag Manager
• Opción 2: Integración directa con GA4

important

AVISO IMPORTANTE: Estas instrucciones solo deben seguirse si has integrado Google Tag Manager o Google Analytics 4 directamente a través del Shopify Custom Pixel.

En resumen

En esta guía, aprenderás a enviar eventos de Varify a Google Analytics 4 mediante la integración de Custom Pixel de Shopify. Aprenderás a enviar los eventos de Varify a Google Analytics 4 utilizando Google Tag Manager o mediante la integración directa de gtag.

Envío de los datos de Varify mediante GTM o GTAG a través del Custom Pixel de Shopify

Paso 1: Selección de la conexión de Analytics "Shopify App / Custom Pixel"

Ve a app.varify.io y haz clic en “Go to tracking setup”. Luego selecciona “Google Analytics 4 (Shopify Custom Pixel Integration)" en el Tracking Setup Wizard. Sigue los pasos del asistente de configuración. Solo es necesario seguir los pasos de la opción 1 a continuación si ya estás utilizando GTM en tu sitio. Si has integrado GA directamente sin el GTM, ve directamente a la opción 2.

Opción 1: Integración con Google Tag Manager

Sigue los pasos de esta guía si has integrado Google Tag Manager en tu Shopify Custom Pixel. Si envías tus datos directamente vía gtag, es decir, integración directa de GA4 mediante Custom Pixel, sigue estos pasos Instrucciones.

Paso 2: Añade la función varify analytics.subscribe en el custom pixel del GTM

Abre el área "Customer events" en el backend de Shopify y abre el custom pixel en el que has integrado tu GTM.

El evento de Varify se crea usando el analytics.subscribe añadido a tu DataLayer. En la captura de pantalla, puedes ver el evento de Varify insertado al final.

Añade el siguiente código a tu Custom Pixel debajo del código de Google Tag Manager:

analytics.subscribe('varify', (event) => {
  window.dataLayer.push({
   'event': "varify",
    ...event.customData   
  });
});

Paso 3: Desactivar la opción "Start Tracking on Activation Event"

En «Tracking Options», ve a «Advanced Setup». Desactiva la opción «Start Tracking on Activation Event».

Paso 4: Configurar el Google Tag Manager

1. Creación de una nueva variable de capa de datos (VA Short)

Esta variable se utiliza para proporcionar a una etiqueta la información del test A/B.

1. Crea una nueva variable: "Variables" > "Nueva"
2. Tipo de variable -> "Variable de la capa de datos"
3. Nombre de la variable de la capa de datos -> varify_abTestShort (ortografía obligatoria)
4. Nombra la variable -> VA Short

2. crea un nuevo activador (Varify.io - Event)

El activador es el evento decisivo que dispara el envío de datos al sistema de Analytics.

1. Nombre del activador: p. ej. "Varify.io - event"
2. Tipo de activador: "Evento personalizado"
3. Nombre del evento: varify (ortografía obligatoria)

3. creación de una nueva etiqueta de GTM (Varify.io - GA4 Tracking Linker)

Las etiquetas son fragmentos de código que envían los valores almacenados en las variables a tu herramienta de analítica, como Google Analytics. Ahora crea una etiqueta sochles para enviar los valores de la variable creada a Google Analytics.

1. Nombre de la etiqueta: "Varify.io - GA4 Tracking Linker"
2. Etiqueta de configuración: [usa tu etiqueta GA4 existente].
3. Nombre del evento: p. ej. "Abtesting"
4. Nombre del parámetro: varify_abTestShort (Ortografía obligatoria)
5. Valores: {{VA Short}} (La variable creada en el paso 1)
6. Activador: "Varify.io - event" (El activador creado en el paso 2)

4. Publicar el contenedor de GTM

Para asegurarte de que tus ajustes en Google Tag Manager también funcionen en tu sitio web, es importante publicar los cambios.

Para ello, ve a "Overview" en el Tag Manager, a la izquierda. Aquí puedes ver una vista general de todos los elementos que acabas de crear.

Para publicar, haz clic en el botón azul "Publish" en la parte superior derecha y confirma. La etiqueta ahora está activa y envía los datos a tu Google Analytics.

Opción 2: Integración directa con GA4

Sigue los pasos de esta guía si has integrado el gtag en tu Shopify Custom Pixel (si envías datos directamente a Google Analytics 4)

Paso 2: Añade la función analytics.subscribe de varify en el custom pixel del gtag

Accede al área “Customer events” en el backend de Shopify y abre el custom pixel en el que has integrado tu gtag.

El evento de Varify se crea mediante el analytics.subscribe añadido a tu DataLayer. En la captura de pantalla, puedes ver el evento de Varify insertado al final.

Añade el siguiente código a tu Custom Pixel debajo del código de Google Tag Manager:

// Start Varify subscribe event
analytics.subscribe("varify", (event) => {
  const d = event?.customData || {};

  gtag("event", "varify", {
    storageType: d.storageType,
    teamId: d.teamId,
    varify_abTest: d.varify_abTest,
    varify_abTestLong: d.varify_abTestLong,
    varify_abTestShort: d.varify_abTestShort,
    varify_error: d.varify_error,
    varify_experimentId: d.varify_experimentId,
    varify_experimentName: d.varify_experimentName,
    varify_success: d.varify_success,
    varify_variationId: d.varify_variationId,
    varify_variationName: d.varify_variationName
  });
});
// End Varify subscribe event

Paso 3: Desactivar la opción "Start Tracking on Activation Event"

En «Tracking Options», ve a «Advanced Setup». Desactiva la opción «Start Tracking on Activation Event».

Aviso: Varify no asume ninguna responsabilidad por la funcionalidad del código y la información.
Es responsabilidad del usuario probar el código exhaustivamente e implementarlo correctamente.