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
- Come tracciare i click al link di contatto WhatsApp in…
- Tag Manager Italia è Platinum Certified Partner ufficiale di…
- [Caso Studio] Con una strategia di Digital Analytics e il…
- Alternativa a Google Optimize: usa Google Tag Manager per…
- Caso studio: Decathlon Italia aumenta il tasso di…
- Come tracciare la visualizzazione di una sezione specifica…
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!
- Seconda edizione del GA4 Summit: oltre 500 partecipanti per due giorni di formazione e confronti sul presente e futuro dell’Analytics per il Marketing e l’Advertising
- Attribuzioni errate in GA4: cause e soluzioni al problema
- Come creare una Dashboard Ecommerce per analizzare i dati degli acquisti Nuovi e di Ritorno
- Caso studio: Greenpeace ottimizza la User Experience, il tasso di conversione e il ROI del suo sito web, landing page e campagne advertising grazie al Server-Side tracking e alla Consent Mode
- Consent Mode v2 e calo dei dati delle audience e del traffico in Google Ads: cause e soluzioni
- Matteo Zambon su Guida Base: come tracciare i click al link Phone (telefono) in GA4 con Google Tag Manager
- Matteo Zambon su Come gestire la Consent Mode v2 con Iubenda e Google Tag Manager
- Matteo Zambon su Come installare Google Analytics 4 (GA4) con Google Tag Manager
- Matteo Zambon su Glossario: Google Tag Assistant
- Matteo Zambon su Guida Avanzata: come configurare Conversion API di Facebook con l’integrazione nativa per Google Tag Manager