#2 Eventos de tienda: DataLayer desde archivos Liquid – Curso DataLayer de Compra en Shopify Plan Standard

Aprende a estructurar un DataLayer de compra robusto en el Plan Standard de Shopify modificando directamente los archivos Liquid de tu tienda. Captura cada evento clave de tus productos sin depender de apps externas y toma el control absoluto de tus datos en Google Analytics.

Contenido de la lección

(Recordar que este contenido es la escaleta)

Los tres eventos de navegación de la tienda se implementan directamente en archivos Liquid. En todos los casos el precio se divide por 100.0 porque Shopify lo almacena en céntimos, y el item_id usa el formato shopify_”rellenacontudato”_{product_id}_{variant_id} para coincidir con el feed de Google Merchant Center.

Doc interna: Secciones 2, 3, 4, 5 y 7 (GTM tags activos)

view_item — main-product.liquid (antes del {% schema %})

window.dataLayer.push({ ecommerce: null });

window.dataLayer.push({

  event: 'view_item',

  ecommerce: {

    currency: {{ shop.currency | json }},

    value: {{ product.selected_or_first_available_variant.price | divided_by: 100.0 }},

    items: [{

      item_id: 'shopify_ZZ_{{ product.id }}_{{ product.selected_or_first_available_variant.id }}',

      item_name: {{ product.title | json }},

      price: {{ product.selected_or_first_available_variant.price | divided_by: 100.0 }},

      item_brand: {{ product.vendor | json }},

      item_category: {{ product.type | json }},

      item_variant: {{ product.selected_or_first_available_variant.sku | json }}

    }]

  }

});

view_item_list — main-collection.liquid (antes del {% schema %})

Se itera sobre collection.products con un bucle for, pasando item_list_id y item_list_name tanto a nivel de ecommerce como dentro de cada item (requerido por GA4 para atribuir correctamente los clics de lista).

view_cart — doble trigger

• Página /cart → main-cart.liquid: snippet Liquid estándar con {% for item in cart.items %}
• Cart drawer (lateral) → theme.liquid: MutationObserver que detecta cuando el elemento #CartDrawer pierde la clase hdt-hidden y dispara fetch(‘/cart.js’) para obtener los datos del carrito
• Deduplicación: el MutationObserver comprueba window.location.pathname === ‘/cart’ para no disparar en la página de carrito (donde ya lo hace main-cart.liquid)

Configuración GTM para estos eventos:

Dejo plantilla rápida para importar los eventos y activadores https://drive.google.com/file/d/1R1-OtMn9etPB7tx4CyVqHEKCyDYp672n/view?usp=sharing 

Objetivo de la lección

Implementar correctamente los eventos view_item, view_item_list y view_cart en los archivos Liquid de Shopify y configurar GTM para enviarlos a GA4 y Remarketing.

Recursos

• Liquid filter divided_by: Liquid filters: abs
• GTM sendEcommerceData: developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm
• MutationObserver MDN: developer.mozilla.org/en-US/docs/Web/API/MutationObserver