Google Analytics 4 a Shopify: Cómo añadirlo

Veremos como instalar la nueva propiedad de Google Analytics 4 en tu tienda de Shopify. La forma en que implementaras Google Analytics 4 en tu tienda dependerá de la versión de Shopify que estés usando.

Si estás utilizando Shopify Plus, puede agregar Google Analytics 4 a cada una de las página, incluidas tus páginas de pago. Si no estás utilizando Shopify Plus, puedes agregar Google Analytics a las páginas de tu tienda y a la página de confirmación del pedido. Sin embargo, no podrá agregar el código GA4 a las páginas de pago.

Añadir Google Analytics 4 a Shopify

Para hacer que tus páginas de Shopify sean analizadas por Google Analytics 4 solo deberás agregar el código correspondiente a la fuente html de cada web. De esta forma, la información recogida de cada una de las personas que ingresen a tu tienda sean recogidas de forma automática. Por ejemplo, el tráfico, qué productos son los más vistos y cuales agregan al carrito de compras.

Este cógido puedes conseguirlo en tu propiedad GA4 simplemente dirigiéndote al apartado "flujos de datos", seleccionando el que quieras utilizar para tu tienda Shopify. Aquí en la sección "instrucciones de etiquetado" encontrarás el apartado deseado. Para lograr una visión más clara de tus canales de marketing y cómo estos impulsan tus ventas, debes configurar GA para que ignore los sitios de pago.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EJEMPLO"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EJEMPLO');
{% if first_time_accessed %}
gtag('event', 'purchase', {
"transaction_id": "{{order.order_number}}",
"value": {{total_price | times: 0.01}},
"currency": "{{ order.currency }}",
"tax": {{tax_price | times: 0.01}},
"shipping": {{shipping_price | times: 0.01}},
"items": [
{% for line_item in line_items %}{
"id": "{{line_item.product_id}}",
"name": "{{line_item.title}}",
"quantity": {{line_item.quantity}},
"price": {{line_item.line_price | times: 0.01}}
},{% endfor %}
]
});
{% endif %}
</script>

Este código se añade a las etiquetas principales del archivo theme.liquid. En caso de que uses Shopify Plus, también deberas agregarlo a tu página payment.liquid, lo que te permitirá monitorear todos los pasos del proceso de pago hasta la confirmación del mismo.

Hemos visto como utilizar el código de seguimiento gtag.js porque es la forma más fácil de poner GA4 en funcionamiento en Shopify. Sin embargo, puede aplicar una técnica similar para implementar GA4 usando Google Tag Manager en su tienda.

Hazme saber en los comentarios si Vas a usar GA4 en tu tienda Shopify