Lug 2018

Guida Avanzata: Come Gestire Attributi, Eventi e Impostazioni Widget di Customerly

Ok, sappiamo già cos’è Customerly e nella precedente guida ti ho spiegato come installare il suo widget con Google Tag Manager.

Ma in realtà la vera chicca di questo bellissimo strumento sta in tutte le altre funzionalità che si possono configurare e manipolare.

Vediamo un po’ quali sono le macro aree che andremo a gestire:

parametri del widget e dell’utente (customerlySettings)
attributi con cui aumentare i dettagli del nostro utente (attribute)
eventi per identificare meglio le azioni dei nostri utenti (event)

E come gestiamo tutto questo?

Semplice, che te lo dico a fa’ 😀 con Google Tag Manager!

Iniziamo con i parametri del customerlySettings.

Identifichiamo i parametri customerlySettings

Customerly ha diversi parametri, alcuni che identificano il funzionamento del widget, altri che gestiscono i parametri dell’utente.

I primi parametri che analizziamo sono relativi al colore, alla posizione, ai messaggi di default che il widget gestisce e così via. Sono davvero facilmente configurabili 🙂

Eccoli nel dettaglio

// Force hiding the widget
widget_visible: false,
// Set the widget color
widget_color: ‘FFFFFF’,
// Set the widget position
widget_position: ‘left’,
// Shows the widget when the user has conversations
show_with_conversation: true,
// Hide the screenshot button
screenshot_available: false,
// Hide the attachments button
attachments_available: false,
// Hide the widget on mobile only when true
widget_hide_mobile: true

Nella pratica bisognerà inserirli nello script:

<script> 
window.customerlySettings = { 
widget_visible: false, 
widget_color: 'FFFFFF', 
widget_position: 'left', 
show_with_conversation: true, 
screenshot_available: false, 
attachments_available: false, 
widget_hide_mobile: true 
} 
</script>

Ora vediamo invece i parametri che coinvolgono l’utente. Possiamo passare dei dettagli come il nome e l’email in modo da precompilare già la chat (ad esempio se l’utente è già loggato), oppure potremmo associare l’azienda dove lavora o lo User ID del nostro CRM.

<script>window.customerlySettings = { 
user_id: "REPLACE WITH YOUR USER ID", // Optional 
name: "REPLACE WITH USER NAME", 
email: "REPLACE WITH USER EMAIL", 
company: {
 company_id: "REPLACE WITH COMPANY ID",
 name: "REPLACE WITH COMPANY NAME",
    // Add comapnies's custom attributes as you prefer
 license_expire_at: 1643410800, 
 company_size: 12 
 }
}
</script>

Immagina che tu voglia nascondere la chat, oppure farla aprire a seconda di alcune azioni che l’utente fa nella tua pagina. Ecco, queste azioni le possiamo gestire con i parametri del widget.

customerly(‘show’); // This will show the widget
customerly(‘hide’); // This will hide the widget
customerly(‘stop’); // This will stop every action with Customerly
customerly(‘open’); // This will force the open the conversation window of the widget
customerly(‘close’); // This will force the close of the conversation window of the widget

Queste chiamate non hanno bisogno di essere incluse dentro a customerlySettings, quindi basterà uno script simile a questo:

<script>
customerly('open');
</script>

Gestiamo gli attributi (attribute)

Gli attributi sono tutte quelle informazioni aggiuntive che vuoi assegnare all’utente. I nomi degli attributi ovviamente li decidi tu, quindi un consiglio: butta giù un elenco così da non perderti 😉

La gestione degli attributi può essere fatta in due modi:

Quando il widget viene creato (e quindi hai già queste informazioni fin da subito)
Dopo che il widget è stato caricato (e quindi le informazioni le hai dopo 🙂 )

Vediamo come fare con il primo caso, ovvero la gestione degli attributi nell’inizializzazione del widget:

attributes: {
nome_attributo_1: “valore_attributo_1 “,
nome_attributo_2: “valore_attributo_2”,
nome_attributo_3: “valore_attributo_3”
},

Alla fine il codice da inserire sarà:

