Cómo configurar el seguimiento de comercio electrónico GA4 en Shopify

A estas alturas, debe saber que Google cancelará Universal Analytics en julio de 2023 y trasladará todo a GA4. Esto significa que los propietarios de sitios web deben configurar GA4 lo antes posible. Para los sitios web de comercio electrónico, existe la complicación adicional de hacer que el seguimiento de comercio electrónico funcione también en GA4. Para las tiendas Shopify, este proceso fue realmente simple en Universal Analytics, pero es más desafiante en GA4.

Siga leyendo para conocer un proceso sencillo para configurar el seguimiento de comercio electrónico GA4 en cualquier sitio web de Shopify sin necesidad de instalar aplicaciones ni usar desarrolladores.

Si bien cualquiera debería poder seguir esta guía, será más fácil si tiene una comprensión básica de cómo funciona GTM.

Crear capa de datos en Shopify

Nuestra primera tarea es crear una capa de datos. La capa de datos es un código simple que contiene información sobre la sesión del sitio web de un visitante. Esta información luego se puede pasar a otras plataformas como GTM.

Hemos creado una capa de datos para ti que va en la página de pedido completo de Shopify. Se completa automáticamente con información sobre el pedido del cliente, como el valor del pedido, los costos de envío y los artículos comprados.

• Copie y pegue la secuencia de comandos a continuación en el campo de secuencias de comandos de 'pago' en la configuración de administración de Shopify. Esto se puede encontrar yendo a 'Configuración> Pago y cuentas> Scripts adicionales'

