Set 2019
Guida Avanzata: Come far apparire Customerly dopo il Pageview o in un evento personalizzato
Con questa guida sto per svelarti la mia personale implementazione di Customerly con Google Tag Manager.
Ho già scritto diverse guide relative a Customerly, ma solo grazie a questa implementazione sono riuscito a installare il plugin di Customerly dopo il Pageview.
Lo script fornito da Customerly, infatti, funziona con successo SOLO al caricamento di pagina. In altre parole non c’è modo per far caricare la Chat in un particolare evento che sia diverso dal caricamento della pagina, come potrebbe essere il click di un pulsante o l’accettazione dei cookie.
Quindi non ci sarebbe altro modo di far partire la Chat di Customerly se non al caricamento della pagina?
Sì, esattamente. O così o ciccia.
N.B. Quello che intendo è far partire l’installazione di Customerly e non semplicemente nascondere la chat una volta che è caricata. Questa casistica, in realtà, è molta diffusa sui diversi strumenti online che non prevedono la possibilità di installarsi in un momento diverso dal caricamento di pagina (Pageview) 😕.
Sì, lo so è una cosa davvero poco bella.
Se sei nuovo da queste parti e non sai ancora di cosa si occupa Customerly, ti consiglio di leggere il Glossario su Customerly e la mia guida per installarlo con Google Tag Manager.
Perché mi servirebbe far partire Customerly in un determinato tempo o azione da parte dell’utente?
Bè tutto nasce da una mia esigenza ben specifica, infatti questo tipo di implementazione mi è servita per far convivere Customerly con Cookiebot (ma puoi applicarla anche con qualsiasi altro strumento per la privacy compliance).
La mia situazione iniziale
Ti spiego il disagio dell’utente quando per la prima volta entrava nel mio sito. La prima cosa che veniva chiesta all’utente era il banner dei cookie, ma la cosa davvero pessima è che assieme appariva pure la chat di Customerly. Bleah una vera bad user experience.
La soluzione
La soluzione che avevo già escogitato — ossia di utilizzare un Attivatore al momento del consenso — purtroppo non funzionava: Customerly si attivava solamente dal successivo caricamento di pagina.
E quindi?
Quindi ho creato il #Barbatrucco 🙂 Il concetto è quello di installare il plugin di Customerly dopo che l’utente ha accettato il banner di Cookiebot.
Ma ovviamente questo #barbatrucco potrebbe essere utilizzato ad un Attivatore di tipo Timer oppure al click su un pulsante.
Ecco svelato come fare.
STEP 1 – Crea l’attivatore
In questo esempio utilizzerò un Attivatore al click di un pulsante presente in pagina.
- Attivatori > Nuovo
- Tipo di attivatore: Click – Tutti gli elementi.
- Attiva su: Alcuni click.
- Inserisci: Click Classes è uguale a open-chat.
- Salva l’Attivatore nominandolo “Click – Btn Open Chat“
STEP 2 – Modifica il tag esistente
Modifica il Tag che avevi in precedenza (se non avevi già installato lo script di Customerly, segui la guida base su come installare Customerly), cambia l’Attivatore sostituendolo con quello nuovo che hai creato.
Adesso sostituisci lo script che avevi con questo:
<script> window.customerlySettings = { app_id: "{{Customerly ID}}", }; !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, e() }(); </script>
Ora il Tag è simile a questo:
STEP 3 – Verifica prima di pubblicare
Con l’aiuto della console di Google Tag Manager verifica che la configurazione sia corretta.
Caricando il sito non vedrai il plugin caricarsi.
Successivamente, clicca il pulsante e verifica la corretta attivazione.
Adesso dovresti vedere comparire il plugin.
Sei riuscito? È andato tutto liscio?
Fammi sapere nei commenti qui sotto!
Altre Guide che potrebbero interessarti
- How to install Customerly with Google Tag Manager
- Guida Base: Come Installare Customerly con Google Tag…
- Guida Base: Come Installare Tawk.to con Google Tag Manager
- Guida Base: Installare Zopim Live Chat con Google Tag…
- Guida Base: come tracciare in GA4 il Plugin Contact Form 7…
- Guida Base: attivare i link di attribuzione avanzata
Chiedi pure qui sotto, sarò pronto a risponderti!
Unisciti alla più grande community italiana dedicata alla Digital Analytics!
Iscrivendoti alla newsletter gratuita di Tag Manager Italia riceverai:
- guide (base/avanzate) passo passo
- news di approfondimento
- webinar gratuiti
- offerte esclusive
e altre risorse di 1°classe sul mondo della Digital Analytics!
- Come gestire la Consent Mode v2 con Iubenda e Google Tag Manager
- ANALYTIX TALK: il Podcast di Marketing e Digital Analytics
- Tutto sulla Consent Mode e come gestire la Consent Mode v2: guida completa
- Come migrare gli eventi da Google Universal Analytics (GA3) a Google Analytics 4 (GA4)
- [Caso Studio] Con una strategia di Digital Analytics e il Server-Side tracking NetFerry ha ottimizzato il tasso di conversione e le azioni di marketing del proprio Ecommerce
- Matteo Zambon su Guida Base: tracciare l’Invio di Form Contatti in GA4 (Google Analytics 4) con Google Tag Manager
- Matteo Zambon su Come configurare il Cross Domain tracking (tracciamento interdominio) in Google Analytics 4
- Matteo Zambon su Guida Avanzata: come configurare Conversion API di Facebook con l’integrazione nativa per Google Tag Manager
- Matteo Zambon su Guida Base: Gestire la Cookie Law di Iubenda con Google Tag Manager
- Luca su Guida Base: Gestire la Cookie Law di Iubenda con Google Tag Manager