Comment personnaliser le contenu sur site avec l’API d’appartenance à un groupe de Klaviyo

Objectif de cet article

Apprenez à utiliser la méthode getGroupMembership de l’objet JavaScript klaviyo pour vérifier l’appartenance d’un visiteur identifié à une liste ou à un segment, et utiliser les résultats pour personnaliser votre site web. Pour cela, chargez l’objet klaviyo et transmettez un tableau d’identifiants de liste ou de segment à vérifier.

Avant de commencer

Vous devez avoir accès au code de votre site. Travaillez avec un développeur si vous avez besoin d’aide avec JavaScript, l’installation des extraits de code, ou l’application de la personnalisation à votre site.

L’API d’appartenance à un groupe nécessite que Klaviyo identifie le navigateur du visiteur et l’associe à un profil. Elle ne peut pas renvoyer l’appartenance à une liste ou à un segment pour un visiteur non identifié. Les méthodes courantes utilisées par Klaviyo pour identifier un visiteur incluent :

• Si quelqu’un a cliqué sur un e-mail de Klaviyo pour accéder à votre site web
• Si quelqu’un s’est abonné par le biais d’un formulaire Klaviyo
• Si votre site utilise un tracking personnalisé pour identifier une personne auprès de Klaviyo lorsqu’elle se connecte

Regardez la vidéo de Klaviyo sur l’utilisation de l’API d’appartenance à un groupe.

Installer Klaviyo.js et charger l’objet Klaviyo

Si ce n’est pas déjà fait, commencez par installer Klaviyo.js. Klaviyo.js, également connu sous le nom de JavaScript « Activité sur le site » de Klaviyo, prend en charge l’objet klaviyo. Si votre intégration e-commerce a installé Klaviyo.js sur votre site, vous n’avez pas besoin de l’installer à nouveau. Sinon, installez-le manuellement avant d’utiliser l’objet klaviyo.

Nous vous recommandons d’installer manuellement l’extrait ci-dessous sur votre site (en plus de l’installation de Klaviyo.js mentionnée ci-dessus) pour utiliser l’objet klaviyo dès le chargement de la page. L’objet klaviyo ne doit être chargé qu’une seule fois par page.

Pour charger l’objet 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);
        });
    }
  }
})();

Vérifier l’appartenance à la liste ou au segment

Pour utiliser la méthode getGroupMembership de l’objet JavaScript klaviyo pour la personnalisation sur site :

1. Dans votre code, sélectionnez la liste ou les identifiants de segment pour lesquels vous souhaitez vérifier l’appartenance. Vous pouvez transmettre jusqu’à 50 ID au total par appel.
2. Identifiez le visiteur sur votre site via un formulaire Klaviyo ou une autre méthode d’identification. Si vous appelez klaviyo.identify dans votre code, attendez la fin de son exécution avant de vérifier l’appartenance.
3. Effectuez un appel au format suivant, avec un tableau des identifiants de liste ou de segment dont vous souhaitez vérifier l’appartenance :

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

La méthode renvoie une Promise qui se résout en un tableau contenant uniquement les ID de votre tableau d’entrée auxquels le visiteur identifié appartient. Utilisez .then() pour travailler avec le résultat, comme indiqué ci-dessous, ou utilisez await sur le résultat au sein d’une fonction async. Un tableau vide peut signifier que le visiteur n’appartient à aucune des listes ou des segments que vous avez fournis, que le visiteur n’a pas pu être identifié, que vous avez transmis plus de 50 ID, ou que la requête a échoué. Un résultat vide, à lui seul, ne permet pas de distinguer ces cas.

Utilisez les ID de liste et de segment renvoyés dans le code de votre site web ou dans un outil de personnalisation web pour choisir des produits, du contenu, et plus encore. Ajoutez la logique qui modifie votre page une fois le résultat disponible, et conservez le contenu par défaut disponible lorsqu’aucun ID correspondant n’est renvoyé.

Exemple de code

Cet exemple vérifie l’appartenance à plusieurs segments. Remplacez les chaînes d’espace réservé par vos ID de segment. Le code à l’intérieur de .then() s’exécute une fois le résultat disponible ; ajoutez le code de personnalisation de votre site à l’endroit indiqué.

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

Impact sur les performances du site

Klaviyo charge le script de personnalisation Web de manière asynchrone. Gardez le contenu par défaut de votre site disponible pendant que la demande d’adhésion se termine, puis appliquez la personnalisation après avoir reçu le résultat.

Les réponses d’adhésion peuvent être mises en cache par le navigateur, ce qui permet à des requêtes répétées pour le même visiteur et les mêmes ID de réutiliser la réponse mise en cache. Une requête différente ou un cache expiré peut nécessiter un autre appel à l’API, de sorte que le résultat n’est pas garanti comme reflétant immédiatement un changement d’adhésion.

Résultat

Vous pouvez désormais utiliser l’objet JavaScript klaviyo avec des outils de personnalisation web et pour personnaliser le contenu sur site en fonction de l’appartenance à un segment ou à une liste.

Ressources supplémentaires