Klaviyo - Intégration / Configuration

Dans cet article, vous découvrirez deux méthodes différentes qui expliquent comment envoyer des données linguistiques à Klaviyo.

1. Via un formulaire d'inscription Klaviyo

Ce code va ajouter un attribut appelée lang à chaque utilisateur qui s'inscrit par le biais d'un formulaire Klaviyo sur votre site web. Vous créez ensuite des segments sur Klaviyo pour leur envoyer des courriels dans différentes langues.

Tout d'abord, localisez l'ID du formulaire d'inscription Klaviyo sur votre page (habituellement#klaviyo-form-numbers). Le sélecteur pour ce formulaire est alors #klaviyo-form-URs6Bv

Incluez l'extrait suivant dans votre code HTML. Veillez à l'inclure après les deux Weglot et KlaviyoSubscribe dans votre HTML. Assurez-vous de remplacer #email_subscribe avec le sélecteur réel du formulaire.

Si vous utilisez Weglot avec l'application Shopify, veuillez également ajouter le snippet Weglot avant le script Klaviyo.

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_API_KEY'
    });
</script>

Voici le script pour lier Klaviyo :

<script>
 function identifyLanguageToKlaviyo(lang) {
      setTimeout(function(){
        const klaviyoForm = document.querySelector('form[data-testid="klaviyo-form-URs6Bv"]');
        const langAttribute = document.querySelector('html').getAttribute('lang');
        if(klaviyoForm){
          console.log("push");
            klaviyo.push(['identify', { 'lang': langAttribute }]);
        }
      }, 7000);
    }
  
  
  identifyLanguageToKlaviyo(Weglot.getCurrentLang());
  Weglot.on('languageChanged', identifyLanguageToKlaviyo)
  Weglot.on("switchersReady", identifyLanguageToKlaviyo);
</script>

Ce code récupère la langue utilisée par le visiteur lorsqu'il soumet le formulaire Klaviyo et envoie la balise de langue à votre plugin Klaviyo.

Cela signifie que lorsqu'un visiteur soumet le formulaire de votre newsletter Klaviyo, ce visiteur doit être créé dans votre plugin Klaviyo avec une balise lang liée à la langue utilisée sur le site web lorsqu'il a soumis le formulaire.

Notez que l'étiquette ne peut être ajoutée qu'aux nouveaux clients enregistrés et ne peut pas être appliquée aux clients qui se sont inscrits avant l'intégration du script.

Si vous souhaitez suivre la même méthode mais pour plusieurs formulaires Klaviyo, vous pouvez utiliser le code ci-dessous. Il vous suffira de modifier l'ID du formulaire à l'intérieur du code (dans cette explication, les ID sont #klaviyo-form-RTbEav, #klaviyo-form-UJyYv5et #klaviyo-form-YjxCKV) :

<script>
  function identifyLanguageToKlaviyo(lang) {
    setTimeout(function () {
      const klaviyoForms = document.querySelectorAll('form[data-testid="klaviyo-form-RTbEav"], form[data-testid="klaviyo-form-UJyYv5"], form[data-testid="klaviyo-form-YjxCKV"]');
      const langAttribute = document.querySelector('html').getAttribute('lang');
      if (klaviyoForms && typeof klaviyo !== "undefined") {
        klaviyoForms.forEach(form => {
          console.log("push");
          klaviyo.push(['identify', { 'lang': langAttribute }]);
        });
      }
    }, 7000);
  }

  identifyLanguageToKlaviyo(Weglot.getCurrentLang());
  Weglot.on('languageChanged', identifyLanguageToKlaviyo);
  Weglot.on("switchersReady", identifyLanguageToKlaviyo);
</script>

2. Grâce à l'extrait de suivi Web de Klaviyo

• Assurez-vous que vous utilisez déjà le Klaviyo Web Tracking Snippet sur votre site web.
• Inclure le code suivant après le code de suivi Web de Klaviyo et le code du commutateur de Weglot :

<script>
(function() {
  var identifyLanguageToKlaviyo = function(lang) {
    var _learnq = window._learnq || [];
    _learnq.push(['identify', {
      $lang: lang
    }]);
  }
  identifyLanguageToKlaviyo(Weglot.getCurrentLang())
  Weglot.on('languageChanged', identifyLanguageToKlaviyo)
})()
</script>