¿Cómo configurar Google Analytics utilizando Shopify?

¡Al fin llegaste!. En este artículo aprenderás cómo exactamente, cómo configurar Google Analytics utilizando Shopify.

¡Eso no es todo!, incluyendo el seguimiento de comercio electrónico utilizando Google Tag Manager.

Por cierto, si lo deseas, puedes disfrutar de toda la información en el siguiente video de mi canal de YouTube.

Si estás aquí, es porque estás utilizando Shopify para tu sitio web de comercio electrónico. Si, hubo grandes cambios relacionados a la implementación de los códigos. ¿Sabes cómo usar los píxeles personalizados en tu tienda online?

Por cierto, ¿sabías que hay otras formas de instalar Google Analytics en tu tienda de Shopify?Además de las opciones tradicionales, te voy a explicar la más eficiente utilizando Google Tag Manager. 

¿Empezamos con todo lo prometido?

¿Cómo agregar un Pixel personalizado en Shopify?

Una vez que estamos en Shopify, vamos a la opción de «Configuración» abajo a la izquierda, y luego seleccionamos ‘customers events’.

Lo vemos:

Aquí es donde vamos a poder agregar los píxeles personalizados en Shopify, lo cual nos va a permitir hacer un seguimiento de muchas acciones, sin necesidad de modificar nuestra plantilla:

Si tienes píxeles existentes, los podríamos apreciar aquí. En este caso, no hay ninguno por lo tanto hay que presionar el botón negro ‘agregar píxel personalizado’.

En el siguiente campo, le tendrás que poner un «nombre a tu píxel». Como vamos a utilizar Google Tag Manager, lo llamaré de esa manera y luego hacemos clic en «agregar píxel».

Luego, vamos a ver dos opciones para configurar nuestro píxel personalizado en Shopify.

En la parte superior, vamos a ver la parte de configuración de privacidad del píxel. Este nos permite controlar cuando se activa y cuando no, como también integrarlo con el banner de consentimiento  de Shopify. Pero en mi caso, como no lo estoy usando, seleccionaré «no es obligatorio».

Esto significa que GTM se activará para todas las acciones que ocurran en la web. Esta es la recomendable si estás utilizando el banner de consentimiento de otra plataforma y no de shopify.

Luego, seleccionaremos la opción de «los datos no califican como ventas datos» y luego, debajo en el campo que dice ‘código’,  agregaremos el código para el píxel personalizado tal cual lo vemos en la siguiente imagen: 

¡Genial!. Ya tenemos el código para rastrear cuando una persona agrega un artículo al ‘carrito de compra’ o cuando ‘completan la compra’. 🛒

Veamos el código.

Aquí les mostraré el código de Google Tag Manager que estoy utilizando para el seguimiento de comercio electrónico.

En la capa superior del código, estamos estableciendo la capa de datos, debajo, vas a poder apreciar el código del contenedor de Google Tag Manager.

Luego hay distintos eventos estándar de clientes, que Shopify pone a disposición de los usuarios para utilizar píxeles personalizados.

Lo vemos:

Estos diferentes eventos, nos permiten capturar detalles a medida que los usuarios interactúan o toman decisiones en nuestra tienda  online Shopify.

Por ejemplo, el evento checkout_completed, es el evento que se activa cuando alguien realiza por completo «un proceso de pago». Este evento nos permite almacenar detalles luego de que alguien finaliza una compra en la tienda.

También estamos enviando un evento de compra purchase, a la capa de datos de Google Tag Manager. Este incluye toda la información necesaria, para que se pueda hacer el seguimiento desde Google Analytics 4. Esto incluye: la moneda, el costo o valor, el tipo de artículo, entre otros detalles.

Más abajo en el código hay más eventos:

• Payment_info_submitted: es el que se activa para enviar la información de pago.
• Add_Payment_info: sirve cuando alguien agrega ‘información de pago’.
• Add_Shipping_info: este evento es para agregar detalles de envío.
• Begin_checkout: es cuando comienza un proceso de pago.
• View Cart: vista del carrito.
• Add_to_cart: se activa cuando alguien agrega un producto al carrito.
• View_item: cuando alguien mira un producto de nuestra tienda.

