Como personalizar conteúdo no site com a API de associação a grupos da Klaviyo

O que você vai aprender

Saiba como usar o método getGroupMembership do objeto JavaScript klaviyo, que pode ser usado para implementar personalização no site no seu site. Isso exige carregar o objeto klaviyo e passar uma matriz de listas ou segmentos para verificar, o que retornará uma saída que você pode aproveitar para personalização no site.

Antes de começar

Quando você adiciona o rastreamento no site da Klaviyo ao seu site, apenas a atividade de navegação de "navegadores conhecidos" é rastreada (ou seja, navegadores que visitaram, tiveram com interações e foram identificados ou receberam "cookies"). O rastreamento no site da Klaviyo não rastreia navegadores anônimos. Existem 3 principais maneiras pelas quais a Klaviyo identificará um visitante do site para rastreamento no site:

• Se alguém tiver clicado em um Klaviyo Email para acessar seu site
• Se alguém tiver se inscrito por meio de um formulário da Klaviyo
• Se alguém tiver feito login no seu site e você tiver o rastreamento instalado

Assista ao vídeo do Klaviyo sobre como usar a API de associação a grupos.

Instale o Klaviyo.js e carregue o objeto Klaviyo

Primeiro, você precisará instalar o Klaviyo.js, se ainda não tiver feito isso. Klaviyo.js, também conhecido como JavaScript Active on Site da Klaviyo, oferece suporte automaticamente ao objeto klaviyo. Se você tiver ativado uma integração com sua conta da Klaviyo ou instalado o Klaviyo.js manualmente, você poderá iniciar o objeto klaviyo para ouvir chamadas relevantes.

Para usar o objeto Klaviyo imediatamente no carregamento da página, recomendamos instalar manualmente o snippet abaixo no seu site (além de instalar o Klaviyo.js, como mencionado acima). O objeto Klaviyo só precisa ser carregado uma vez por página.

Para carregar o 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 o método getGroupMembership do objeto JavaScript klaviyo para personalização no site:

1. No seu código, selecione os IDs de lista ou de segmento para os quais você quer verificar associação. O limite é de 50 listas ou segmentos.
2. Identifique usuários no seu site por meio de um formulário do Klaviyo ou de outras formas.
3. Faça uma chamada no seguinte formato, com uma matriz dos IDs de lista ou segmento para os quais você quer verificar a associação:

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

A saída fornecida será uma matriz dos IDs das listas/segmentos aos quais o usuário identificado pertence, considerando que esses IDs estavam na matriz de entrada. Se uma matriz vazia for retornada, isso significa que você incluiu IDs demais ou que o usuário não pertence a nenhuma das listas ou segmentos fornecidos.

Você pode usar os dados de segmento retornados e de associação a lista para personalizar seu site com produtos, conteúdo e muito mais relevantes, com base em segmentos de clientes do Klaviyo.

Exemplo de código

Veja um exemplo que mostra como chamar a API getGroupMembership com vários IDs de segmento.

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

Impacto no desempenho do site

A API de associação ao grupo tem impacto mínimo no desempenho do seu site. O arquivo JavaScript (ou seja, web_personalization.js) que a Klaviyo carrega no seu site tem apenas cerca de 1,2 KB, e a solicitação de pacote desse arquivo não bloqueia a thread principal, portanto não afeta a usabilidade de nenhuma página.

Os dados carregados para personalizar um site com base no perfil do cliente ficam em cache no navegador após serem solicitados pela primeira vez, portanto solicitações adicionais não exigem chamadas de API de backend.

Resultado

Agora você pode usar o objeto JavaScript Klaviyo com ferramentas de personalização da web e para personalizar o conteúdo no site com base na participação em um segmento ou lista.

Recursos adicionais