Klaviyo - Integration/Einrichtung

In diesem Artikel lernen Sie 2 verschiedene Methoden kennen, die erklären, wie Sie Sprachdaten an Klaviyo senden können

1. Über ein Klaviyo-Anmeldeformular

Diese Anleitung fügt eine zusätzliche Eigenschaft namens lang an jeden Nutzer, der sich über ein Klaviyo-Formular auf Ihrer Website anmeldet. Sie erstellen dann Segmente auf Klaviyo, um ihnen E-Mails in verschiedenen Sprachen zu senden.

Suchen Sie zunächst die HTML-ID des Klaviyo-Anmeldeformulars auf Ihrer Seite (normalerweise#klaviyo-form-numbers). Der Selektor für dieses Formular lautet dann #klaviyo-form-URs6Bv

Fügen Sie das folgende Snippet in Ihren HTML-Code ein. Stellen Sie sicher, dass Sie ihn nach beiden Weglot und KlaviyoSubscribe sind enthalten. Stellen Sie sicher, dass Sie ersetzen #email_subscribe mit dem eigentlichen Selektor im Formular.

Wenn Sie Weglot mit der Shopify App verwenden, fügen Sie bitte auch das Weglot Snippet vor dem Klaviyo Skript ein

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

Hier ist das Skript zum Verlinken von 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>

Dieser Code ermittelt die Sprache, die der Besucher verwendet, wenn er das Klaviyo-Formular ausfüllt, und sendet das Sprach-Tag an Ihr Klaviyo-Plugin.

Das bedeutet, wenn ein Besucher Ihr Newsletter-Klaviyo-Formular abschickt, sollte dieser Besucher in Ihrem Klaviyo-Plugin mit einem lang-Tag erstellt werden, das der Sprache entspricht, die auf der Website verwendet wurde, als er das Formular abschickte.

Beachten Sie, dass der Tag nur für neu registrierte Kunden hinzugefügt werden kann und nicht für Kunden, die sich vor der Integration des Skripts angemeldet haben.

Wenn Sie die gleiche Methode für mehrere Klaviyo-Formulare anwenden möchten, können Sie stattdessen den unten stehenden Code verwenden. Sie müssen lediglich die Formular-ID innerhalb des Codes bearbeiten (in dieser Erklärung sind die IDs #klaviyo-form-RTbEav, #klaviyo-form-UJyYv5und #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. Durch das Web-Tracking-Snippet von Klaviyo

• Stellen Sie sicher, dass Sie das Klaviyo Web Tracking Snippet bereits auf Ihrer Website verwenden.
• Fügen Sie den folgenden Code sowohl nach dem Web-Tracking-Code von Klaviyo als auch nach dem Switcher-Code von Weglot ein:

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