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, puedes omitir estos pasos e ir 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 un nuevo activador para el seguimiento Active on Site de Klaviyo. Recomendamos crear un activador independiente para el seguimiento de Active on Site y Viewed Product. Esto se debe a que el seguimiento Viewed Product solo se activará en tus 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. Para localizar tu fragmento de código 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 de Configurar seguimiento web en la parte superior derecha.

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 tu nueva etiqueta. Esto completa la adición de tu fragmento de seguimiento Active on Site con Google Tag Manager.

Puedes añadir tu fragmento de 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 puede lograrse limitando el activador para que solo se active en páginas en las que la URL incluya la palabra "product".

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

Puedes sustituir «klaviyogreen@gmail.com» por tu propia dirección de email. Pulsa Intro para volver a cargar la página.

3. Luego, en tu cuenta de Klaviyo, ve a panel > feed de actividad. Si tu seguimiento en el sitio está instalado correctamente, verás un nuevo evento Active on Site en la parte superior de tu feed de actividad desde el email que introdujiste en el parámetro de URL anterior.

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 querrás que tu fragmento Active on Site se active antes que tu fragmento Viewed Product.

Si aparece un error al intentar guardar cualquiera de los snippets de seguimiento en Google Tag Manager, tendrás que pegar los snippets directamente en tu sitio.

Usar Google etiqueta Mánager en Shopify

Con Shopify, en lugar de usar Google Tag Manager, se recomienda habilitar el seguimiento onsite de Klaviyo mediante el app embed de Klaviyo en Shopify. La inserción de la aplicación habilita el seguimiento de Activo en el sitio y Producto visto, siempre que esté activada y que el ajuste Producto visto esté marcado en la página de configuración de la integración. Nuestra integración con Shopify también habilita Submitted Search, Viewed Collection y Added to Cart mediante la configuración Track behavioral events.

Si quieres añadir el seguimiento in situ a través de Google Tag Manager, asegúrate de desactivar primero la inserción de la aplicación. A continuación, utiliza el siguiente fragmento.

Las "Collections" no están disponibles a través de la API de AJAX de Shopify, así que se capturan las etiqueta de producto de Shopify (etiqueta) en el fragmento de código que aparece 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