Cómo personalizar el contenido en el sitio web con la API de pertenencia a grupos de Klaviyo

Qué aprenderás

Aprende a usar el método getGroupMembership del objeto JavaScript de klaviyo, que se puede utilizar para implementar la personalización en el sitio en tu sitio web. Para ello, es necesario cargar el objeto klaviyo y pasar una matriz de listas o segmentos para comprobarla, lo que devolverá una salida que podrás aprovechar para la personalización en el sitio.

Antes de empezar

Cuando añades el seguimiento en el sitio de Klaviyo a tu sitio, solo se realiza el seguimiento de la actividad de navegación de los «navegadores conocidos» (es decir, navegadores que han visitado, interactuado y han sido identificados o «cocreados»). El seguimiento en el sitio de Klaviyo no realiza el seguimiento de los navegadores anónimos. Hay 3 formas clave en las que Klaviyo identificará a un visitante del sitio para el seguimiento en el sitio:

• Cuando una persona hace clic en un enlace dentro de un Klaviyo email con dirección a tu sitio web
• Si alguien se ha suscrito mediante un formulario de Klaviyo
• Si alguien ha iniciado sesión en tu sitio y tienes el seguimiento instalado

Consulta el vídeo de Klaviyo sobre cómo usar la API de pertenencia a grupos.

Instala Klaviyo.js y carga el objeto de Klaviyo

Primero tendrás que instalar Klaviyo.js, si todavía no lo has hecho. Klaviyo.js, también conocido como JavaScript Active on Site de Klaviyo, es compatible automáticamente con el objeto klaviyo. Si has habilitado integraciones con tu cuenta de Klaviyo o has instalado Klaviyo.js manualmente, podrás iniciar el objeto klaviyo para que escuche las llamadas pertinentes.

Para usar el objeto klaviyo inmediatamente al cargar la página, te recomendamos instalar manualmente el fragmento de código que aparece a continuación en tu sitio (además de instalar Klaviyo.js, como se mencionó anteriormente). El objeto klaviyo solo necesita cargarse una vez por página.

Para cargar el objeto klaviyo:

 
!(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);
        });
    }
  }
})();

Para usar el método getGroupMembership del objeto JavaScript de klaviyo para la personalización en tu sitio web:

1. En tu código, selecciona los ID de lista o segmento en los que quieres comprobar la pertenencia. El límite es de 50 listas o segmentos.
2. Identifica a los usuarios en tu sitio mediante un formulario de Klaviyo u otros medios.
3. Realiza una llamada en el siguiente formato, con una matriz de los ID de la lista o del segmento para los que quieres comprobar la pertenencia:

klaviyo.getGroupMembership(['listID1', 'listID2', 'listID3'])

El resultado proporcionado será una matriz de los ID de listas/segmentos a los que pertenece el usuario identificado, siempre que esos ID estuvieran en la matriz de entrada. Si se devuelve una matriz vacía, significa que has introducido demasiados ID o que el usuario no pertenece a ninguna de las listas o segmentos que has proporcionado.

Puedes utilizar los datos de pertenencia a segmentos y listas devueltos para personalizar tu sitio con productos, contenido y mucho más relevantes en función de los segmentos de clientes de Klaviyo.

Ejemplo de código

Aquí tienes un ejemplo que muestra cómo llamar a la API getGroupMembership con varios identificadores de segmento.

const customerSegments = await klaviyo.getGroupMembership([
  VIPSegmentID,
  UnEngagedSegmentID,
  DogLoversSegmentID
]);

Impacto en el rendimiento del sitio

La API de pertenencia a grupos tiene un impacto mínimo en el rendimiento de tu sitio. El archivo Javascript (es decir, web_personalization.js) que Klaviyo carga en tu sitio es de solo 1,2 KB y la solicitud de paquete de este archivo no bloquea el hilo principal, por lo que no afecta a la usabilidad de ninguna página.

Los datos que se cargan para personalizar un sitio en función del perfil del cliente se almacenan en caché en el navegador después de solicitarse por primera vez, por lo que las solicitudes adicionales no requieren llamadas a la API de backend.

Resultado

Ahora puedes usar el objeto JavaScript klaviyo con herramientas de personalización web y para personalizar el contenido en el sitio en función de la pertenencia a un segmento o una lista.

Recursos adicionales