Klaviyo - Integration/Setup

In this article, you'll learn 2 different methods that explain how to send language data to Klaviyo

1. Through a Klaviyo signup form

This guide will add an extra property called lang to each user who signs up through a Klaviyo form on your website. You then create segments on Klaviyo to send them emails in different languages.

First, locate the HTML ID of the Klaviyo signup form on your page (Usually#klaviyo-form-numbers). The selector for that form is then #klaviyo-form-URs6Bv

Include the following snippet in your HTML code. Make sure you include it after both Weglot and KlaviyoSubscribe are included. Make sure you replace #email_subscribe with the actual selector in the form.

If you use Weglot with the Shopify App, please also add the Weglot snippet before the Klaviyo script

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

Here is the script to link 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>

This code will get the language the visitor uses when he submits the Klaviyo form and send the language tag to your Klaviyo plugin.

This means that when a visitor submits your newsletter Klaviyo form, this visitor should be created in your Klaviyo plugin with a lang tag related to the language used on the website when he submitted the form.

Note that the tag can only be added to new registered customers and can not be applied to customers who signed up before the script was integrated.

If you'd like to follow the same method but for several Klaviyo forms, you can use the code below instead. You will just have to edit the form ID inside the code (in this explain, the IDs are #klaviyo-form-RTbEav, #klaviyo-form-UJyYv5, and #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. Through Klaviyo's Web Tracking Snippet

• Make sure you're already using Klaviyo Web Tracking Snippet on your website.
• Include the following code after both Klaviyo's Web Tracking code and Weglot's switcher code:

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