¿Cómo configurar el seguimiento de comercio electrónico GA4 en Shopify? Guía paso por paso

Publicado: 2022-09-13
  • ¿Cómo instalar Google Tag Manager (GTM) en Shopify?
    • Fase uno: agregue el código de contenedor GTM y la secuencia de comandos de detalles del cliente al theme.liquid debajo de <head>.
    • Fase dos: agregue el código de contenedor GTM y el script de detalles del cliente a la página de pago.
  • Crear variable de capa de datos en el GTM
  • Crear una etiqueta de vista de página de GA4 en GTM
  • Realice un seguimiento de view_item y compre como un evento y pase el alcance del usuario más los detalles relacionados con el producto a GA4
    • Fase uno: agregue la capa de datos view_item en Shopify.
    • Fase dos: Crear GTM Trigger para view_item y evento de compra.
    • Fase tres: crear una etiqueta GTM.
  • Descargar Receta GTM

¿Cómo instalar Google Tag Manager (GTM) en Shopify?

Fase uno: agregue el código de contenedor GTM y la secuencia de comandos de detalles del cliente al theme.liquid debajo de <head>.

  1. Inicie sesión en su cuenta de Gmail.
  2. Vaya al Administrador de etiquetas de Google.
  3. Seleccione la cuenta GTM correcta .
  4. Haga clic en el ID del contenedor GTM.
  5. Copie la primera secuencia de comandos del código del contenedor GTM que incluye instrucciones para pegar el código en la sección <head>.
  6. Inicie sesión en su tienda Shopify y haga clic en Temas en Tienda en línea en el lado izquierdo del panel de navegación.
  7. Haga clic en Editar código en el menú desplegable Acciones .
  8. Haga clic en theme.liquid en Diseño.
  9. Pegue el código del contenedor GTM copiado (en el paso 5) lo más alto posible en el <head> de la página.
  10. Copie la secuencia de comandos de detalles del cliente que se menciona a continuación y péguela en la sección <head>, arriba del código del contenedor GTM .
  11. Haga clic en Guardar en theme.liquid hacia la esquina superior derecha.

Paso 1: Inicie sesión en su cuenta de Gmail.

Paso 2: Vaya al Administrador de etiquetas de Google siguiendo este enlace: https://tagmanager.google.com/

Paso 3: seleccione la cuenta GTM correcta

Select the correct GTM account

Paso 4: haga clic en el ID del contenedor GTM

GTM - click on the container id

Paso 5: copie la primera secuencia de comandos del código del contenedor GTM que incluye instrucciones para pegar el código en la sección <head> .

copy the GTM container code

Paso 6: ahora inicie sesión en su tienda Shopify y haga clic en Temas en Tienda en línea en el panel de navegación de la izquierda.

select themes under online store

Paso 7: haga clic en Editar código en el menú desplegable Acciones .

Click on Edit code under Actions drop down

Paso 8: haga clic en theme.liquid en Diseño.

Click on theme.liquid

Paso 9: pegue el código del contenedor GTM copiado (en el paso 5) lo más alto posible en el <head> de la página.

Paso 10: copie el siguiente script de detalles del cliente. Ahora, péguelo en la sección <head> sobre el código del contenedor GTM, como se muestra en la imagen a continuación. Este script ayudará a pasar los datos del alcance del USUARIO al GA4.

Copiar

 <script>
ventana.dataLayer = ventana.dataLayer || [];
ventana.dataLayer.push({
{% si el cliente%}
tipo de usuario: "miembro",
cliente: {
id: {{ cliente.id }},
últimoPedido: "{{ cliente.pedidos.primero.creado_en | fecha: '%B %d, %Y %I:%M%p' }}",
número de pedidos: {{ cliente.pedidos.tamaño }},
gasto total: {% si el cliente %}{% asigna gasto_total = 0 %}{% para artículo en pedidos de cliente %}{% asigna gasto_total = gasto_total | más: item.total_net_amount %}{% endfor %}{{ total_spent | dinero_sin_moneda | remove:"," }}{% else %}""{% endif %},
etiquetas: {{- cliente.etiquetas | json-}}
},
{% más %}
tipo de usuario: "visitante",
cliente: {
identificación: "",
último pedido: "",
número de pedidos: "",
gasto total: "",
etiquetas: ""
},
{% terminara si %}
});
</script>

User data script above the GTM code