Este código lo puedes copiar tal cuál está y ajustarlo exactamente a tus necesidades. Haz clic aquí y accede al código: QUIERO COPIAR EL CÓDIGO.

Una vez que hayas copiado el código de arriba, ☝️ tenemos que ir a Shopify nuevamente. Luego lo que vamos a realizar es modificar este código, para que utilice el ID de Google Tag  Manager. ¿Se entiende?

Aquí lo vemos en la  imagen, lo puedes encontrar en la parte superior de la pantalla:

Luego volvemos a Shopify, y lo pegamos exactamente al final de la fila 8 tal cual se ve en la  imagen. ¡Lo dejé sombreado!. Lo vemos:

¡Hacemos clic en guardar en la parte superior! 

Luego, para que todo quede listo, ¡haz clic en ‘conectar’! ¡Así se activa y se conecta tu píxel personalizado a tu tienda de Shopify! 🏪

Configuración paso a paso en Google Tag Manager

El primer paso es ir a la sección de «variables», hacemos clic en ‘nueva’ le ponemos un nombre por ejemplo ‘ID medición de Google Analytics 4’

Hacemos clic allí, y luego seleccionaremos en ‘Utilidades’ el tipo de variable ‘constante’.

Luego te pedirá en un campo que se llama «valor» debemos agregar el ID de seguimiento de Google Analytics. 

Para ello vamos a GA4, en la sección ‘administrar’, luego en la sección «recogida y modificación de datos», hacemos clic en ‘flujo de datos’.

Luego hacemos clic dentro del ‘flujo de datos’, y por último hacemos clic en el ID de medición correspondiente. ¡Fácil!

Una vez copiado, ahora sí volvemos a Google Tag Manager y lo pegamos en el campo ‘valor’.

¡Clic en guardar arriba a la derecha!

Ahora debemos crear la etiqueta que enviará toda esta información a GA4. Para ello dentro de GTM debemos seguir  la siguiente ruta paso a paso: etiqueta/nueva/le colocamos nombre/ configuración de etiqueta/ Google Analytics evento GA4

Como vemos en la imagen, en el campo de ID de medición, hacemos clic en el símbolo (+) y seleccionamos la variable que creamos, a la que le pusimos un nombre. ¿Recuerdas?

Si lo estás configurando por primera vez, tal vez te aparezca un cartel “⚠️ no se ha encontrado etiqueta”. ¡Pero no te preocupes!

Ahora debajo agregamos el evento: hacemos clic en el botón (+) en el campo «nombre del evento» y luego en la opción ‘event’.

Lo vemos aquí: 👇

Luego debajo, seguimos esta ruta: Más Ajustes/ Seleccionamos opción Enviar datos comercio electrónico/ y seleccionamos Data Layer.

¡Vamos que estamos cerca!

Data Layer sería la fuente de datos que enviará los valores (costo, moneda, productos) a Google Analytics 4.

Para activar esta función, en la parte inferior de la pantalla hacemos clic en «Activación». En la siguiente pantalla, hacemos clic en el símbolo (+) arriba a la derecha, y le colocamos un nombre por ejemplo «evento de eCommerce».

Luego presionamos «configuración del activador» y seleccionamos de la lista ‘evento personalizado’.

¡Atención!. Agregaremos todos los eventos necesarios con nuestra tienda online:

• view_item

• view_item_list

• select_item

• add_to_cart

• remove_from_cart

• view_cart

• ad_shipping_info
• purchase

Entre otros. Te quedará así:

Luego hacemos clic en el recuadro que dice: «utilizar una expresión regular que coincida con», luego ¡clic en guardar arriba a la derecha!

Siguiente, guardamos una vez más la configuración general de esta etiqueta:

¡Listo tenemos etiqueta!

¿Cómo crear variables de URLs para Shopify?

Esto es opcional, pero muy útil.

Dentro d e Google Tag Manager vamos a la opción «variables» en el menú izquierdo, luego hacemos clic en ‘nueva’.

Le colocamos un nombre (el proceso es muy parecido a lo que venimos haciendo) por ejemplo “ubicación de página de Shopify” y luego seleccionamos debajo ‘configuración de la variable’. Siguiente hacemos clic en ‘variable de capa de datos’.

