Cómo añadir el seguimiento onsite de Klaviyo con Google Tag Manager

Qué aprenderás

Aprende a añadir los fragmentos de código de seguimiento en el sitio de Klaviyo a tu sitio con Google Tag Manager. Algunos propietarios de sitios usan Google Tag Manager como un punto único para gestionar todas las etiquetas web de terceros que necesitan añadir a su sitio. El seguimiento en el sitio de Klaviyo entra en esta categoría y se puede añadir y gestionar a través de Google Tag Manager.

Antes de empezar

Configurar Google Tag Manager

Si ya has creado una cuenta de Google Tag Manager y has instalado su contenedor en tu sitio, puedes saltarte estos pasos y dirigirte a la sección sobre crear una etiqueta.
1. Crea una cuenta de Google Tag Manager.
2. Añade los scripts de instalación a tu sitio.

Si es la primera vez que usas Google etiqueta Manager, revisa su documentación sobre cómo configurar una cuenta y añadir los scripts de instalación a tu sitio.

Crear una nueva etiqueta

1. En el espacio de trabajo de tu sitio, crea una nueva etiqueta para el seguimiento Active on Site de Klaviyo. Recomendamos crear etiquetas y activadores independientes para el seguimiento Active on Site y Viewed Product. Esto se debe a que el seguimiento Viewed Product solo se activará en las páginas de producto, mientras que el seguimiento Active on Site debería activarse en todas las páginas de tu sitio.
2. Selecciona HTML personalizado como tipo de etiqueta.

3. En Klaviyo, selecciona integraciones en la barra lateral.
4. Selecciona Gestionar datos > Configurar seguimiento web.

Si se te solicita, selecciona Configurar manualmente y, a continuación, Siguiente para ver el fragmento. Si, en su lugar, la pantalla de configuración muestra instrucciones para las integraciones de comercio electrónico, utiliza el fragmento manual Active on Site y sustituye el marcador de posición de clave de API pública según se indica.

6. Desde Google Tag Manager, pega tu fragmento Active on Site de Klaviyo en el cuadro de HTML.

7. Configura el activador para que se active en una visualización de página para todas las páginas. Esto garantiza que tu snippet Active on Site se active cada vez que los clientes vean una página en tu sitio.

8. Guarda la nueva etiqueta. Previsualiza los cambios para comprobar que la etiqueta se activa y, a continuación, publica el contenedor para que el seguimiento se active en tu sitio web. Guardar solo la etiqueta no la publica.

Puedes añadir el fragmento Viewed Product con el mismo método. Usa el fragmento para tu plataforma de comercio electrónico desde la guía de seguimiento de Viewed Product. Modifica el activador para que solo se active en las páginas de detalles del producto. En algunos sitios, esto se puede conseguir limitando el activador para que solo se active en las páginas en las que la URL incluya la palabra "product". Comprueba que la regla solo coincida con las páginas de detalles del producto y, a continuación, guarda, previsualiza y publica la etiqueta.

Prueba el seguimiento en el sitio

1. Ve a tu sitio web.
2. Añade lo siguiente al final de la URL:

?utm_email=klaviyogreen@gmail.com

Sustituye "klaviyogreen@gmail.com" por tu propia dirección de email antes de cargar la URL. Si la URL ya contiene un ?, añade &utm_email=your-email@example.com en su lugar. Coloca el parámetro antes de cualquier fragmento # y, a continuación, pulsa Intro para volver a cargar la página.

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

4. Si añadiste 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 su feed de actividad para ver el evento de prueba y los detalles del producto.

Si tienes problemas para que se active el evento Viewed Product, asegúrate de que las etiquetas estén configuradas para activarse en un orden específico. Siempre querrás que el fragmento Active on Site se active antes que el fragmento Viewed Product. Sigue las instrucciones de Google sobre la secuenciación de etiquetas para establecer el orden.

Si Google Tag Manager muestra un error al guardar un fragmento, comprueba el código con los requisitos de HTML personalizado de Google. Si no puedes resolver el error, puedes instalar los fragmentos directamente en el sitio en su lugar.

Usar Google etiqueta Mánager en Shopify

Con Shopify, en lugar de usar Google Tag Manager, se recomienda habilitar el seguimiento in situ de Klaviyo a través de la inserción de la aplicación de Klaviyo en Shopify. La inserción de la aplicación habilita el seguimiento de Active on Site y Viewed Product, siempre que la inserción de la aplicación esté activada y que el ajuste Add Viewed Product tracking to my site esté marcado en la página de ajustes de integraciones. Nuestra integración con Shopify también habilita Submitted Search, Viewed Collection y Added to Cart a través del ajuste Track behavioral events.

Si quieres añadir seguimiento en el sitio mediante Google Tag Manager, asegúrate de desactivar primero la inserción de la aplicación. Configura la etiqueta Active on Site de los pasos anteriores para cargar Klaviyo.js en todas las páginas. Luego, añade el fragmento de código que aparece 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í mismo. Guarda, previsualiza y publica ambas etiquetas y, a continuación, completa las dos pruebas de seguimiento anteriores.

El punto de conexión de productos de Shopify que se usa a continuación devuelve etiquetas de productos, no 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