Paso 11: haga clic en Guardar en theme.liquid hacia la esquina superior derecha.

Click save on theme.liquid

Bien hecho !!

Ha terminado la primera fase de agregar el código de contenedor GTM a Shopify. A continuación, deberá agregar el código de contenedor GTM , la secuencia de comandos de detalles del cliente y comprar la capa de datos en la página de pago.

Fase dos: agregue el código de contenedor GTM y el script de detalles del cliente y compre Data Layer en la página de pago.

  1. En el administrador de la tienda Shopify, haga clic en Configuración en la esquina inferior izquierda.
  2. Haga clic en Checkout y cuentas
  3. Desplácese hacia abajo y busque los scripts adicionales debajo del pedido en el bloque de estado.
  4. Pegue primero el código del contenedor GTM. Ahora, copie el siguiente script de detalles del cliente y péguelo sobre el código del contenedor GTM.
  5. Copie y pegue la siguiente capa de datos de compra entre el script de detalles del cliente y el código del contenedor GTM.

Paso 1: en el administrador de la tienda Shopify, haga clic en Configuración en la esquina inferior izquierda.

On Shopify admin click on Settings towards the laft hand side bottom corner

Paso 2: Haga clic en Pago y cuentas.

Click on Checkout and accounts

Paso 3: desplácese hacia abajo y busque los scripts adicionales debajo del pedido en el bloque de estado.

Scroll Down and below Order Status block look for the Additional Scripts

Paso 4: pegue primero el código del contenedor GTM. Ahora, copie el siguiente script de detalles del cliente y péguelo sobre el código del contenedor GTM.

Paste the GTM container code first and above the GTM container code paste the customer details script

Paso 5: copie y pegue la siguiente capa de datos de compra entre el script de detalles del cliente y el código del contenedor GTM.

Copiar

 <secuencia de comandos>{% si se accede por primera vez%}
