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

trigger google tag manager open chat customerly

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:

custom html customerly installation on click tag manager

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.

customerly not installed on pageview console tag manager

Successivamente, clicca il pulsante e verifica la corretta attivazione.

ckick button customerly console debug google tag manager

Adesso dovresti vedere comparire il plugin.

customerly installed after click console tag manager.png

Sei riuscito? È andato tutto liscio?

Fammi sapere nei commenti qui sotto!

Condividi anche tu Google Tag Manager!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.