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!