Klaviyo - Integrazione/Setup

In questo articolo, imparerete 2 metodi diversi che spiegano come inviare i dati linguistici a Klaviyo

1. Attraverso un modulo di iscrizione di Klaviyo

Questa guida aggiungerà una proprietà aggiuntiva chiamata lang a ogni utente che si iscrive tramite un modulo Klaviyo sul vostro sito web. Poi create dei segmenti su Klaviyo per inviare loro email in diverse lingue.

Per prima cosa, individuare l'ID HTML del modulo di iscrizione di Klaviyo sulla propria pagina (di solito#klaviyo-form-numeri). Il selettore per questo modulo è quindi #klaviyo-form-URs6Bv

Includere il seguente snippet nel codice HTML. Assicurarsi di includerlo dopo entrambi i comandi Weglot e KlaviyoSubscribe sono inclusi. Assicurarsi di sostituire #email_subscribe con il selettore effettivo nel modulo.

Se si utilizza Weglot con l'app Shopify, aggiungere anche lo snippet di Weglot prima dello script Klaviyo

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

Ecco lo script per collegare 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>

Questo codice otterrà la lingua utilizzata dal visitatore quando invia il modulo Klaviyo e invierà il tag della lingua al plugin Klaviyo.

Ciò significa che quando un visitatore invia il modulo Klaviyo per la newsletter, questo visitatore deve essere creato nel plugin Klaviyo con un tag lang relativo alla lingua utilizzata sul sito web quando ha inviato il modulo.

Si noti che il tag può essere aggiunto solo ai nuovi clienti registrati e non può essere applicato ai clienti che si sono iscritti prima dell'integrazione dello script.

Se si desidera seguire lo stesso metodo ma per più moduli Klaviyo, è possibile utilizzare il codice sottostante. Dovrete solo modificare l'ID del modulo all'interno del codice (in questa spiegazione, gli ID sono #klaviyo-form-RTbEav, #klaviyo-form-UJyYv5, e #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. Attraverso lo Snippet di tracciamento Web di Klaviyo

• Assicuratevi di utilizzare già il Klaviyo Web Tracking Snippet sul vostro sito web.
• Includere il seguente codice dopo il codice del Web Tracking di Klaviyo e il codice dello switcher di Weglot:

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