<script>
window.customerlySettings = {
app_id: "XXXXX",

attributes: {

    nome_attributo_1: "valore_attributo_1 ",
    nome_attributo_2: "valore_attributo_2",
    nome_attributo_3: "valore_attributo_3"
    }
}
</script>

Il secondo caso invece è dopo l’inizializzazione del widget (esempio l’utente fa qualche azione):

customerly(“attribute”, “nome_attributo“, “valore_attributo” );

Che a livello di codice sarà:

<script>
customerly("attribute", "nome_attributo", "valore_attributo" ); 
</script>

Gestiamo gli eventi (event)

Gli eventi invece sono le azioni che gli utenti fanno all’interno del sito. Quindi sei sempre tu a decidere i nomi degli eventi e a cosa corrispondono. Anche in questo caso il consiglio è di buttare giù un elenco così da non perderti 😉

La gestione è molto simile agli attributi post inizializzazione.

Che a livello di codice sarà:

<script>
customerly("event", "nome evento" ); 
</script>

Bene, ora che abbiamo visto le casistiche vediamo come applicarle con Google Tag Manager.

STEP 1 – Creiamo il Tag HTML personalizzato con i parametri customerlySettings

Iniziamo con il configurare i parametri dedicati a quando creiamo il widget di Customerly, ricordandoci sempre che i casi cambiano a seconda delle esigenze. In questo esempio imposterò dei parametri del widget e alcuni attributi dell’utente. Ovviamente dobbiamo recuperare lo snippet iniziale (lo puoi fare seguendo la guida base di come installare Customerly).

Nota: le variabili che trovi in rosso {{nome variabile}} rappresentano delle variabili già create in Google Tag Manager e ognuna corrisponderà al valore che vogliamo passare a Customerly. Starà a te capire dove prendere il dato e passarlo con un push al dataLayer.
Se fai caso ho creato anche una Variabile di tipo costante che contiene l’ID di Customerly.

