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 klaviyo para comprobar si un visitante identificado pertenece a una lista o a un segmento, y usar los resultados para personalizar tu sitio web. Esto requiere cargar el objeto klaviyo y pasar una matriz de ID de listas o segmentos para comprobarlos.

Antes de empezar

Necesitarás acceder al código de tu sitio web. Trabaja con un desarrollador si necesitas ayuda con JavaScript, la instalación de los snippets o la aplicación de la personalización en tu sitio.

La API de pertenencia a grupos requiere que Klaviyo identifique el navegador del visitante y lo asocie a un perfil. No puede devolver la pertenencia a listas o segmentos de un visitante no identificado. Algunas formas habituales en que Klaviyo identifica a un visitante son:

• 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 tu sitio utiliza un seguimiento personalizado para identificar a alguien en Klaviyo cuando inicia sesión

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, instala Klaviyo.js si todavía no lo has hecho. Klaviyo.js, también conocido como JavaScript de Active on Site de Klaviyo, es compatible con el objeto klaviyo. Si la integración de comercio electrónico ha instalado Klaviyo.js en el sitio, no es necesario volver a instalarlo. De lo contrario, instálalo manualmente antes de usar el objeto klaviyo.

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

Verificar la pertenencia a una lista o a un segmento

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

1. En el código, selecciona los ID de lista o segmento para los que quieras comprobar la pertenencia. Puedes pasar hasta 50 ID en total por llamada.
2. Identifica al visitante de tu sitio mediante un formulario de Klaviyo u otro método de identificación. Si llamas a klaviyo.identify en tu código, espera a que se complete antes de comprobar la pertenencia.
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 método devuelve una Promise que se resuelve en un array que contiene únicamente los ID del array de entrada a los que pertenece el visitante identificado. Usa .then() para trabajar con el resultado, como se muestra a continuación, o usa await con el resultado dentro de una función async. Un array vacío puede significar que el visitante no pertenece a ninguna de las listas o 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 entre estos casos.

Usa los IDs de la lista y de los segmentos devueltos en el código del sitio web o en una herramienta de personalización web para elegir productos, contenido y mucho más relevantes. Añade la lógica que cambia la página una vez que el resultado esté disponible y mantén el contenido predeterminado disponible cuando no se devuelvan IDs coincidentes.

Ejemplo de código

Este ejemplo comprueba la pertenencia a varios segmentos. Reemplaza las cadenas de marcador de posición por los ID de segmento. El código dentro de .then() se ejecuta después de que el resultado esté disponible; añade el código de personalización del sitio donde se indica.

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 disponible el contenido predeterminado del sitio mientras se completa la solicitud de membresía y, después, aplica la personalización cuando recibas el resultado.

Las respuestas de membresía pueden almacenarse en caché en el navegador, lo que permite que las solicitudes repetidas del mismo visitante y de los mismos ID reutilicen la respuesta almacenada en caché. Una solicitud diferente o una caché caducada puede requerir otra llamada a la 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