In dieser Anleitung erfahren Sie, wie Sie mit Google Analytics die Nutzung Ihrer Erweiterung erfassen. Wenn Sie eine Plattformanwendung entwickeln, lesen Sie Analytics für Anwendungen, da Anwendungen andere Einschränkungen als Erweiterungen haben.
Voraussetzungen
Für dieses Tutorial sollten Sie mit dem Schreiben von Erweiterungen für Google Chrome vertraut sein. Informationen zum Schreiben einer Erweiterung finden Sie unter Erste Schritte.
Außerdem muss ein Google Analytics-Konto eingerichtet sein, um Daten für die Erweiterung zu erfassen. Beim Einrichten des Kontos können Sie einen beliebigen Wert im Feld „Website-URL“ verwenden, da Ihre Erweiterung keine eigene URL hat.
Installieren des Tracking-Codes
Mit dem standardmäßigen Tracking-Code-Snippet von Google Analytics wird eine Datei mit dem Namen ga.js von einer SSL-geschützten URL abgerufen, wenn die aktuelle Seite mit dem https://-Protokoll geladen wurde. Chrome-Erweiterungen und -Anwendungen dürfen nur die SSL-geschützte Version von ga.js verwenden. Das Laden von ga.js über unsicheres HTTP ist gemäß der standardmäßigen Content Security Policy von Chrome nicht zulässig. Dies und die Tatsache, dass Chrome-Erweiterungen nach dem Schema chrome-extension:// gehostet werden, erfordert eine kleine Änderung am üblichen Tracking-Snippet, um ga.js direkt aus https://ssl.google-analytics.com/ga.js statt vom Standardspeicherort abzurufen.
Im Folgenden finden Sie ein modifiziertes Snippet für die asynchrone Tracking-API (die geänderte Zeile ist fett formatiert):
(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);
})();
Außerdem müssen Sie dafür sorgen, dass Ihre Erweiterung Zugriff zum Laden der Ressource hat, indem Sie die standardmäßige Content Security Policy lockern. Die Richtliniendefinition in Ihrer manifest.json könnte so aussehen:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
Hier sehen Sie eine Pop-up-Seite (popup.html), die den asynchronen Tracking-Code über eine externe JavaScript-Datei (popup.js) lädt und einen einzelnen Seitenaufruf erfasst:
<!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);
})();
Der String UA-XXXXXXXX-X muss durch die Nummer Ihres Google Analytics-Kontos ersetzt werden.
Seitenaufrufe erfassen
Mit dem Code „_gaq.push(['_trackPageview']);“ wird ein einzelner Seitenaufruf erfasst. Dieser Code kann auf jeder
Seite der Erweiterung verwendet werden. Wenn es auf einer Hintergrundseite platziert wird, wird einmal pro Browsersitzung eine Ansicht registriert. In einem Pop-up wird jedes Mal eine Ansicht registriert, wenn das Pop-up-Fenster geöffnet wird.
Die Seitenaufrufdaten für jede Seite in Ihrer Erweiterung geben Aufschluss darüber, wie oft Nutzer pro Browsersitzung mit der Erweiterung interagieren:
Analyseanfragen überwachen
Damit Tracking-Daten von der Erweiterung an Google Analytics gesendet werden, können Sie sich die Seiten der Erweiterung im Fenster der Entwicklertools ansehen. Weitere Informationen finden Sie in der Anleitung zur Fehlerbehebung. Wie die folgende Abbildung zeigt, sollten Anfragen für eine Datei mit dem Namen __utm.gif angezeigt werden, wenn alles korrekt eingerichtet ist.
Tracking von Ereignissen
Wenn Sie das Ereignis-Tracking konfigurieren, können Sie ermitteln, mit welchen Teilen Ihrer Erweiterung die Nutzer am meisten interagieren. Wenn Sie beispielsweise drei Schaltflächen haben, auf die Nutzende klicken können:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
Schreiben Sie eine Funktion, die Klickereignisse an Google Analytics sendet:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
Und verwenden Sie es als Event-Handler für Klicks auf jede Schaltfläche:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
Auf der Übersichtsseite des Google Analytics-Ereignis-Trackings finden Sie Messwerte dazu, wie oft auf eine einzelne Schaltfläche geklickt wurde:
Mit diesem Ansatz können Sie feststellen, welche Teile einer Erweiterung zu wenig oder zu stark ausgelastet sind. Anhand dieser Informationen können Sie Entscheidungen bezüglich der Neugestaltung der Benutzeroberfläche oder der Implementierung zusätzlicher Funktionen treffen.
Weitere Informationen zur Verwendung des Ereignis-Trackings finden Sie in der Google Analytics-Entwicklerdokumentation.
Beispielcode
Eine Beispielerweiterung, die diese Techniken verwendet, ist im Beispiel-Repository verfügbar.