<script>
window.customerlySettings = {
   app_id: "{{Customerly ID}}", 
   user_id: "{{User ID}}", 
   name: "{{Nome}}", 
   email: "{{Email}}", 
   company: {
      company_id: "{{Azienda ID}}",
      name: "{{Azienda Nome}}",
      license_expire_at: 1643410800, 
      company_size: 12 
   },
   attributes: {
      sesso: "{{Sesso}}",
      eta: "{{Eta}}",
      data_iscrizione: "{{Data iscrizione}}"
   }
};
!function(){function e(){var e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://widget.customerly.io/widget/{{Customerly ID}}";var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(e,r)}var r=window,t=document,n=function(){n.c(arguments)};r.customerly_queue=[],n.c=function(e){r.customerly_queue.push(e)},r.customerly=n,r.attachEvent?r.attachEvent("onload",e):r.addEventListener("load",e,!1)}();
</script>

Vai all’interno del contenitore di Google Tag Manager.
Sezione Tag > Nuovo > HTML personalizzato.
Incolla il codice di esempio riportato sopra
Su impostazioni avanzate seleziona: opzioni di attivazione tag: Una volta per pagina
Aggiungi l’Attivatore: All Pages.
Nomina il Tag: “Customerly”.
Salva.

Step 2 – Verifica i valori di customerlySettings

Non ci resta che vedere dall’anteprima di debug di Google Tag Manager se il Tag viene attivato e verificarne i parametri.

Se il Tag è attivato allora possiamo verificare se i dati vengono effettivamente passati e gestiti dal widget di Customerly.

Per farlo ti basterà:

Apri la console degli sviluppatori di Chrome (tasto destro Ispeziona)
Seleziona la voce “console“
Digita “customerlySettings” ed esplodi i parametri cliccandoci sopra

Bene, ce l’abbiamo fatta 😀

A questo punto dovresti vedere dentro l’utente di Customerly i parametri degli attributi che abbiamo inserito 😉

Oh, aspetta… vuoi una maggiore personalizzazione?

Se desideri personalizzare anche il widget (colore, posizione, nasconderlo da mobile ecc) magari in modo dinamico a seconda di cosa sta facendo l’utente, della sorgente di provenienza (ad esempio se viene da un annuncio di advertising, da Facebook e così via) beh sappi che è possibile 😀

Ti basterà aggiungere al Tag di prima i parametri (riportati qui sotto in blu) che gestiscono questa impostazione 😉

<script>
window.customerlySettings = {
   widget_visible: false, 
   widget_color: 'FFFFFF', 
   widget_position: 'left', 
   show_with_conversation: true, 
   screenshot_available: false, 
   attachments_available: false, 
   widget_hide_mobile: true,    
   app_id: "{{Customerly ID}}", 
   user_id: "{{User ID}}", 
   name: "{{Nome}}", 
   email: "{{Email}}", 
   company: {
      company_id: "{{Azienda ID}}",
      name: "{{Azienda Nome}}",
      license_expire_at: 1643410800, 
      company_size: 12 
   },
   attributes: {
      sesso: "{{Sesso}}",
      eta: "{{Eta}}",
      data_iscrizione: "{{Data iscrizione}}"
   }
};
!function(){function e(){var e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://widget.customerly.io/widget/{{Customerly ID}}";var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(e,r)}var r=window,t=document,n=function(){n.c(arguments)};r.customerly_queue=[],n.c=function(e){r.customerly_queue.push(e)},r.customerly=n,r.attachEvent?r.attachEvent("onload",e):r.addEventListener("load",e,!1)}();
</script>

Aprire la Chat se l’utente fa un’azione

Immagina che la persona che sta navigando il tuo sito sia in un punto abbastanza importante, come ad esempio la compilazione di un form.

Bene, ora il tuo utente non è esattamente convinto o non riesce a compilare il form in modo esatto (e tu lo sai perché tu saggiamente monitori gli errori del form).
A questo punto potresti far aprire la chat chiedendogli se ha bisogno di aiuto!

Uhhhh, figo come si fa?

Ora te lo spiego 😉

Step 1 – Crea l’attivatore per l’apertura della chat

La prima cosa che devi fare è assolutamente capire quale attivatore fa al caso tuo (click, evento personalizzato, elemento di visibilità ecc). Nel mio caso mi collegherò all’avviso di errore del form di checkout come da immagine qui sotto.

Identificarlo sarà semplice grazie al selettore CSS. Infatti il codice HTML del messaggio è:

<ul class="woocommerce-error" role="alert">
<li><strong>Fatturazione Nome</strong> è un campo obbligatorio.</li>
<li><strong>Fatturazione Cognome</strong> è un campo obbligatorio.</li>
<li><strong>Fatturazione Via e numero</strong> è un campo obbligatorio.</li>
<li><strong>Fatturazione Città</strong> è un campo obbligatorio.</li>
<li><strong>Fatturazione C.A.P.</strong> è un campo obbligatorio.</li>
<li><strong>Fatturazione Telefono</strong> è un campo obbligatorio.</li>
<li><strong>Fatturazione Indirizzo email</strong> è un campo obbligatorio.</li>
</ul>

Non ci resta che creare l’attivatore di tipo visibilità di elemento. Facciamolo!

Entra nella sezione Attivatori.
Clicca su: Nuovo.
Selezione l’Attivatore: Visibilità di un elemento.
Metodo di selezione: Selettore CSS
Selettore di elemento: .woocommerce-error (questo è il mio caso)
Quando attivare questo attivatore: Ogni volta che un elemento appare sullo schermo
Rileva modifiche nel DOM: attivo
Titolo Tag: “Errore Form”
Salva

STEP 2 – Creiamo il Tag HTML per aprire la Chat di Customerly

Ora che abbiamo l’attivatore ci basta agganciarlo al Tag HTML personalizzato che non farà altro che dire al widget di Customerly di aprire la chat.

Lo script che dovrai inserire sarà:

<script>
customerly('open'); 
</script>

Vai all’interno del contenitore di Google Tag Manager.
Sezione Tag > Nuovo > HTML personalizzato.
Incolla il codice di esempio riportato sopra
Su impostazioni avanzate seleziona: sequenza tag: “Attiva un Tag prima” e seleziona il Tag HTML personalizzato Customerly che abbiamo creato prima.
Aggiungi l’Attivatore: Errore Form.
Nomina il Tag: “Customerly Open Chat”.
Salva.

Step 3 – Verifichiamo il funzionamento

Non ci resta che verificare attivando sempre il nostro debug di anteprima visualizzazione e rieseguire la stessa operazione di errore.

Bingooooooo!

Se vedrai l’evento di visualizzazione a sinistra, il tag attivarsi e a chat aprirsi significa che tutto funziona!

Se volessi tracciare su Customerly che questo utente ha avuto difficoltà?

Mettiamo il caso che mi sia utile salvare questa azione anche su Customerly (e perché no, anche su Google Analytics), come potrei fare?

Fammi pensare… beh prima abbiamo parlato di attributi ed eventi 😀

Potresti quindi usare un evento oppure un attributo, a seconda di come vuoi gestirti il dato. La cosa super figa è che con Customerly puoi segmentare sia per attributi sia per eventi.

Ma nel dettaglio che faccio?

Eh, ora ti mostro entrambe le casistiche 😉

Creare un attributo legato all’utente in Customerly

Ipotizziamo che tu voglia identificare un particolare dato come attributo, ad esempio che l’utente abbia avuto difficoltà nel checkout. Utilizzeremo lo stesso attivatore di visibilità di prima 😉

Nota: Se viene utilizzato lo stesso attributo su Customerly ci sarà l’ultimo valore salvato perché sovrascriverà il precedente.

Lo script che dovrai inserire sarà:

<script>
customerly("attribute", "warning", "Form checkout"); 
</script>

Vai all’interno del contenitore di Google Tag Manager.
Sezione Tag > Nuovo > HTML personalizzato.
Incolla il codice di esempio riportato sopra
Su impostazioni avanzate seleziona: sequenza tag: “Attiva un Tag prima” e seleziona il Tag HTML personalizzato Customerly che abbiamo creato prima.
Aggiungi l’Attivatore: Errore Form.
Nomina il Tag: “Customerly Attributo Errore”.
Salva.

Verifichiamo se tutto funziona con il debug e anteprima:

Ok, e su Customerly? Semplice, ci basta beccare esattamente lo stesso utente e andare nella sezione “info” 😉

Creare un evento legato all’utente in Customerly

Con la stessa logica dell’attributo potremmo invece voler gestire gli eventi, anche qui più facile a dirsi che a farsi.

Lo script che dovrai inserire sarà:

<script>
customerly("event", "Form checkout"); 
</script>

Vai all’interno del contenitore di Google Tag Manager.
Sezione Tag > Nuovo > HTML personalizzato.
Incolla il codice di esempio riportato sopra
Su impostazioni avanzate seleziona: sequenza tag: “Attiva un Tag prima” e seleziona il Tag HTML personalizzato Customerly che abbiamo creato prima.
Aggiungi l’Attivatore: Errore Form.
Nomina il Tag: “Customerly Evento Errore”.
Salva.

Verifichiamo se si attiva e soprattutto cosa vediamo su Customerly 😉

A differenza degli attributi gli eventi vengono sommati, quindi se l’utente ha fatto più volte lo stesso evento verranno segnalati più “fired”.

Riusciamo ad ottimizzare?

Se hai notato sia l’evento, sia l’attributo, sia l’apertura della chat sono associati allo stesso attivatore. Ma possiamo ottimizzarne l’inserimento? La risposta è sì 🙂
Potremmo usare un unico Tag HTML personalizzato che contenga i diversi script di apertura ed evento:

Semplice no?

Bene, ora Customerly non ha (quasi) più segreti per te!
Non hai ancora un account su Customerly?

Grazie alla partnership con Customerly, posso regalarti ben 12 mesi a metà prezzo alla piattaforma con tutte le features sbloccate, ma solo se ti iscrivi dal link qui sotto. Ti svelo pure un piccolo segreto. Non esistono al momento tante promozioni attive e non ti sarà facile recuperarne un’altra.

Curioso? Iscriviti da questo link: https://www.customerly.io/