ga.js ist eine JavaScript-Bibliothek, mit der Sie messen können, wie Nutzer mit Ihrer Website interagieren. Dies ist eine alte Bibliothek. Wenn Sie Google Analytics erst seit Kurzem nutzen, sollten Sie die neueste Tracking-Bibliothek, analytics.js, verwenden.
Tracking-Code – Kurzanleitung
Das Analytics-Snippet ist ein kleines JavaScript-Code-Snippet, das Sie auf Ihren Seiten einfügen. Es aktiviert das Google Analytics-Tracking, indem ga.js
in die Seite eingefügt wird. Wenn Sie diesen Code auf Ihren Seiten verwenden möchten, kopieren Sie das Code-Snippet unten und ersetzen Sie dabei UA-XXXXX-X
durch Ihre Web-Property-ID.
Fügen Sie dieses Snippet auf der Seite Ihrer Websitevorlage vor dem schließenden </head>
-Tag ein.
Wenn Sie mehr als das grundlegende Seiten-Tracking ausführen müssen, finden Sie in der Tracking-Referenz eine Liste der in der API verfügbaren Methoden und im Nutzungsleitfaden finden Sie Details zur Verwendung der asynchronen Syntax. Eine detaillierte Anleitung zum Einrichten des Trackings finden Sie im Hilfeartikel Tracking einrichten.
<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
Das obige Snippet stellt die Mindestkonfiguration dar, die für das asynchrone Tracking einer Seite erforderlich ist. Dabei wird _setAccount
verwendet, um die Web-Property-ID der Seite festzulegen. Anschließend wird _trackPageview
aufgerufen, um die Tracking-Daten zurück an die Google Analytics-Server zu senden.
Wichtig:Wenn Sie Ihre Seiten vom herkömmlichen Snippet auf die neueste asynchrone Version aktualisieren, sollten Sie zuerst das vorhandene Tracking-Snippet entfernen. Wir raten davon ab, beide Snippets auf derselben Seite zu verwenden. Eine Migrationsanleitung finden Sie unter Zu Async migrieren.
Funktionsweise der asynchronen Syntax
Das _gaq
-Objekt macht die asynchrone Syntax möglich.
Sie fungiert als Warteschlange. Dies ist eine First-In-First-Out-Datenstruktur, die API-Aufrufe erfasst,bis ga.js
sie ausführen kann. Verwenden Sie die Methode _gaq.push
, um der Warteschlange etwas hinzuzufügen.
Um einen API-Aufruf in die Warteschlange zu verschieben, müssen Sie ihn von der herkömmlichen JavaScript-Syntax in ein Befehlsarray konvertieren. Befehlsarrays sind einfache JavaScript-Arrays, die einem bestimmten Format entsprechen. Das erste Element in einem Befehlsarray ist der Name der Tracker-Objektmethode, die Sie aufrufen möchten. Er muss ein String sein. Die restlichen Elemente sind die Argumente, die Sie an die Methode „Tracker-Objekt“ übergeben möchten. Dabei kann es sich um beliebige JavaScript-Werte handeln.
Mit dem folgenden Code wird _trackPageview()
mithilfe der herkömmlichen Syntax aufgerufen:
var pageTracker = _gat._getTracker('UA-XXXXX-X'); pageTracker._trackPageview();
Der entsprechende Code in der asynchronen Syntax erfordert zwei Aufrufe von _gaq.push
.
_gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']);
In der asynchronen Syntax wird das Erstellen des Tracker-Objekts impliziert, es muss aber trotzdem die Web-Property-ID für den Tracker festgelegt werden. Dafür wurde die Methode _setAccount
hinzugefügt. Alle anderen Tracker-Objektmethoden sind sowohl beim asynchronen als auch beim herkömmlichen Tracking identisch. Nur die Syntax ist unterschiedlich.
Weitere Informationen zur asynchronen Syntax finden Sie in der Tracking-Referenz für die Methode _gaq.push
.
Tracking mit HTML-Event-Handlern
Die Syntax des asynchronen Trackings sollte auch innerhalb von DOM-Ereignis-Handlern verwendet werden. Die folgende Schaltfläche generiert beispielsweise ein Ereignis, wenn darauf geklickt wird.
<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>
Auch wenn auf diese Schaltfläche geklickt wird, bevor ga.js
im Browser geladen wurde, wird das Ereignis erfasst und schließlich ausgeführt. Bei Verwendung des herkömmlichen Trackings kann der Browser in dieser Situation eine Ausnahme ausgeben.
Funktionen in die Warteschlange stellen
Zusätzlich zu Befehlsarrays können Sie auch Funktionsobjekte in die _gaq
-Warteschlange verschieben. Die Funktionen können beliebiges JavaScript und wie Befehlsarrays enthalten. Sie werden in der Reihenfolge ausgeführt, in der sie auf _gaq
übertragen werden. Diese Technik ist nützlich, um die Tracking APIs aufzurufen, die Werte zurückgeben. Mit dem folgenden Code wird beispielsweise eine Verknüpfungs-URL erstellt und die Eigenschaft href
für einen Link mit dem Ergebnis festgelegt.
_gaq.push(function() { var pageTracker = _gat._getTracker('UA-XXXXX-X'); var link = document.getElementById('my-link-id'); link.href = pageTracker._getLinkerUrl('http://example.com/'); });
Im Beispiel oben wird _gat
verwendet, um ein Tracker-Objekt zu erstellen. Da es jedoch einer lokalen Variablen zugewiesen ist, kann es von Code außerhalb der Funktion nicht verwendet werden. Dies ist zwar zulässig, Sie können jedoch mit der Methode _gat._createTracker
ein dauerhaftes, global zugängliches Objekt erstellen.
Der folgende Code zeigt, wie dies funktionieren würde.
_gaq.push(function() { var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker'); var link = document.getElementById('my-link-id'); link.href = pageTracker._getLinkerUrl('http://example.com/'); }); _gaq.push(['myTracker._trackPageview']);
Im obigen Beispiel wird ein asynchroner Tracker innerhalb der Funktion erstellt und später mit dem Namen im Befehlsarray darauf verwiesen.
Der gegenteilige Anwendungsfall ist ebenfalls möglich. Wenn Sie beispielsweise ein asynchrones Tracker-Objekt verwenden müssen, das über ein zuvor übertragenes Befehlsarray erstellt wurde, nutzen Sie die Methode _gat._getTrackerByName
. Der folgende Code veranschaulicht die Funktionsweise.
_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']); _gaq.push(function() { var pageTracker = _gat._getTrackerByName('myTracker'); var link = document.getElementById('my-link-id'); link.href = pageTracker._getLinkerUrl('http://example.com/'); });
One Push, mehrere Befehle
Anstatt für jeden Aufruf _gaq.push(...)
einzugeben, können Sie alle Befehle auf einmal übertragen. Der folgende Code veranschaulicht diese Technik.
_gaq.push( ['_setAccount', 'UA-XXXXX-X'], ['_setDomainName', 'example.com'], ['_setCustomVar', 1, 'Section', 'Life & Style', 3], ['_trackPageview'] );
Dies funktioniert, da die Methode _gaq.push
die Methode Array.push
imitiert, mit der mehrere Elemente mit einem einzigen Aufruf per Push übertragen werden können.
Snippet aufteilen
Wenn du das Analytics-Snippet lieber unten auf der Seite platzieren möchtest, musst du nicht das gesamte Snippet unten auf der Seite platzieren.
Sie können dennoch die meisten Vorteile des asynchronen Ladens nutzen, indem Sie das Snippet in zwei Hälften aufteilen. Die erste Hälfte sollte oben auf der Seite bleiben und den Rest nach unten. Da der erste Teil des Tracking-Snippets wenig oder gar keine Auswirkungen auf das Rendering der Seite hat, können Sie diesen Teil oben belassen und den Teil des Snippets, mit dem ga.js
eingefügt wird, unten platzieren.
Eine Seite, auf der das asynchrone Snippet in zwei Hälften aufgeteilt ist, könnte wie folgt aussehen:
<html> <head> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); </script> </head> <body> <p>Page Content</p> <script src="some_random_script.js"></script> <p>Page Content</p> <script type="text/javascript"> (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> </body> </html>
Beide Codeteile müssen in eigene Skript-Tags umschlossen werden, aber nur die letzten sechs Zeilen des ursprünglichen asynchronen Snippets müssen nach unten verschoben werden. Alle Zeilen, die Methoden auf _gaq
übertragen, können oben bleiben.
Häufige Fallstricke vermeiden
Beachten Sie bei Verwendung der asynchronen oder herkömmlichen Syntax Folgendes:
- Bei Methodennamen wird zwischen Groß- und Kleinschreibung unterschieden.
Wenn Sie einen Methodennamen ohne korrekte Groß- und Kleinschreibung verwenden, funktionieren Ihre Methodenaufrufe nicht. Beispiele:_gaq.push(['_trackpageview']); // bad _gaq.push(['_trackPageview']); // good
- Verwenden Sie die richtigen Methodennamen.
Wenn das Tracking nicht richtig funktioniert, prüfen Sie, ob Sie den richtigen Namen für die Methode verwenden. Beispiele:_gaq.push(['_setDomain', 'example.com']); // bad _gaq.push(['_setDomainName', 'example.com']); // good
- Nur Strings sollten in Anführungszeichen übergeben werden. Alle anderen Typen dürfen nicht in Anführungszeichen gesetzt werden.
Alle Werte, die kein String sind, z. B. boolesche Werte, Objektliterale, Funktionen oder Arrays, sollten ohne Anführungszeichen übergeben werden. Verwenden Sie nur Anführungszeichen, wenn Sie etwas übergeben, das als String interpretiert werden soll. Wenn Sie von der herkömmlichen Syntax migrieren, sollten alle Funktionsparameter, die ohne Anführungszeichen übergeben wurden, in der asynchronen Syntax nicht in Anführungszeichen gesetzt werden. Beispiele:_gaq.push(['_setAllowLinker', 'false']); // bad _gaq.push(['_setAllowLinker', false]); // good
- Strings dürfen keine Leerzeichen am Anfang oder Ende enthalten.
Beispiele:_gaq.push(['_setAccount', ' UA-65432-1']); // bad _gaq.push(['_setAccount', 'UA-65432-1']); // good
Tracking deaktivieren
In einigen Fällen kann es erforderlich sein, den Google Analytics-Tracking-Code auf einer Seite zu deaktivieren, ohne das Code-Snippet entfernen zu müssen. Das ist beispielsweise dann der Fall, wenn die Datenschutzerklärung Ihrer Website die Möglichkeit einschließt, dass Besucher das Google Analytics-Tracking deaktivieren können.
Das Tracking-Snippet ga.js
enthält jetzt eine Fenster-Property. Wenn sie auf true
gesetzt ist, werden durch das Tracking-Snippet keine Daten an Google Analytics gesendet.
Wenn Google Analytics versucht, ein Cookie zu setzen oder Daten an die Google Analytics-Server zu senden, wird geprüft, ob diese Property auf true
gesetzt ist. Ist dies der Fall, hat sie denselben Effekt, als ob der Besucher das
Google Analytics-Browser-Plug-in zur Deaktivierung von Google Analytics installiert hätte.
Um das Tracking zu deaktivieren, setzen Sie die folgende Fenstereigenschaft auf "true":
window['ga-disable-UA-XXXXXX-Y'] = true;
Der Wert UA-XXXXXX-Y
entspricht dabei der Web-Property-ID, für die Sie das Tracking deaktivieren möchten.
Diese Fenstereigenschaft muss festgelegt werden, bevor der Tracking-Code aufgerufen wird. Diese Property muss auf jeder Seite festgelegt werden, auf der das Google Analytics-Tracking deaktiviert werden soll. Ist die Property nicht festgelegt oder auf „false“ gesetzt, funktioniert das Tracking wie gewohnt.
Wenn Ihr Google Analytics-Tracking-Code auf einer Seite beispielsweise Folgendes enthält:
_gaq.push['_setAccount', 'UA-123456-1']
Wenn Sie nicht möchten, dass dieser Tracking-Code Cookies setzt oder Daten an Google Analytics zurücksendet, verwenden Sie den folgenden Code, bevor der Tracking-Code aufgerufen wird:
window['ga-disable-UA-123456-1'] = true;
Wenn Sie auf einer Seite mehrere Tracker mit mehreren Web-Property-IDs verwenden, müssen Sie die entsprechende window['ga-disable-UA-XXXXXX-Y']
-Variable für jede Web-Property auf true
setzen, um das Google Analytics-Tracking auf dieser Seite vollständig zu deaktivieren.
Beispiel
Hier ist ein einfaches Beispiel für Code, mit dem du deinen Nutzern eine Deaktivierungsfunktion zur Verfügung stellen kannst.
Fügen Sie Ihrer Website zunächst einen neuen HTML-Link hinzu, um die Deaktivierungslogik auszuführen:
<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>
Fügen Sie dann das folgende Code-Snippet vor dem Code-Snippet "ga.js" ein. Achte darauf, den Wert gaProperty
von UA-XXXX-Y
durch die auf deiner Website verwendete Property zu ersetzen.
Dies ist der gleiche Wert, den Sie an den Befehl _setAccount
übergeben.
<script> // Set to the same value as the web property used on the site var gaProperty = 'UA-XXXX-Y'; // Disable tracking if the opt-out cookie exists. var disableStr = 'ga-disable-' + gaProperty; if (document.cookie.indexOf(disableStr + '=true') > -1) { window[disableStr] = true; } // Opt-out function function gaOptout() { document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'; window[disableStr] = true; } </script>
Wenn ein Nutzer auf den HTML-Link zum Deaktivieren klickt, wird die benutzerdefinierte Funktion gaOptout
ausgeführt. Damit wird für später ein Cookie ein Cookie gesetzt und die Datenerhebung über analytics.js wird deaktiviert.
Kehrt ein Nutzer zu dieser Website zurück, prüft das obige Skript, ob das Deaktivierungs-Cookie gesetzt wurde. Ist dies der Fall, wird auch die Datenerhebung bei analytics.js deaktiviert.
SSL (HTTPS) erzwingen
Soll Google Analytics Daten auch von unsicheren Seiten (HTTP) immer über SSL senden, verwenden Sie die Methode
_gat._forceSSL
wie in diesem Beispiel:
_gaq.push(['_setAccount', 'UA-12345-1']); _gaq.push(['_gat._forceSSL']); // Send all hits using SSL, even from insecure (HTTP) pages. _gaq.push(['_trackPageview']);