Cómo personalizar el contenido del sitio con la interfaz de programación de aplicaciones (API) de membresía de grupos de Klaviyo

Objetivos del artículo

Descubre cómo usar el método getGroupMembership del objeto JavaScript de klaviyo, que se puede usar para implementar personalización en el sitio en tu sitio web. Esto requiere cargar el objeto klaviyo y pasar un arreglo de listas o segmentos para revisar, lo que devolverá un resultado que puedes aprovechar para la personalización en el sitio.

Antes de empezar

Cuando agregas el seguimiento en el sitio de Klaviyo a tu sitio, solo se rastrea la actividad de navegación de los "navegadores conocidos" (es decir, navegadores que han visitado, con interacciones y han sido identificados o han recibido una "cookie"). El seguimiento en el sitio de Klaviyo no rastrea navegadores anónimos. Hay 3 formas clave en que Klaviyo identificará a un visitante del sitio para el seguimiento en el sitio:

• Si alguien hizo clic desde un Klaviyo Email hacia el sitio web
• Si alguien se suscribió mediante un formulario de Klaviyo
• Si alguien ha iniciado sesión en tu sitio y tienes instalado el seguimiento

Mira el video de Klaviyo sobre cómo usar la interfaz de programación de aplicaciones (API) de membresía de grupos.

Instala Klaviyo.js y carga el objeto Klaviyo

Primero deberás instalar Klaviyo.js, si todavía no lo has hecho. Klaviyo.js, también conocido como Klaviyo’s Active on Site JavaScript, admite automáticamente el objeto klaviyo. Si habilitaste una de integraciones con la cuenta de Klaviyo o instalaste Klaviyo.js de forma manual, podrás iniciar el objeto klaviyo para escuchar llamadas relevantes.

Para usar el objeto klaviyo de inmediato al cargar la página, se recomienda instalar manualmente el fragmento de código de abajo en el sitio (además de instalar Klaviyo.js, como se mencionó arriba). El objeto klaviyo solo debe 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 klaviyo para personalización en el sitio:

1. En tu código, selecciona los ID de lista o segmento para 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. Haz una llamada en el siguiente formato, con un arreglo de los ID de lista o segmento en los que quieres verificar la membresía:

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

El resultado será una matriz de ID de lista/segmento 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 se pasaron demasiados ID o que el usuario no pertenece a ninguna de las listas o segmentos proporcionados.

Puedes usar los datos del segmento devuelto y de membresía de la lista para personalizar el sitio con productos y contenido relevantes, entre otros, según los segmentos de clientes de Klaviyo.

Ejemplo de código

Este es un ejemplo que muestra cómo llamar a la interfaz de programación de aplicaciones (API) getGroupMembership con varios ID de segmento.

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

Impacto en el rendimiento del sitio

La interfaz de programación de aplicaciones (API) de membresía de grupo tiene un impacto mínimo en el rendimiento del sitio. El archivo Javascript (es decir, web_personalization.js) que Klaviyo carga en el sitio pesa solo alrededor de 1.2KB y la solicitud del paquete para este archivo no bloquea el hilo principal, por lo que no afecta la usabilidad de ninguna página.

Los datos que se cargan para personalizar un sitio en función del perfil del cliente se guardan en caché en el navegador después de solicitarse por primera vez, por lo que las solicitudes adicionales no requieren llamadas a la interfaz de programación de aplicaciones (API) del 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