• Esta capa de datos envía un evento de 'compra' a GTM que contiene información sobre el pedido del cliente.

 {% if first_time_accessed %} <script> dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. window.dataLayer.push({ 'event': 'purchase', ecommerce: { 'transaction_id': '{{ order.name || order.order_number }}', 'value': {{ total_price | money_without_currency | remove:',' }}, // Includes tax & shipping 'tax': {{ tax_price | money_without_currency | remove:',' }}, 'shipping': {{ shipping_price | money_without_currency | remove:',' }}, 'currency': '{{ shop.currency }}', 'payment_type': '{{ order.transactions[0].gateway }}', //optional parameter 'items': [ {% for line_item in line_items %} { 'item_id': '{{ line_item.sku || line_item.product_id }}', //if no SKU exists, use product Id 'item_name': '{{ line_item.product.title }}', 'discount': {{ line_item.line_level_total_discount | money_without_currency }}, 'item_variant': '{{ line_item.variant.title }}', 'price': {{ line_item.final_price | money_without_currency }}, 'quantity': {{ line_item.quantity }} }, {% endfor %} ]} }); </script> {% endif %}**

Crear disparador de disparo en GTM

Ahora necesitamos configurar un activador que se active cuando los clientes completen un pedido. Cuando se activa el disparador, la etiqueta que contiene la información del pedido se envía a GA4.

Necesitamos definir las condiciones en las que se dispara nuestro activador de compra. La condición para nuestro activador será cuando se presione el evento de compra en nuestra capa de datos. Para configurar esto:

• Inicie sesión en GTM, vaya al menú de la izquierda y seleccione 'Activadores'
• Presiona el botón azul 'Nuevo'
• Llame a su disparador 'GA4 - Compra'
• Presione el ícono 'editar' en la esquina de la ventana 'Configuración del disparador'
• En 'Elegir tipo de activador', seleccione 'Evento personalizado'
• En el campo 'Nombre del evento' escribe 'comprar'
• Establezca 'Este activador se activa' en 'Algunos eventos personalizados'
• Establezca las condiciones del evento en:
• Evento - Igual - Compra

Cuando hayas terminado, debería verse así:

Crear variables de capa de datos en GTM

Antes de configurar nuestra etiqueta, debemos crear variables GTM para obtener información de nuestra capa de datos. Si las variables son nuevas para usted, piense en ellas como paquetes que contienen pequeños fragmentos de información.

Los valores específicos de la capa de datos se agregan a estas variables y luego se envían a GA4.

Necesitamos crear variables para extraer los siguientes valores de su capa de datos:

• Ingresos de pedidos

• Solicitar ID

• Divisa

• Impuesto

• Costos de envío

• Artículos comprados

• En GTM, desde el menú de la izquierda, haga clic en la página 'Variables'

• En el cuadro 'Variables definidas por el usuario', haga clic en el botón 'Nuevo'

• En esta pantalla puede crear una nueva variable GTM. Debe realizar el siguiente proceso para cada una de las variables enumeradas anteriormente. Los detalles para cada variable individual se enumeran a continuación:

Ingresos de pedidos

Nombre: dlv - Página de agradecimiento - Ingresos por pedidos

Configuración de variables:

Tipo de variable: variable de capa de datos

Nombre de la variable de la capa de datos: ecommerce.value

Solicitar ID

Nombre: dlv - Página de agradecimiento - ID de pedido

Configuración de variables:

Tipo de variable: variable de capa de datos

Nombre de variable de capa de datos: ecommerce.transaction_id

Divisa

Nombre: dlv - Página de agradecimiento - Moneda

Configuración de variables:

Tipo de variable: variable de capa de datos

Nombre de la variable de la capa de datos: ecommerce.currency

Impuesto

Nombre: dlv - Página de agradecimiento - Impuestos

Configuración de variables:

Tipo de variable: variable de capa de datos

Nombre de la variable de la capa de datos: ecommerce.tax

Costos de envío

Nombre: dlv - Página de agradecimiento - Envío

Configuración de variables:

Tipo de variable: variable de capa de datos

Nombre de la variable de la capa de datos: ecommerce.shipping

Artículos comprados

Nombre: dlv - Página de agradecimiento - Artículos

Configuración de variables:

Tipo de variable: variable de capa de datos

Nombre de variable de capa de datos: ecommerce.items

Cada variable debe verse similar a esto cuando esté completa:

Crear etiquetas de comercio electrónico en GTM

Para extraer datos de comercio electrónico en GA4, GTM debe activar una etiqueta en la página de pedido completo. Esta etiqueta contiene información sobre cada pedido y se utiliza para completar los informes de GA4.

• Regrese a GTM y desde el menú de la izquierda, haga clic en 'Etiquetas'
• Presiona el botón azul 'Nuevo'
• Nombre su etiqueta 'Compra GA4'
• En el cuadro 'Configuración de etiqueta', presione el icono de edición en la esquina superior derecha
• Seleccione 'Google Analytics: Evento GA4'
• En el campo 'Etiqueta de configuración', seleccione su etiqueta 'Configuración de GA4'.
• En el campo 'Nombre del evento', ingresa "comprar"
• Expanda el menú desplegable 'Parámetros del evento' y presione 'Agregar fila'

Los parámetros de eventos son fragmentos de información sobre el orden que queremos enviar a GA4 cuando se active la etiqueta. Piense en los parámetros de eventos como los elementos individuales del pedido de un cliente (como el valor del pedido, los costos de envío, etc.). Cada uno de estos elementos debe agregarse como un parámetro de evento en la etiqueta de evento de compra.

Para configurarlos, haga clic en el botón 'Agregar fila'. Cada fila tiene dos campos.

• Nombre del parámetro: el nombre oficial del parámetro definido por GA4. Cuando se activa un evento de compra con uno de los parámetros de compra definidos de GA4, GA4 lo reconocerá. Por ejemplo, 'transaction_id', 'tax' y 'shipping' son parámetros de compra reconocidos. Puede ver una lista completa de los parámetros de eventos de compra disponibles aquí.

• Valor: el valor real del parámetro. Este será un valor dinámico basado en el pedido del cliente. Usando los parámetros de ejemplo anteriores, estos podrían ser:

id_transacción: #245

impuesto: 2,56

gastos de envío: 3,99

Los valores de los parámetros de eventos son bits dinámicos de información de su capa de datos. ¿Recuerdas las variables de la capa de datos que creamos anteriormente? Son esas variables las que se utilizan para completar los valores de los parámetros del evento.

Haga clic en el icono a la derecha del campo 'valor'. Esto cargará una pantalla donde puede seleccionar una variable. Busque y seleccione la variable correcta para este parámetro (será una de las que creó anteriormente que comienza con "dlv").

Haga esto para los siguientes parámetros:

Cuando termine, su pantalla debería verse así:

depuración

Finalmente, necesitamos probar que nuestra configuración de etiquetas está funcionando. Para hacer esto:

• Vaya a GTM y presione el botón 'Vista previa' en la esquina superior derecha
• Sigue los pasos para activar el modo de vista previa GTM en tu tienda
• Una vez completado, lo llevará al frente de su tienda con una ventana de asistente de etiquetas en la esquina

La pestaña anterior (titulada "Asistente de etiquetas [conectado]) ahora informará sobre las etiquetas que se activan mientras navega por su sitio en la pestaña de vista previa.

• Abre tu cuenta de GA4 y en el menú de la izquierda ve a 'Configurar > DebugView'
• Regrese a la pestaña que muestra una vista previa de la interfaz de su tienda y realice una transacción de prueba
• Finalmente, vaya a la pestaña GA4 DebugView. Si la etiqueta de compra de GA4 se ha activado correctamente, verá un evento de compra verde en la línea de tiempo. Haga clic en este evento y la ventana de la derecha se completará con información sobre el pedido.

Publicar cambios de GTM

Una vez que esté satisfecho de que las transacciones se capturen en su seguimiento de comercio electrónico de GA4, puede continuar y publicar sus cambios de GTM. Después de la publicación, le recomendamos que preste mucha atención tanto a su cuenta GA4 como a su cuenta UA para asegurarse de que los pedidos se registren como cabría esperar.