Con l'occasione di mostrare gli accorgimenti necessari affinché sia possibile tracciare con Google Analytics un'estensione di Chrome, vedremo come sia semplice crearne una in modo da utilizzarne il modello come base di partenza per mettere a terra la vostra idea.
Poiché l'obiettivo è vedere arrivare su Google Analytics le interazioni effettuate dagli utenti sulla propria estensione, non mi dilungherò in troppi dettagli riportando direttamente di seguito i file con il loro contenuto:
1) Creare una cartella sul Desktop o in un percorso preferito sul proprio dispositivo. Questa cartella ospiterà tutti i file dell'estensione.
2) Creare un file manifest.json con il seguente contenuto:
{
"manifest_version": 2,
"name": "Chrome Extension Test Tracking",
"description": "This extension is used to test tracking in Google Analytics",
"version": "1.0",
"content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}In questo file la struttura è pressoché standard e la parte fondamentale è quella del parametro "content_security_policy" il cui valore ha la finalità di consentire chiamate verso i server di Google Analytics evitando errori di sicurezza.
3) Creare un file popup.html con il seguente contenuto:
<!doctype html>
<html>
<head>
<title>Test Tracking</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Test Tracking</h1>
<button id="sendEvent">Send an Event!</button>
</body>
</html>Questo rappresenta l'interfaccia grafica della nostra estensione che si aprirà al momento del click sulla relativa icona nella barra del browser.
A tal proposito, faccio notare che nel file manifest.js è stato definito un ulteriore file, icon.png. Questo sarà l'icona dell'estensione, pertanto è opportuno scegliere un'immagine (in rete cercando 'icone' se ne trovano tantissime di libero utilizzo), rinominarla come indicato ed inserirla nella cartella insieme agli altri file.
4) Creare un file popup.js con il seguente contenuto:
// Standard Google Universal Analytics code
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-XX', 'auto');
ga('set', 'checkProtocolTask', function(){}); // Disabilita il controllo del protocollo (http://stackoverflow.com/a/22152353/1958200)
ga('send', 'pageview', '/chrome-extension/popup.html');
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('sendEvent');
checkPageButton.addEventListener('click', function() {
ga('send', 'event', 'chrome_extension', 'button_clicked', 'test tracking', {page: '/chrome-extension/popup.html'});
}, false);
}, false);Questo file contiene la logica della nostra estensione, nel caso specifico consente di effettuare un'azione al click sul bottone definito nel file HTML dell'interfaccia.
È proprio in questo file che possiamo inserire il codice di tracciamento di Google Analytics. Nel caso specifico lo snippet utilizzato è quello di Universal Analytics, dove deve essere definita la Proprietà verso la quale inviare i dati. È possibile personalizzare il nome della pagina con quello che vogliamo associare alla visualizzazione di pagina raccolta nella piattaforma di analisi, al momento dell'apertura del popup, al click sull'icona dell'estensione.
Cliccando invece sul bottone all'interno del popup viene inviato un evento a Google Analytics. In questo caso è possibile modificarne la categoria, azione ed etichetta.
5) Non resta altro che caricare l'estensione nel browser. Per farlo accedere al seguente indirizzo nel browser Chrome:
chrome://extensions/Cliccare sul bottone "Carica estensione non pacchettizzata" e appena attivata diventerà visibile ed utilizzabile a fianco della barra degli indirizzi del browser.
Non rimane altro che verificarne il funzionamento ed il tracciamento.
Al click sull'icona si apre il popup e nel Rapporto in Tempo Reale di Google Analytics sarà possibile rilevare la visualizzazione di pagina con le informazioni di URL che abbiamo definito, Fig. 1:
Fig. 1 - Google Analytics - Visualizzazione di pagina dell'estensione di Chrome
Al click sul bottone all'interno del popup sembrerà non succedere apparentemente niente, questo perché non abbiamo associato alcuna azione tangibile lato utente (ad esempio avremmo potuto aggiungere una riga di codice per l'apertura di una finestra di alert informativa), tuttavia in Analytics potremo osservare che anche l'interazione di evento viene inviata e acquisita dal sistema di tracciamento, Fig. 2:
Fig. 1 - Google Analytics - Evento al click su un elemento dell'estensione di Chrome
Davvero più facile a farsi che a dirsi. In pochi minuti, non solo abbiamo creato un'estensione funzionante per il browser, bensì l'abbiamo anche dotata di tracciamento. Questo ci tornerà senz'altro utile per capire se e come gli utenti la utilizzano e di conseguenza poter apportare modifiche mirate se ci accorgiamo mancanze di usabilità o un uso non ottimale.
Dopotutto, "Ciò che non può essere misurato, non può essere migliorato". [Lord Kelvin]
Ciao Michele, innanzitutto complimenti per l'articolo.
Volevo chiederti, questa soluzione è utilizzabile anche con le nuove Global Properties di Google Analytics 4?
Non ho trovato nessun modo per poter disabilitare il checkProtocolTask. Leggo dalla doc di google https://support.google.com/analytics/answer/9964640?hl=en che i customTasks non sono ancora disponibili per GA4, pensi ci sia un modo per ottenere lo stesso risultato diversamente?
Grazie e buon lavoro
Ciao Enzo,
grazie dei complimenti :)
In questo momento GA4 è ancora acerbo sotto diversi punti di vista, le varie features stanno uscendo ogni settimana. Anche il protocollo di misurazione è ancora in alfa.
Il mio consiglio ad oggi è quello di creare ancora una Proprietà Universal laddove le condizioni di tracciamento siano particolari e, quando possibile, utilizzare la nuova Proprietà GA4 in parallelo in modo da intervenire gradualmente in risposta ai nuovi aggiornamenti.