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 para comprobar si un visitante identificado pertenece a una lista o a un segmento y usar los resultados para personalizar tu sitio web. Para hacerlo, es necesario cargar el objeto Klaviyo y pasar una matriz de IDs de lista o de segmento para comprobarlos.

Antes de empezar

Necesitarás acceso al código de tu sitio web. Trabaja con un desarrollador si necesitas ayuda con JavaScript, instalar los snippets o aplicar personalización en tu sitio.

La interfaz de programación de aplicaciones (API) de membresía de grupos requiere que Klaviyo identifique el navegador del visitante y lo vincule a un perfil. No puede devolver la pertenencia a una lista o segmento para un visitante no identificado. Las formas comunes en que Klaviyo identifica a un visitante incluyen:

• Si alguien hizo clic desde un Klaviyo Email hacia el sitio web
• Si alguien se suscribió mediante un formulario de Klaviyo
• Si el sitio usa seguimiento personalizado para identificar a alguien en Klaviyo cuando inicia sesión

Consulta el video de Klaviyo sobre el uso de la interfaz de programación de aplicaciones (API) de membresía de grupo.

Instala Klaviyo.js y carga el objeto Klaviyo

Primero, instala Klaviyo.js si aún no lo has hecho. Klaviyo.js, también conocido como JavaScript con actividad en el sitio de Klaviyo, es compatible con el objeto klaviyo. Si tu integración de ecommerce instaló Klaviyo.js en tu sitio, no necesitas instalarlo de nuevo. De lo contrario, instálalo manualmente antes de usar el objeto klaviyo.

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

Verificar la pertenencia a la lista o al segmento

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

1. En el código, selecciona los ID de listas o segmentos cuya membresía quieres comprobar. Puedes pasar hasta 50 ID en total por llamada.
2. Identifica al visitante en el sitio mediante un formulario de Klaviyo u otro método de identificación. Si llamas a klaviyo.identify en el código, espera a que termine antes de comprobar la membresía.
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 método devuelve una Promise que se resuelve en un arreglo que contiene solo los ID del arreglo de entrada al que pertenece el visitante identificado. Usa .then() para trabajar con el resultado, como se muestra a continuación, o espera el resultado dentro de una función async. Una matriz vacía puede significar que el visitante no pertenece a ninguna de las listas o los segmentos que proporcionaste, que no se pudo identificar al visitante, que pasaste más de 50 ID o que la solicitud falló. Un resultado vacío por sí solo no distingue estos casos.

Usa la lista devuelta y los ID de segmento en el código de tu sitio web o en una herramienta de personalización web para elegir productos, contenido y más relevantes. Agrega la lógica que cambia la página después de que el resultado esté disponible y mantén el contenido predeterminado disponible cuando no se devuelvan ID coincidentes.

Ejemplo de código

Este ejemplo verifica la pertenencia a varios segmentos. Reemplaza las cadenas de marcador de posición con los ID de tus segmentos. El código dentro de .then() se ejecuta después de que el resultado esté disponible; agrega el código de personalización del sitio donde se indique.

klaviyo.getGroupMembership([
  'VIPSegmentID',
  'UnEngagedSegmentID',
  'DogLoversSegmentID'
]).then((customerSegments) => {
  if (customerSegments.includes('VIPSegmentID')) {
    // Add code to display your VIP content here.
  }
});

Impacto en el rendimiento del sitio

Klaviyo carga el script de personalización web de forma asíncrona. Mantén el contenido predeterminado del sitio disponible mientras se completa la solicitud de membresía y, después, aplica la personalización cuando recibas el resultado.

El navegador puede almacenar en caché las respuestas de membresía, lo que permite que las solicitudes repetidas del mismo visitante y los mismos ID reutilicen la respuesta almacenada en caché. Una solicitud diferente o una caché vencida puede requerir otra llamada a la interfaz de programación de aplicaciones (API), por lo que no se garantiza que el resultado refleje un cambio de membresía de inmediato.

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