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, 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 a tu 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. En el espacio de trabajo del sitio, crea un nuevo activador para el seguimiento de Klaviyo con actividad en el sitio. Recomendamos crear un activador independiente para el seguimiento con actividad en el sitio y Producto visto. Esto se debe a que el seguimiento de Viewed Product solo se activará en las páginas de producto, mientras que el seguimiento de Active on Site debería activarse en todas las páginas del sitio.
2. Selecciona HTML personalizado como el tipo de etiqueta.

3. Para encontrar tu fragmento Active on Site en Klaviyo, haz clic en el menú de tu cuenta y selecciona integraciones.
4. Desde aquí, haz clic en el botón configurar seguimiento web en la parte superior derecha.

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. Con esto se completa la adición del fragmento de seguimiento de Activa en el sitio con Google Etiqueta Gerente.

Puedes agregar el fragmento Producto visto con el mismo método. Modifica el activador para que solo se active en páginas que incluyan tus productos. 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".

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

Puedes reemplazar "klaviyogreen@gmail.com" por tu propia dirección de correo electrónico. Presiona Intro para volver a cargar la página.

3. Luego, en tu cuenta de Klaviyo, ve a panel > Feed de actividad. Si el seguimiento en el sitio está instalado correctamente, verás un nuevo evento con actividad en el sitio en la parte superior de tu feed de actividad del correo electrónico que ingresaste en el parámetro de URL de arriba.

Si tienes problemas para que se active el evento Producto visto, asegúrate de que tus etiquetas estén configuradas para activarse en un orden específico. Siempre conviene que el fragmento Active on Site se active antes que el fragmento Viewed Product.

Si recibes un error al intentar guardar cualquiera de los fragmentos de seguimiento en Google Tag Manager, deberás pegar los fragmentos directamente en el sitio.

Usar Google Tag Manager en Shopify

Con Shopify, en lugar de usar Google Tag Manager, se recomienda habilitar el seguimiento en el sitio de Klaviyo a través de la inserción de app de Klaviyo en Shopify. La inserción de app habilita el seguimiento de con actividad en el sitio y producto visto, siempre que esté activada y que el ajuste de producto visto esté seleccionado en la página de ajustes de integraciones. Nuestra integración de Shopify también habilita búsqueda enviada, colección vista y agregado al carrito mediante el ajuste rastrear eventos de comportamiento.

Si quieres agregar seguimiento en el sitio mediante Google Tag Gerente, asegúrate de desactivar primero la inserción de la app. Luego, usa el fragmento a continuación.

Las "Colecciones" no están disponibles a través de la API de AJAX de Shopify, por lo que en su lugar se capturan las etiquetas de productos de Shopify (etiquetas) en el fragmento de código a continuación.

<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 || [];
product_handle = location.href.split( '/' ).pop().split( '?' )[0];
fetch('/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.Categories,
    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