Integrazione con Doofinder

Integra Connectif con Doofinder per utilizzare i dati di ricerca generati da ogni contatto nei workflow di Connectif, così come inserire contenuti dinamici generati in Connectif nei risultati di ricerca forniti da Doofinder.

In questo articolo, imparerai come realizzare l'integrazione con Doofinder e come memorizzare i termini e i filtri di ricerca nei campi personalizzati del contatto. 

 

Questa integrazione funziona solo con Doofinder Live Layer.
Inoltre, i clienti di Doofinder che utilizzano template personalizzati devono informare il team di Supporto Doofinder che desiderano integrare con Connectif, così da aggiungere una classe necessaria che non è inclusa di default nei template personalizzati.

  

Tempo di implementazione: 30 min.
Difficoltà: Intermedio
Quando utilizzarlo?:
Per raccogliere i dati da Doofinder e inserire contenuti inline da Connectif.

 

Perché implementare l'estensione

1. Casi d'uso che puoi creare dopo questa integrazione

Ecco alcune idee che possono esserti utili per implementare diverse strategie dopo aver attivato l'estensione Doofinder nel tuo negozio Connectif.

Nel layer di Doofinder:

Nell'eCommerce:

  • Includere un raccomandatore nella Home basato sul marchio e sugli intervalli di prezzo indicati dal contatto in Doofinder.

Nei canali di comunicazione:

  • Inviare un'email con prodotti personalizzati in base alle ricerche effettuate dai contatti in Doofinder, includendo marchio e prezzi, nel caso in cui non abbiano compiuto ulteriori azioni.

 

2. Quali dati puoi portare da Doofinder a Connectif?

Con questa estensione, Connectif riceverà da Doofinder le seguenti informazioni:

  • Il momento in cui un contatto esegue una ricerca in Doofinder.
  • Il marchio e, se utilizzato, la limitazione di prezzo minimo e massimo, filtrata dal contatto durante la ricerca.

3. Quali dati di Connectif puoi utilizzare in Doofinder?

Allo stesso modo, in Doofinder potrai sfruttare tutte le informazioni raccolte nella scheda del contatto, così come la sua attività in tempo reale, per personalizzare il layer di Doofinder con i dati del contatto di Connectif.

 

Prima di iniziare: requisiti preliminari

Per integrare il tuo account Connectif con Doofinder, avrai bisogno di:

  • Uno script per raccogliere i dati di Doofinder (fornito come base in questo articolo).
  • Google Tag Manager implementato nello store, per poter raccogliere lo script con i dati inviati da Doofinder.

A seconda del CMS, lo script può essere implementato direttamente nel codice dell'eCommerce, ma farlo tramite Google Tag Manager è l'opzione più semplice.

 

PASSO 1: Creazione dell'integrazione personalizzata in Connectif

1. Accedi a Configurazione del negozio nel menu laterale a sinistra.

2. Nel selettore delle schede, vai a "Integrazioni > Integrazioni personalizzate (webhooks)" e fai clic su   Crea nuova integrazione.

Integrazione con WhatsApp - 0-min.png

3. Imposta il campo "Nome dell'integrazione" per identificare l'integrazione.

4. (Opzionale) Personalizza il colore, aggiungi una descrizione o categorizza l'integrazione.

Integrazione con Doofinder - 1-min.png

5. Fai clic su  Aggiorna.

 

PASSO 2: Creazione degli eventi di ricezione 

2.1. Creazione dell'evento di ricezione di apertura

(In questa sezione si spiega come creare e configurare l'evento che riceverà l'apertura di Doofinder).

6. Nella scheda Ricevere dati, fai clic su  Crea nuovo evento di ricezione.

Integrazione con Doofinder - 2-min.png

7. Assegna un nome e l'alias "doofinder-open-layer". Fai clic su  Salva.

 

Devi assegnare questo alias affinché corrisponda a quello dello Script di Connectif. Se assegni un altro alias, dovrai modificarlo nello script del Passo 3.

Integrazione con Doofinder - 3-min.png

8. Nella schermata di conferma, fai clic su  Torna all'elenco degli eventi.

 

2.2. Creazione dell'evento di ricezione delle informazioni su marchio e prezzo

