Cómo agregar el seguimiento en el sitio de Klaviyo con Google Tag Manager

Objetivos del artículo

Descubre cómo agregar los fragmentos de seguimiento en el sitio de Klaviyo a tu sitio con Google Tag Manager. Algunos propietarios de sitios usan Google Tag Manager como un único punto para administrar todos los fragmentos web de terceros que necesitan agregar a su sitio. El seguimiento en el sitio de Klaviyo entra en esta categoría y se puede agregar y administrar mediante Google Tag Manager.

Antes de empezar

Configurar Google etiqueta Manager

Si ya creaste una cuenta de Google Tag Manager e instalaste su contenedor en el sitio, puedes omitir estos pasos e ir a la sección sobre crear una etiqueta.
1. Crea una cuenta de Google Tag Manager.
2. Agrega los scripts de instalación al sitio.

Si eres nuevo en el uso de Google Tag Manager, revisa su documentación sobre cómo configurar una cuenta y agregar los scripts de instalación a tu sitio.

Crear una nueva etiqueta

1. Dentro del espacio de trabajo de tu sitio, crea una nueva etiqueta para el seguimiento de Klaviyo con actividad en el sitio. Recomendamos crear etiquetas y activadores separados para el seguimiento de con actividad en el sitio y producto visto. Esto se debe a que el seguimiento de producto visto solo se activará en las páginas de producto, mientras que el seguimiento de con actividad en el sitio debe activarse en todas las páginas del sitio.
2. Selecciona HTML personalizado como el tipo de etiqueta.

3. En Klaviyo, selecciona Integraciones en la barra lateral.
4. Selecciona Administrar datos > Configurar el seguimiento web.

Si se te solicita, selecciona Configurar manualmente y luego Siguiente para ver tu fragmento de código. Si la pantalla de configuración muestra instrucciones para tus integraciones de ecommerce, usa el fragmento manual de con actividad en el sitio y reemplaza el marcador de posición de su clave pública de interfaz de programación de aplicaciones (API) según se indica.

6. En Google Tag Manager, pega el fragmento de Klaviyo con actividad en el sitio en el cuadro de HTML.

7. Configura el activador para que se active en una vista de página para todas las páginas. Esto garantiza que el fragmento con actividad en el sitio se active cada vez que los clientes vean una página en el sitio.

8. Guarda la nueva etiqueta. Previsualiza los cambios para verificar que la etiqueta se active y, luego, publica el contenedor para que el seguimiento esté activo en el sitio web. Guardar solo la etiqueta no la publica.

Puedes agregar tu fragmento de producto visto con el mismo método. Usa el fragmento de código para tu plataforma de ecommerce de la guía de seguimiento de Producto visto. Modifica el activador para que solo se dispare en las páginas de detalles del producto. En algunos sitios, esto se puede lograr limitando el activador para que solo se active en páginas donde la URL incluya la palabra "product". Verifica que la regla coincida solo con páginas de detalles del producto y, después, guarda, previsualiza y publica la etiqueta.

Prueba el seguimiento en tu sitio

1. Navega a tu sitio web.
2. Agrega lo siguiente al final de la URL:

?utm_email=klaviyogreen@gmail.com

Reemplaza "klaviyogreen@gmail.com" con tu propia dirección de correo electrónico antes de cargar la URL. Si la URL ya contiene un ?, agrega &utm_email=your-email@example.com en su lugar. Coloca el parámetro antes de cualquier fragmento # y luego presiona Enter para volver a cargar la página.

3. En Klaviyo, ve a Analíticas > Métricas, selecciona con actividad en el sitio y abre Feed de actividad. Busca un evento asociado con la dirección de correo electrónico que usaste en la URL.

4. Si agregaste el seguimiento de Viewed Product, visita una página de detalles del producto en el mismo navegador. En Klaviyo, abre Análisis > Métricas, selecciona Viewed Product y revisa el feed de actividad para ver tu evento de prueba y los detalles del producto.

Si tienes problemas para que se active tu evento Viewed Product, asegúrate de que tus etiquetas estén configuradas para activarse en un orden específico. Siempre conviene que tu fragmento con actividad en el sitio se active antes que tu fragmento Viewed Product. Sigue las instrucciones de secuenciación de etiquetas de Google para establecer el orden.

Si Google etiqueta Gerente informa de un error al guardar un fragmento, revisa el código conforme a los requisitos de HTML personalizado de Google. Si no puedes resolver el error, puedes instalar los fragmentos directamente en tu sitio.

Usar Google Tag Manager en Shopify

Con Shopify, en lugar de usar Google etiqueta Gerente, se recomienda habilitar el seguimiento onsite de Klaviyo a través de la inserción de la app de Klaviyo en Shopify. La inserción de la app habilita el seguimiento de Con actividad en el sitio y Producto visto, siempre y cuando la inserción de la app esté activada y la configuración Agregar el seguimiento de Producto visto a mi sitio esté seleccionada en la página de configuración de integraciones. Nuestra integración con Shopify también habilita Búsqueda enviada, Colección vista y Agregado al carrito mediante la configuración Rastrear eventos de comportamiento.

Si quieres agregar el seguimiento en el sitio mediante Google Tag Manager, asegúrate de desactivar primero la inserción de la app. Configura la etiqueta con actividad en el sitio de los pasos anteriores para cargar Klaviyo.js en todas las páginas. Luego, agrega el fragmento de código a continuación como una etiqueta Viewed Product independiente que se active solo en las páginas de detalles del producto, después de la etiqueta base. Este fragmento de código no carga Klaviyo.js por sí solo. Guarda, previsualiza y publica ambas etiquetas, y luego completa ambas pruebas de seguimiento de arriba.

El punto de conexión de productos de Shopify que se usa a continuación devuelve etiquetas de productos, no la pertenencia a colecciones, por lo que el fragmento captura Tags en lugar de colecciones.

<script type="text/javascript"> 
//Initialize the Klaviyo object on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script type="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];
var product_handle = location.pathname.replace(/\/$/, '').split('/').pop();
fetch(window.Shopify.routes.root + 'products/' + product_handle + '.js').then(function(response){return response.json()})
.then(function(product){
  var item = {
    Name: product.title,
    ProductID: product.id,
    Tags: product.tags,
    ImageURL: "https:"+product.featured_image,
    URL: location.href.split( '/' )[0] + '//' + location.href.split( '/' )[2]+product.url,
    Brand: product.vendor,
    Price: product.price/100,
    CompareAtPrice: product.compare_at_price_max/100
  };
  klaviyo.track("Viewed Product", item);
  klaviyo.trackViewedItem({
    Title: item.Name,
    ItemId: item.ProductID,
    Tags: item.Tags,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  });
// If you would like to add the Added to Cart snippet as well, place that here without its script tags
})
.catch(function(e){
  console.log('Klaviyo could not track Viewed Product. Please contact Klaviyo Support for assistance.')
});
</script>

Recursos adicionales