ventana.dataLayer.push({
'page_type': 'comprar',
'event': 'purchase', /* crea un evento personalizado en GTM */
'transaction_id': '{{ pedido.nombre || pedido.número_pedido }}',
'valor total': {{ precio_total | dinero_sin_moneda | remove:',' }}, // Incluye impuestos y envío
'valor subtotal': {{ precio_subtotal | dinero_sin_moneda | retirar:',' }},
'impuesto': {{ precio_impuesto | dinero_sin_moneda | retirar:',' }},
'envío': {{ precio_envío | dinero_sin_moneda | retirar:',' }},
'moneda': '{{ tienda.moneda }}',
'payment_type': '{{ order.transactions[0].gateway }}', //parámetro opcional
'comercio electrónico': {
'checkout_currency': '{{ checkout.currency }}', 
'valor': '{{ pago.precio_total | dinero_sin_moneda | remove:',' }}', // total del pedido (precio de todos los productos + envío)
'impuesto': '{{ checkout.tax_price | dinero_sin_moneda | remove:',' }}', // impuesto
'envío':'{{ checkout.shipping_price | dinero_sin_moneda | eliminar:',' }}', // gastos de envío
'transaction_id': '{{ transacciones[0].id }}', // id de la transacción
'elementos': [
{% para elemento de línea en elementos de línea %}
{
'item_name': '{{ line_item.product.title | reemplazar: "'","##@@[correo electrónico protegido]@##" }}'.replace("##@@[correo electrónico protegido]@##", "'"), 
'item_id': '{{ line_item.sku || línea_elemento.producto.id }}',
'precio': {{ line_item.final_price | dinero_sin_moneda | retirar:',' }},
'marca_artículo': '{{ artículo_línea.vendedor }}',
'cantidad': {{ line_item.cantidad }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor%}
]
}
});
{% terminara si %}
</script>

Paso 6: Haga clic en Guardar en la esquina inferior derecha.

¡Felicidades! Ha agregado con éxito el código de contenedor GTM en Shopify. Ahora continuaremos y crearemos variables de capa de datos en el GTM antes de crear la etiqueta de vista de página de GA4. Cuando se carga la etiqueta de vista de página, estas variables nos permitirán recopilar y pasar datos del usuario a GA4.

Crear variables de capa de datos en el GTM

  1. Haga clic en Variables en el panel de navegación de la izquierda en GTM.
  2. Haga clic en Nuevo en Variables definidas por el usuario.
  3. Haga clic en cualquier lugar en Configuración de variables .
  4. Seleccione Variable de capa de datos en Variables de página.
  5. Asignar nombre de variable de capa de datos .
  6. Cambie el nombre de la variable y haga clic en Guardar.

Paso 1: Haga clic en Variables en el panel de navegación de la izquierda en GTM.

Click on Variables on the left hand navigation panel

Paso 2: haga clic en Nuevo en Variables definidas por el usuario.

Click New under User Defined Variables

Paso 3: Haga clic en cualquier lugar en Configuración de variables.

Click anywhere on Variable configuration

Paso 4: seleccione Variable de capa de datos en Variables de página.

Select Data Layer variable under page variables

Paso 5: Asigne el nombre de la variable de la capa de datos .

Data Layer Variable Name

Paso 6: cambie el nombre de la variable y haga clic en Guardar .

Rename the variable and click save

Siguiendo los pasos mencionados anteriormente, cree las variables de capa de datos mencionadas a continuación.

Nombre de la variable del capa de datos: Cambiar el nombre de la variable
id_usuario “dlv – cliente – id – Variable”
cliente.últimopedido “dlv – cliente – último pedido – Variable”
cliente.orderCount “dlv – cliente – orderCount – Variable”
cliente.etiquetas “dlv – cliente – etiquetas – Variable”
cliente.gastadototal “dlv – cliente – gasto total – Variable”
cliente.tipodeusuario “dlv – cliente – tipo de usuario – Variable”
evento “dlv – evento – Variable”

Crear una etiqueta de vista de página de GA4 en GTM

  1. Vaya a Google Analytics y seleccione la propiedad GA4. https://analytics.google.com/
  2. Haga clic en el icono de engranaje en la parte inferior izquierda.
  3. Haga clic en el flujo de datos en el nivel de propiedad.
  4. Seleccione Web Stream y haga clic en la flecha (>).
  5. Copie el ID de medición de GA4.
  6. Vaya al Administrador de etiquetas de Google. https://tagmanager.google.com/
  7. Haga clic en Agregar una nueva etiqueta.
  8. Haga clic en cualquier parte de la configuración de la etiqueta.
  9. Seleccione Google Analytics: Configuración de GA4.
  10. Pegue el ID de medición GA4 copiado anteriormente en el cuadro "ID de medición".
  11. En Campos para establecer, haga clic en la fila Agregar, luego agregue el nombre del campo y su valor.
  12. En Propiedades de usuario, agregue lo siguiente como Nombre y valor de la propiedad.
  13. Haga clic en cualquier parte del Triggering.
  14. Seleccione Todas las páginas como disparador.
  15. Cambie el nombre de la etiqueta y haga clic en guardar.

Paso 1: Vaya a Google Analytics y seleccione la propiedad GA4. https://analytics.google.com/

Paso 2: Haga clic en el icono de engranaje en la parte inferior izquierda.

Click on the Gear Icon bottom left hand

Paso 3: haga clic en Flujos de datos en el nivel de propiedad.

Click on the Data Stream under property level

Paso 4: Seleccione Web Stream y haga clic en la flecha (>)

Select the Web Stream and click click the arrow (>)

Paso 5: Copie el ID de medición de GA4.

Copy the GA4 Measurement ID

Paso 6: Vaya al Administrador de etiquetas de Google. https://tagmanager.google.com/

Paso 7: Haga clic en Agregar una nueva etiqueta.

Click On Add a new tag

Paso 8: haga clic en cualquier lugar de la configuración de la etiqueta.

Click anywhere on the tag configuration

Paso 9: Seleccione Google Analytics: Configuración de GA4.

Select Google Analytics: GA4 Configuration

Paso 10: pegue el ID de medición GA4 copiado anteriormente en el cuadro "ID de medición".

Paste the previously copied GA4 Measurement ID under the "Measurement ID" Box.

Paso 11: En Campos para establecer, haga clic en la fila Agregar, luego agregue el nombre del campo y su valor como se menciona a continuación:

Nombre de campo: id_usuario

Valor: {{dlv – cliente – id – Variable}}

5 agregue la identificación de usuario en Campos para configurar

Paso 12: En Propiedades de usuario, agregue el Nombre y valor de la propiedad como se menciona a continuación.

Nombre de la propiedad Valor
Identificación del cliente {{dlv – cliente – id – Variable}}
último pedido {{dlv – cliente – último pedido – Variable}}
order_count {{dlv – cliente – número de pedidos – Variable}}
gasto_total {{dlv – cliente – gasto total – Variable}}
tipo de usuario {{dlv – cliente – tipo de usuario – Variable}}

User Properties Assign Property Name and value

Paso 13: Haga clic en cualquier parte del Triggering.

Configuración del activador: haga clic en cualquier lugar

Paso 14: seleccione Todas las páginas como disparador.

Select All Pages as a Trigger Type

Paso 15: cambie el nombre de la etiqueta.

Rename as GA4 - Page View - Tag as and Click Save

¡Brillante!

Ha creado la etiqueta de vista de página de GA4 ahora.

Ahora echemos un vistazo a cómo rastrear el evento view_item cuando alguien ve la página del producto y pasa los detalles necesarios al GA4.

Rastree y pase view_item y compre datos de eventos a GA4.

Agregue la capa de datos view_item en Shopify.

  1. Inicie sesión en su tienda Shopify y haga clic en Temas en Tienda en línea en el panel de navegación de la izquierda.
  2. Haga clic en Editar código en el menú desplegable Acciones.
  3. Haga clic en main-product.liquid en Secciones.
  4. Copie y pegue el script de capa de datos mencionado a continuación.
  5. Haga clic en Guardar en main-product.liquid hacia la esquina superior derecha

Paso 1: inicie sesión en su tienda Shopify y haga clic en Temas en Tienda en línea en el panel de navegación de la izquierda.

select themes under online store

Sección 2: haga clic en Editar código en el menú desplegable Acciones.

Click on Edit code under Actions drop down

Sección 3: Haga clic en main-product.liquid en Secciones.

Click on the main-product.liquid under Sections.

Paso 4: copie y pegue el script de capa de datos mencionado a continuación.

Copiar

 <script>
ventana.dataLayer = ventana.dataLayer || [];
ventana.dataLayer.push({
evento: 'ver_elemento',
comercio electrónico: {
elementos: [{
item_name: '{{ producto.título | reemplazar: "'","##@@[correo electrónico protegido]@##" }}'.replace("##@@[correo electrónico protegido]@##", "'"),
item_id: "{% si producto.sku %}{{ producto.sku }}{% else %}{{ producto.id}}{% endif %}",
precio: "{{ producto.precio | dinero_sin_moneda | remove:',' }}",
item_brand: "{{ producto.proveedor | eliminar: "'" | eliminar: '"' }}",
{% para colección en producto.colecciones%}
item_category{% a menos que forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor%}
item_variant: "{{ producto.seleccionado_o_primera_variante_disponible.título | eliminar: "'" | eliminar: '"' }}",
Cantidad: 1'
}]
}
});
</script>

Copy and Paste the below mentioned Data Layer script on the main-product.liquid under Sections

Paso 5: Haga clic en Guardar en main-product.liquid hacia la esquina superior derecha.

Click save on the main-product.liquid under Sections

Cree GTM Trigger para view_item y compre el evento.

  1. Vaya al Administrador de etiquetas de Google.
  2. Haga clic en Activar en el panel de navegación de la izquierda.
  3. Haga clic en Nuevo.
  4. Haga clic en cualquier parte de la configuración del disparador.
  5. Seleccione Evento personalizado en Otro.
  6. Asigne el nombre del evento view_item.
  7. Cambie el nombre del activador CE – EEC – view_item – Activador y haga clic en Guardar.

NOTA:

  1. Asignar nombre de evento como compra
  2. Cambie el nombre del activador CE – EEC – compra – Activador y haga clic en Guardar.

Paso 1: Vaya al Administrador de etiquetas de Google.

Paso 2: Haga clic en Activar en el panel de navegación de la izquierda.

Click on Trigger on the left hand navigation panel

Paso 3: Haga clic en Nuevo.

Click New

Paso 4: haga clic en cualquier lugar de la configuración del disparador.

Click anywhere on Trigger configuration

Paso 5: seleccione Evento personalizado en Otro.

Select Custom Event under Other

Paso 6: Asigne el nombre del evento view_item.

Assign Event Name as view_item

Paso 7: Cambie el nombre del activador CE – EEC – view_item – Activador y haga clic en Guardar.

Rename the Trigger - view_item

Con estos pasos, ha creado el disparador de eventos view_item. Ahora tendrá que activar un evento de compra. Para activar un evento de compra, siga los primeros 5 pasos anteriores.

Paso 8: Asigne el nombre del evento como compra

custom event name purchase

Paso 9: Cambie el nombre del activador a CE – EEC – compra – Activador y haga clic en Guardar.

Rename the Trigger - purchase

Si ha seguido todos los pasos, ha hecho casi todo para recopilar view_item y comprar datos relacionados con eventos de su tienda Shopify con los datos del alcance del usuario. Ahora veamos cómo pasar estos detalles a GA4 usando Google Tag Manager.

Crea una etiqueta GTM para el evento view_item y compra.

  1. Haga clic en Etiqueta en el panel de navegación de la izquierda.
  2. Haga clic en Nuevo.
  3. Haga clic en cualquier lugar de la configuración de la etiqueta.
  4. Seleccione "Google Analytics: Evento GA4" en Etiqueta destacada.
  5. En Etiqueta de configuración, seleccione "GA4 - Vista de página - Etiqueta" en el menú desplegable.
  6. Asignar nombre de evento. Seleccione la variable dataLayer creada anteriormente – {{dlv – event – ​​variable}}
  7. Haga clic en Más configuraciones y seleccione Enviar datos de comercio electrónico en Comercio electrónico. Seleccione Capa de datos como su fuente de datos.
  8. Haga clic en cualquier lugar de Activación.
  9. Seleccione el disparador creado previamente "CE - EEC - view_item - Trigger" para el evento view_item.
  10. Pasa el cursor por la esquina superior derecha de la sección Activador y haz clic en el icono del lápiz.
  11. Haga clic en el icono más ahora.
  12. Seleccione el activador del evento de compra denominado "CE - compra - Activador".
  13. Cambie el nombre de la etiqueta: "GA4 - Evento EEC - Etiqueta" y haga clic en Guardar.

Paso 1: haga clic en Etiqueta en el panel de navegación de la izquierda.

Click on tag on the left hand navigation panel

Paso 2: Haga clic en Nuevo.

Click New

Paso 3: haga clic en cualquier lugar de la configuración de la etiqueta.

Tag Configuration - Click Anywhere

Paso 4: seleccione "Google Analytics: Evento GA4" en la etiqueta destacada.

Select Google Analytics GA4 Event under Featured Tag

Paso 5: en Etiqueta de configuración, seleccione "GA4 - Vista de página - Etiqueta" en el menú desplegable.

Select Configuration Tag form the drop down

Paso 6: Asigne el nombre del evento. Seleccione la variable de capa de datos creada anteriormente: {{dlv - event - variable}}

Event Name Select the previously made Data Layer variable

Paso 7: Haga clic en Más configuraciones y seleccione Enviar datos de comercio electrónico en Comercio electrónico. Seleccione Capa de datos como su fuente de datos.

More Settings Send eCommerce Data select Data Layer as datasource

Paso 8: Haga clic en cualquier lugar de Activación.

Trigger Configuration - Click Anywhere

Paso 9: seleccione el disparador creado anteriormente "CE - EEC - view_item - Trigger" para el evento view_item.

select view item trigger

Paso 10: Pase el cursor por la esquina superior derecha de la sección Activador y haga clic en el icono del lápiz.

Hover over the trigger towards the right hand side top corner and click on pencil icon

Paso 11: Haga clic en el ícono más ahora.

Click on this plus icon

Paso 12: seleccione el activador del evento de compra denominado "CE - compra - Activador".

Select purchase event trigger

Paso 13: Cambie el nombre de la etiqueta: "GA4 - Evento EEC - Etiqueta" y haga clic en Guardar.

Rename the tag and click save

Felicidades

Con esta guía, ahora puede realizar un seguimiento de la visualización de productos y datos de eventos de compra en GA4. También puede ver los informes de GA4 siguiendo estos pasos.

Paso uno: Vaya a la propiedad GA4.
Paso dos: haga clic en Informes en el panel de navegación izquierdo.
Paso tres: Haga clic en Monetización y luego haga clic en Compras de comercio electrónico.

Si desea obtener el contenedor GTM listo para usar para esta guía, le recomiendo que descargue la receta GTM.

Descargar Receta GTM

Conclusión

Con esta guía paso a paso, hice todo lo posible para abordar y resolver el problema candente de todos los propietarios de tiendas Shopify. El seguimiento del comercio electrónico puede tener muchos matices y es difícil abordarlo con una sola publicación de blog. Si tiene alguna consulta, no dude en conectarse conmigo en LinkedIn y hacer sus consultas allí.