Come tracciare l’evento Copia con Google Tag Manager

Potrebbe essere interessante sapere quali frasi o parole dei contenuti del tuo sito selezionano e copiano gli utenti. Sì, hai capito bene, oggi ti spiegherò come implementare il tracciamento dell’evento “Copia”, con Google Tag Manager ovviamente.

Step 1 – Crea il tag

Per prima cosa crea un nuovo Tag:

• Tag > Nuovo > Configurazione tag.
• Tipo di tag: HTML Personalizzato.
• Incolla questo codice:

<script>
// Declare function to get selected text from document

function getSelectionText() {

var text = "";

if (window.getSelection) { 
text = window.getSelection().toString();
 } 
else if (document.selection && document.selection.type != "Control") { 
text = document.selection.createRange().text; 
} 
return text; } 
// Declare function on copy event 
document.addEventListener('copy', function(e){ dataLayer.push({ 'event': 'textCopied', 'clipboardText': getSelectionText(), 'clipboardLength': getSelectionText().length }); });
</script>

Questa stringa di codice permette di rilevare che un testo è stato copiato e di trasferire questa informazione al Data Layer.

• Attivazione: All Pages / Visualizzazione di pagina.
• Salva quindi il tag, prima puoi nominarlo “HTML Personalizzato – Copia – Tutte le pagine”.
  

Verifica ora il corretto funzionamento del Tag attivando la modalità Visualizzazione in anteprima.

Vai nel tuo sito: dovresti già vedere il Tag appena creato fra i Tags Fired On This Page.
Se poi provi a selezionare e copiare un testo, nella colonna sinistra nel box in basso, dovresti vedere comparire l’evento “textCopied”.

Clicca su questa voce e quindi nella scheda Data Layer della stessa. Vedrai nuovamente il nome dell’evento, il testo copiato e il numero di caratteri del testo copiato.

Ora, dovrai trasferire queste informazioni a Google Analytics. Per farlo crea una nuova variabile.

Step 2 – Crea la variabile

• La variabile deve essere di tipo: Variabile di livello dati. 
• Nel campo Nome variabile livello dati imposta clipboardText.
• Nominala allo stesso modo: “clipboardText” e salvala.
  

Aggiornando la Visualizzazione in anteprima e riprovando allo stesso modo di prima a copiare un testo dal tuo sito, vedrai ora una nuova variabile nella scheda Variabili dell’evento “textCopied”, che sarà proprio la nuova variabile “clipboardText” appena creata che vogliamo trasferire a Google Analytics.

Creare allo stesso modo la variabile “clipboardLenght”. Quest’ ultima ci aiuta rilevando quanti caratteri sono stati copiati dalla pagina.

Step 3 – Crea l’attivatore

• Scegli il tipo di Attivatore: Evento personalizzato.
• Nome evento: “textCopied”.
• Imposta lo stesso nome per l’Attivatore: “textCopied”.

Step 4 – Crea un secondo tag

Crea quindi un nuovo tag.

• Tipo di tag: Universal Analytics.
• Tipo di monitoraggio: Evento.
• Categoria: Copia.
• Azione: {{clipboardText}}
• Etichetta: {{Page Path}}
• Adesso seleziona la Variabile delle impostazioni di Google Analytics in Impostazioni di Google Analytics, se l’hai creata, oppure abilita l’override e seleziona la costante {{gaID}} (che dovresti avere se hai seguito la mia guida su come creare una costante per l’ID di monitoraggio di GA). In alternativa inserisci semplicemente il tuo codice UA-XXXXXX-X.
• Attiva su: seleziona il nuovo attivatore creato: “textCopied”.
• Nomina il Tag “GA – Event – Copia testo” e salvalo.

Per verificare che il tutto sia stato implementato nella maniera corretta accedi al tuo account di Google Analytics, nella scheda Tempo reale > Eventi. Prova a copiare un testo dal tuo sito, dovresti visualizzare l’hit evento in tempo reale da Analytics!

Note: ecco il link della guida dove ho recuperato lo script: http://dcarlbom.com/google-tag-manager/event-tracking-gtm-when-visitor-copies-text-from-page/

Ci sei riuscito? Molto bene! Inizia a tracciare chi copia i contenuti dal tuo sito 😀

Se dovessi avere qualche problema con l’implementazione di questo evento, non esitare a scrivere un commento qui sotto…mi farebbe piacere aiutarti!

Ora tocca a te… buon Tag!