(In questa sezione si spiega come creare l'evento che riceverà le informazioni su Marchio, "Prezzo Da" e "Prezzo Fino" e configurare i campi in cui verranno memorizzati tali dati).

9. Nella scheda Ricevere dati, fai clic su  Crea nuovo evento di ricezione.

10. Assegna un nome e l'alias "doofinder-brand-price".

Devi assegnare questo alias affinché corrisponda a quello dello Script di Connectif. Se assegni un altro alias, dovrai modificarlo nello script del Passo 3. Inoltre, tieni presente che il prezzo verrà raccolto solo se il contatto interagisce con il cursore dei prezzi di Doofinder.

Integrazione con Doofinder - 5-min.png

11. Fai clic su   Aggiungi un nuovo campo per creare ciascun campo personalizzato e completa le informazioni:

  • Crea un campo con il nome "Brand" e l'ID "brand" di tipo Testo per raccogliere il marchio.
  • Crea un campo con il nome "Price From" e l'ID "priceFrom" di tipo Decimale per raccogliere il limite di prezzo minimo.
  • Crea un campo con il nome "Price Up" e l'ID "priceUpTo" di tipo Decimale per raccogliere il limite di prezzo massimo.
 

Puoi utilizzare altri nomi per i tuoi campi se lo desideri, ma dovrai utilizzare questi ID affinché lo script funzioni. 

Integrazione con Doofinder - 6 (4)-min.png

12. Fai clic su  Salva.

13. Nella schermata di conferma, fai clic su  Torna all'elenco degli eventi.

 

PASSO 3: Integrazione in Google Tag Manager per attivare l'evento di Doofinder

14. Copia il seguente Script:

  

Se non hai utilizzato gli alias proposti in questo articolo per gli eventi di ricezione del Passo 2, dovrai rinominarli nello script affinché coincidano con i tuoi.

<script>

(function () {

  var connectifElementId = "connectif-doofinder-banner";

  var selectorToInjectConnectifElement = ".dfd-ext";

  var tempQuery = null;

  var tempFirstBrand = null;

  var tempPriceFrom = null;

  var tempPriceUpTo = null;

  var brandAndPriceEventAlias = "doofinder-brand-price";

  var openDoofinderEventAlias = "doofinder-open-layer";

  function sendConnectifEventsWhenReady(events) {

    if (

      window.connectif &&

      window.connectif.managed &&

      window.connectif.managed.isInitialized()

    ) {

      window.connectif.managed.sendEvents(events);

    } else {

      document.addEventListener(

        "connectif.managed.initialized",

        function onConnectifInitialized() {

          window.connectif.managed.sendEvents(events);

        },

        { once: true }

      );

    }

  }

  function debounce(func, timeout) {

    var timer;

    return function (data) {

      if (timer) {

        clearTimeout(timer);

      }

      timer = setTimeout(function () {

        func(data);

      }, timeout);

    };

  }

  window.document.addEventListener(

    "doofinder.layer.search",

    debounce(function onDooFinderSearch(event) {

      var data = event.detail;

      // ignora la navigazione tra le pagine

      if (data.page > 1) {

        return;

      }

      var query = data.query;

      var filter = data.filter;

      var firstBrand =

        (filter &&

          filter.terms &&

          filter.terms.brand &&

          filter.terms.brand[0]) ||

        null;

      var priceFrom =

        (filter &&

          filter.range &&

          filter.range.price &&

          filter.range.price.gte) ||

        null;

      var priceUpTo =

        (filter &&

          filter.range &&

          filter.range.price.lte) ||

        null;

      var queryHasChanged = query !== tempQuery;

      var brandHasChanged = firstBrand !== tempFirstBrand;

      var priceRangeHasChanged =

        priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;

      if (!queryHasChanged && !brandHasChanged && !priceRangeHasChanged) {

        return;

      }

15. Accedi al tuo account di Google Tag Manager dove inserirai lo script.

16. Vai su Tag  e fai clic su Nuovo.

Integrazione con Doofinder - 8-min.png

17. Assegna un nome. 

18. Fai clic su Configurazione del tag e seleziona il tipo HTML Personalizzato. 

Integrazione con Doofinder - 9-min.png

19. Nel blocco HTML incolla lo script del punto 14. 

Integrazione con Doofinder - 10-min.png

20. Fai clic su Attivatore  e seleziona Tutte le pagine.

  

Con questa configurazione, lo script verrà attivato su tutte le pagine dell'eCommerce in cui è implementato Google Tag Manager. 

Integrazione con Doofinder - 11-min.png

21. Fai clic su Salva.

 

Con questo passaggio, ogni volta che un contatto effettuerà una ricerca su Doofinder, l'evento attiverà un'azione in Connectif. Inoltre, verrà inclusa l'etichetta div con l'ID "connectif-doofinder-banner" all'interno del layer di Doofinder, per poter inserire contenuti inline da Connectif.

 

PASSO 4: Archiviazione delle informazioni nella scheda contatto di Connectif

4.1. Creazione dei campi di contatto

(In questa sezione si spiega come creare i campi personalizzati affinché i dati raccolti da Connectif possano essere archiviati nella scheda contatto).

22. Accedi a Connectif e vai, dal menu laterale sinistro, a "Contatti > Campi del contatto"

23. Fai clic su   Aggiungi nuovo campo personalizzato per creare ciascun campo personalizzato e completare le informazioni:

  • Crea un campo con il nome "Doofinder Brand" di tipo Testo per raccogliere il marchio.
  • Crea un campo con il nome "Doofinder Price From" di tipo Numero Decimale per raccogliere il limite di prezzo minimo.
  • Crea un campo con il nome "Doofinder Price Up" di tipo Numero Decimale per raccogliere il limite di prezzo massimo.

Integrazione con Doofinder - 12-min.png

 

4.2. Creazione del workflow per aggiornare i campi

(In questa sezione si spiega come archiviare i dati inviati da Doofinder in Connectif tramite un workflow).

24. Accedi al menu laterale sinistro e vai alla sezione Workflows.

25. Fai clic su  Crea nuovo workflow e seleziona  Crea workflow vuoto.

Integrazione con Doofinder - 13-min.png

26. Collega al nodo "Inizio" il nodo di tipo Trigger che hai creato per ricevere il marchio e il prezzo da Doofinder.

Integrazione con Doofinder - 14-min.png

27. Collega al nodo di tipo Trigger il nodo "Imposta campo".

Integrazione con Doofinder - 15-min.png

28. Fai clic su  (Modifica configurazione del nodo) del nodo "Imposta campo".

29. Trascina i campi che hai appena creato, con origine dati Contatto, dalla colonna di sinistra al blocco centrale, in modo che corrispondano ai campi omonimi della colonna destra.

Integrazione con Doofinder - 16.png

30. Fai clic su  Aggiorna per salvare la configurazione del nodo e salva il tuo workflow.

 

 

Successo!
L'integrazione del tuo account Connectif con Doofinder è pronta.

 


Continua a imparare!

Per sfruttare tutto il potenziale del tuo account Connectif, ti consigliamo di continuare con i seguenti articoli: