Questo tutorial illustra l'utilizzo di Google Analytics per monitorare l'utilizzo dell'estensione. Se stai sviluppando un'app della piattaforma, consulta Analytics per le app poiché le app hanno limitazioni diverse dalle estensioni.
Requisiti
Questo tutorial prevede che tu abbia un po' di familiarità nella scrittura di estensioni per Google Chrome. Se hai bisogno di informazioni su come scrivere un'estensione, leggi il tutorial introduttivo.
Per monitorare l'estensione, devi anche avere un account Google Analytics configurato. Tieni presente che durante la configurazione dell'account puoi utilizzare qualsiasi valore nel campo URL del sito web, in quanto l'estensione non avrà un URL proprio.
Installazione del codice di monitoraggio
Lo snippet di codice di monitoraggio standard di Google Analytics recupera un file denominato ga.js da un URL protetto
SSL se la pagina corrente è stata caricata utilizzando il protocollo https://. Le estensioni e le applicazioni di Chrome possono utilizzare solo la versione protetta da SSL di ga.js. Il caricamento di ga.js su HTTP non sicuro non è consentito dai Criteri di sicurezza del contenuto predefiniti di Chrome. Questo, oltre al fatto che le estensioni di Chrome sono ospitate nello schema chrome-extension://, richiede una leggera modifica al solito snippet di monitoraggio per estrarre ga.js direttamente da https://ssl.google-analytics.com/ga.js anziché dalla posizione predefinita.
Di seguito è riportato uno snippet modificato per l'API di monitoraggio asincrono (la riga modificata è in grassetto):
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Dovrai inoltre assicurarti che l'estensione abbia l'accesso per caricare la risorsa allentando il criterio di sicurezza dei contenuti predefinito. La definizione dei criteri in manifest.json potrebbe avere il seguente aspetto:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
Di seguito è riportata una pagina popup (popup.html) che carica il codice di monitoraggio asincrono tramite un file JavaScript esterno (popup.js) e monitora una singola visualizzazione di pagina:
<!DOCTYPE html>
<html>
<head>
...
<script src="popup.js"></script>
</head>
<body>
...
</body>
</html>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Tieni presente che la stringa UA-XXXXXXXX-X deve essere sostituita con il numero del tuo account Google Analytics.
Monitoraggio delle visualizzazioni di pagina
Il codice _gaq.push(['_trackPageview']); monitora una singola visualizzazione di pagina. Puoi utilizzare questo codice in
qualsiasi pagina dell'estensione. Quando posizionato su una pagina in background, registra una visualizzazione una volta per sessione del browser. Se posizionato in un popup, registra una visualizzazione a ogni apertura del popup.
Osservando i dati sulle visualizzazioni di pagina per ogni pagina della tua estensione, puoi avere un'idea di quante volte gli utenti interagiscono con l'estensione per ogni sessione del browser:
Monitoraggio delle richieste di analisi
Per assicurarti che i dati di monitoraggio della tua estensione vengano inviati a Google Analytics, puoi controllare le pagine dell'estensione nella finestra Strumenti per sviluppatori (per ulteriori informazioni, consulta il tutorial sul debug). Come mostra la figura che segue, se tutto è configurato correttamente dovresti vedere le richieste per un file denominato __utm.gif.
Eventi di monitoraggio
Configurando il monitoraggio eventi, puoi determinare con quali parti dell'estensione gli utenti interagiscono maggiormente. Ad esempio, se hai tre pulsanti, gli utenti possono fare clic:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
Scrivi una funzione che invii eventi di clic a Google Analytics:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
Usalo come gestore di eventi per il clic di ogni pulsante:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
La pagina Panoramica del monitoraggio eventi di Google Analytics fornisce metriche relative al numero di clic effettuati su ogni singolo pulsante:
Grazie a questo approccio, puoi vedere quali parti dell'estensione sono sottoutilizzate o sovrautilizzate. Queste informazioni possono aiutarti a prendere decisioni sulla riprogettazione dell'interfaccia utente o su funzionalità aggiuntive da implementare.
Per ulteriori informazioni sull'utilizzo del monitoraggio eventi, consulta la documentazione per gli sviluppatori di Google Analytics.
Codice campione
Un'estensione di esempio che utilizza queste tecniche è disponibile nel repository degli esempi.