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

O que você vai aprender

Aprenda a usar o método getGroupMembership do objeto JavaScript Klaviyo para verificar se um visitante identificado pertence a uma lista ou segmento e usar os resultados para personalizar seu site. Isso exige carregar o objeto Klaviyo e passar uma matriz de IDs de listas ou segmentos para verificar.

Antes de começar

Você vai precisar ter acesso ao código do seu site. Trabalhe com um desenvolvedor se você precisar de ajuda com JavaScript, com a instalação dos snippets ou com a aplicação de personalização ao seu site.

A API de associação a grupos exige que a Klaviyo identifique o navegador do visitante e o corresponda a um perfil. Ela não pode retornar a associação a listas ou segmentos para um visitante não identificado. As formas comuns de a Klaviyo identificar um visitante incluem:

• 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 o seu site usa rastreamento personalizado para identificar alguém para a Klaviyo quando essa pessoa faz login

Veja o vídeo da Klaviyo sobre como usar a API de associação a grupos.

Instale o Klaviyo.js e carregue o objeto Klaviyo

Primeiro, instale o Klaviyo.js, se você ainda não tiver feito isso. O Klaviyo.js, também conhecido como JavaScript com atividade no site da Klaviyo, oferece suporte ao objeto klaviyo. Se a sua integração de e-commerce tiver instalado o Klaviyo.js no seu site, você não precisa instalá-lo novamente. Caso contrário, instale-o manualmente antes de usar o objeto klaviyo.

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

Verificar associação à lista ou ao segmento

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 segmento para os quais você quer verificar a participação. Você pode passar até 50 IDs no total por chamada.
2. Identifique o visitante no seu site por meio de um formulário do Klaviyo ou de outro método de identificação. Se você chamar klaviyo.identify no seu código, aguarde a conclusão antes de verificar a associação.
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'])

O método retorna uma Promise que é resolvida em um array contendo apenas os IDs do seu array de entrada aos quais o visitante identificado pertence. Use .then() para trabalhar com o resultado, como mostrado abaixo, ou use await com o resultado dentro de uma função async. Um array vazio pode significar que o visitante não pertence a nenhuma das listas ou segmentos que você forneceu, que o visitante não pôde ser identificado, que você passou mais de 50 IDs ou que a solicitação falhou. Um resultado vazio, por si só, não distingue esses casos.

Use a lista retornada e os IDs de segmento no código do seu site ou em uma ferramenta de personalização da web para escolher produtos, conteúdo e muito mais relevantes. Adicione a lógica que altera a sua página depois que o resultado estiver disponível e mantenha o conteúdo padrão disponível quando nenhum ID correspondente for retornado.

Exemplo de código

Este exemplo verifica a associação em vários segmentos. Substitua as strings de placeholder pelos IDs dos seus segmentos. O código dentro de .then() é executado depois que o resultado estiver disponível; adicione o código de personalização do seu site onde indicado.

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

Impacto no desempenho do site

A Klaviyo carrega o script de personalização da web de forma assíncrona. Mantenha o conteúdo padrão do seu site disponível enquanto a solicitação de assinatura é concluída e, em seguida, aplique a personalização depois de receber o resultado.

As respostas de associação podem ser armazenadas em cache pelo navegador, permitindo que solicitações repetidas para o mesmo visitante e IDs reutilizem a resposta em cache. Uma solicitação diferente ou um cache expirado pode exigir outra chamada de API, então não há garantia de que o resultado reflita uma mudança de associação imediatamente.

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