Dentro del campo «nombre de la variable capa de datos» escribimos: url (en minúscula) y guardamos.

Luego navegamos a la opción ‘activadores’ en el menú izquierdo y luego en la opción ‘nuevo activador’. Le colocamos título (el proceso es parecido) por ejemplo “vista de página de Shopify”, hacemos clic debajo en “configuración del activador” y luego tildamos en “evento personalizado”

En el campo del nombre colocaremos: shopify_page_view

Este disparador sirve para rastrear vista de páginas en tu tienda online. Esto es para capturar las páginas “más limpias” dentro de  las URLs que los usuarios visitan.

¡Guardamos!

Navegamos a la opción «etiquetas» en el menú principal izquierdo, y nos vamos a encontrar con la etiqueta que acabamos de crear, la seleccionamos, y debajo hacemos clic en ‘parámetros de evento’.

En el campo ‘parámetro de evento’ escribimos: page_location.

Al lado en el campo valor, hacemos clic en (+) y seleccionaremos la ‘variable’ que acabamos de crear recientemente ‘ubicación de página de Shopify’. ¿Se entiende?

¡Guardamos la etiqueta!

Ahora hay que crear la etiqueta para “enviar las visitas a GA4”.

Seleccionamos «etiquetas», luego en ‘nueva’ en el signo (+), le colocamos un nombre (el proceso es el mismo), le pondré “GA4 Configuración”, luego debajo hacemos clic en “configuración de etiquetas” y luego “Google Analytics”- “etiqueta de Google”

En el campo que aparecerá de «ID de etiqueta» seleccionaremos  la variable que ya tenemos ID de medición de GA4.

Siguiente, seleccionaremos la opción ‘configuración de eventos compartidos’. Vamos a añadir un parámetro: page_location

En el campo valor, nuevamente con el botón (+) agregaremos la variable ‘Ubicación de página de Shopify’.

Por supuesto, hay que activarlo. Debajo hacemos clic en ‘Activación’, y lógicamente elegiremos lo que estamos buscando, “vista de página de Shopify”.

¡Guardamos la etiqueta!

¡Hacemos clic en Enviar para publicar el contenedor!

Luego le pondremos «nombre de versión» y una «descripción». Esto es personal, luego clic en «Publicar» arriba a la derecha.

Concluyendo

Algo que debes tener en cuenta con los píxeles personalizados es que no los puedas usar fácilmente con Tag Assistant y con Debug View de Google Analytics 4 para ver qué es lo que está rastreando. Recomiendo en Shopify utilizar la extensión ‘Legacy’ de Tag Assistant para Google Chrome.

Para ir terminando, una  vez que hayas instalado ‘Legacy’ de Tag Assistant, solo tienes que hacer una simulación como si fueras un usuario que quiere comprar y está “viendo productos” en tu tienda online.

Haces clic arriba a la derecha en la extensión Google Taga Assistant Legacy, y seleccionaremos Google Tag Manager.

Una vez allí, haremos clic en la pestaña de ‘Data Layer’ y esto nos mostrará todos los eventos rastreados con la información capturada:

Allí podemos ver toda la información de los eventos de nuestra ecommerce. Todo fue enviado a GTM y también a GA4.

Otra forma de ver que todo está funcionando correctamente, es el informe en tiempo real de Google Analytics.¿Recuerdas cómo es?

Una vez que estás en Google Analytics, te diriges a la sección «informes» en el  menú izquierdo, y luego a la opción “en tiempo real”.

Si navegas hacia abajo llegarás a una tarjeta que se llama ‘número de eventos’, allí podrás ver en tiempo real, todos los eventos que se han disparado con la prueba que hicimos:

Si haces clic como se ve en la imagen, podrás ver otros parámetros rastreados como “los valores, las monedas, ubicación de la página”, entre otros valores interesantes.

¿Estás contento? ¡Felicidades!

Si anteriormente has utilizado otros eventos que puedes interferir en los píxeles personalizados que has creado aquí, te recomiendo que los borres para obtener informes con más claridad.

Te recomiendo para complementar tu conocimiento, el siguiente artículo:

LOS CINCO ERRORES MÁS COMUNES EN GOOGLE ANALYTICS.

¡Hasta la próxima colega!