.

Dienstag, Dezember 01, 2009

Asynchrones Tracking mit Google Analytics

Bei einer Seite mit sehr vielen JavaScript Aufrufen (bspw. viele Events oder virtuelle PageViews) wird der Google Analytics Tracking Code nicht am Ende der Seite vor dem schließenden Body Tag eingebunden, sondern vorher.

Der Hintergrund ist, dass der Code zunächst initialisiert werden muss, damit die dazugehörigen Events und virtuellen PageViews auch entsprechend zugeordnet werden können.

Dies hat den Nachteil, dass bei sehr vielen Aufrufen die Ladezeit der Seite verlangsamt werden kann was nicht besonders schön für die User ist.

Also was tun? Weniger Trakken? Nein!

Denn ab sofort steht allen Google Analytics Nutzern das asynchrone Tracking zur Verfügung.

Was heißt asynchrones Tracking?


google analytics asynchrones tracking
Bislang wurden die Daten übermittelt sobald der Code auf der Seite geladen wurde, bzw. wennimmer bspw. ein Event ausgelöst wurde. Daher habe ich auch immer empfohlen den Code idealerweise möglichst weit unten auf der Seite einzubauen, damit zunächst der Content der Seite geladen wird, eher der Tracking Code ausgeführt wird.

Das Surferlebnis der User geht vor der Erhebung irgendwelcher Web Analyse Daten!

Das asynchrone Tracking läuft etwas anders ab. Hier werden die Daten quasi zunächst gesammelt und dann später, wenn die Seite komplett geladen ist gesammelt als "Paket" an Google übermittelt.

Dies hat einen großen Vorteil für die User der Webiste - keine unnötigen Ladezeiten wegen des Aufrufs eines Web Analyse Pixels.

google analytics
[Dass Google asynchrones Tracking anbietet unterstreicht einmal mehr, dass Ladezeiten ein wichtiges Indiz für die Beurteilung von Websites sind!]

Was muss ich tun?

Zunächst einmal gar nichts! Denn der Wechsel ist absolut freiwillig und der alte Code funktioniert wie gehabt weiter - keine Sorge als!

Um das asynchrone Tracking anzuwenden bedarf es einer Änderung des bisherigen Tracking Codes.

Der bisherige Standard Tracking Code sieht folgendermaßen aus:


web analytics inside - google analytics tracking code

Der Code für das asynchrone Tracking so:


google analytics asynchrones tracking

Auf den ersten Blick ist die Reihenfolge des oberen mit dem unteren Teil vertauscht. Wichtig ist nun aber die der Aufruf

_gaq.push([.....

Zunächst muss also die bisherige UA-Nummer definiert werden:

  _gaq.push(['_setAccount', 'UA-XXXXX-X']);

Diese bleibt natürlich identisch mit Ihrer Account-Nummer.

Verwenden Sie den Standard Tracking Code ohne weitere Anpassungen muss nun der eigentliche bisherige Aufruf angepasst werden:

  _gaq.push(['_trackPageview']);


Achtung für Google Analytics Nutzer die immer noch den urchin.js statt den ga.js nutzen - asynchrones Tracking wird nicht (!) von dem urchin.js Code unterstützt. Sollten Sie also bisher noch nicht gewechselt haben wäre es jetzt vielleicht an der Zeit darüber nachzudenken...

Die Platzierung des neuen asynchronen Codes muss nun nicht mehr vor dem schließenden Body Tag sein, sondern vor dem schließenden Head-Tag - also sehr weit oben auf der Seite.

Weiter oben heißt akkuratere Daten!

Sollten Sie einen individualisierten Code nutzen (vielleicht waren oder sind Sie Kunde von Trakken und haben eine individuelle Implementierung auf Ihrer Seite) so sollten sämtliche individuellen Anpassungen entsprechend des asynchronen Trackings abgeändert werden.

Der neue asynchrone Tracking Code bietet auch verschiedene Varianten des Einbaus. So kann ich wie im obigen Beispiel jede Zeile einzeln mit einen _gaq.push versehen oder aber auch verschiedene Felder in einem _gaq.push kombinieren, bspw. folgendermaßen:

_gaq.push(
['_setAccount', 'UA-XXXXX-X'],
['_trackPageview']
);


Der Vollständigkeit halber hier eine kurze Auflistung verschiedener Individualisierungsmöglichkeiten. Über einige davon habe ich in der Vergangenheit bereits hier geposted, alle Individualisierungen wurden in meinem Buch (Google Analytics - Implementieren.Interpretieren.Profitieren) ausführlich dargestellt

Daher befindet sich hinter der Rubrik die Seitenzahl aus meinem Buch mit dem korrespondierenden Artikel und/oder ein Link zu dem entsprechenden Blog Post.


Mehrere Konten/Profile (S. 81 f. - Kapitel 6.11)

_gaq.push(['_setAccount', 'UA-XXXXX-1']);
_gaq
.push(['_trackPageview']);
_gaq
.push(['b._setAccount', 'UA-XXXXX-2']);
_gaq
.push(['b._trackPageview']);



ClientInfo, Hash, Flash, Title (S. 92 ff. - Kapitel 6.19)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_setClientInfo', false]);
_gaq
.push(['_setAllowHash', false]);
_gaq
.push(['_setDetectFlash', false]);
_gaq
.push(['_setDetectTitle', false]);
_gaq
.push(['_trackPageview']);



Event Tracking (S. 94 ff. - Kapitel 6.20)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_trackPageview']);
...
<a onclick="_gaq.push(['_trackEvent', 'name', value]);">click me<\a>



Linker (Seite 68 ff. - Kapitel 6.4)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_setDomainName', 'none']);
_gaq
.push(['_setAllowLinker', true]);
_gaq
.push(['_trackPageview']);
...
<a href='http://example.com/test.html'
onclick
='_gaq.push(['_link', 'http://example.com/test.html'); return false;'>click me



Linker mit Formular (Seite 68 ff. - Kapitel 6.4)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_setDomainName', 'none']);
_gaq
.push(['_setAllowLinker', true]);
_gaq
.push(['_trackPageview']);
...
<form name='f' method='post' onsubmit='_gaq.push(['_linkByPost', this]);'>
...
form>



E-Commerce (S. 76 ff. - Kapitel 6.9)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_trackPageview']);
_gaq
.push(['_addTrans',
'1234', // order ID - required
'Mountain View', // affiliation or store name
'11.99', // total - required
'1.29', // tax
'5', // shipping
'San Jose', // city
'California', // state or province
'USA' // country
]);
_gaq
.push(['_addItem',
'1234', // order ID - required
'DD44', // SKU/code
'T-Shirt', // product name
'Green Medium', // category or variation
'11.99', // unit price - required
'1' // quantity - required
);
_gaq
.push(['_trackTrans']);



Kampagnen-Umbenennung (S. 85 f. - Kapitel 6.15)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_setCampNameKey', 'ga_campaign']); // name
_gaq
.push(['_setCampMediumKey', 'ga_medium']); // medium
_gaq
.push(['_setCampSourceKey', 'ga_source']); // source
_gaq
.push(['_setCampTermKey', 'ga_term']); // term/keyword
_gaq
.push(['_setCampContentKey', 'ga_content']); // content
_gaq
.push(['_setCampIdKey', 'ga_id']); // id number
_gaq
.push(['_setCampNOKey', 'ga_nooverride']); // don't override
_gaq
.push(['_trackPageview']);



Suchmaschinen (S. 70 ff. - Kapitel 6.5, S. 83 f. - Kapitel 6.13)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_addIgnoredOrganic', 'ignore']);
_gaq
.push(['_addIgnoredRef', 'urchin.com']);
_gaq
.push(['_addOrganic', 'new_search_engine', 'q']);
_gaq
.push(['_trackPageview']);



Cookie-Pfad (S. 84 - Kapitel 6.14)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_setCookiePath', '/path/of/cookie/']);
_gaq
.push(['_trackPageview']);



Cookie Timeout (S. 75 f. - Kapitel 6.8)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_setCookieTimeout', '31536000']);
_gaq
.push(['_trackPageview']);



Session Timeout (S. 74 f. - Kapitel 6.7)

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq
.push(['_setSessionTimeout', '3600']);
_gaq
.push(['_trackPageview']);



Zugegeben - vielleicht etwas schwere Kost. Dennoch hoffentlich interessant für den ein oder anderen Leser. Feedback? Dann schnell einen Kommentar schreiben....!

34 Kommentare:

  1. Hallo Timo,

    den Post finde ich - wie eigentlich fast alle deine Beiträge - sehr informativ. Allerdings ist für mich der Spagat zwischen "News" und "To Use" zu groß geraten.

    Das mag zum Teil an der tasächlich etwas schwereren weil technischeren Kost liegen, andererseits aber an den mehr als gewohnt eingeflochtenen Hinweisen auf Trakken und dein Buch. Ich kann das verstehen, aber irgendwie kann ich mit der Mischung "fachliches Timo-Aden-Know-How" und werbliche Zurückhaltung besser leben.

    Ich würde mir eine Einordnung zu Beginn wünschen à la "Dieser Post ist vor allem relevant für Seiten mit sehr vielen JavaScript Aufrufen, die einzeln getrackt werden (sollen)".

    Viele Grüße
    Michael

    AntwortenLöschen
  2. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  3. Moin Timo,

    hierzu als Anmerkung: Google scheint sich auf das mit dem HTML 5-Standard eingeführte Attribut des Script-Tags "async" zu stützen. Das heisst zuerst mal, dass viele Browser es noch nicht unterstützen. Firefox zB wird es jetzt mit der neuen Version 3.6 lernen.
    Funktionieren wird das Tracking natürlich trotzdem aber asynchron ist es dann erstmal noch nicht.
    BTW: Wir haben im Verlag den Code immer direkt nach < body > eingebaut, um Zähldifferenzen zu vermeiden und möglichst 1:1 die IVW Werte widerzuspiegeln. Ich würde hier auch eher Deine Meinung vertreten die Ladezeiten höher gewichten als das Tracking. Prinzipiell könnte man doch auch einfach alles was irgendwie mit Tracking zu tun hat erst über window.onload triggern? ;-)

    Schöne Grüße,

    Tobi

    AntwortenLöschen
  4. Hi Timo, kannst du noch mal GENAU den Vorteil dieser Tracking-Variante erläutern? Ob ich die Daten erst sammle und dann am Schluss sende (asynch) oder am Schluss sammle und dann sende (sync vor dem /body) ändert weder die Verarbeitungszeit noch den Zeitpunkt, zu dem alles gesendet wird. Bricht der Nutzer vor dem onload-Ereignis ab, sind die Daten weg.

    Vielleicht habe ich es überlesen, aber was ist der Vorteil? Nur Performance (wo immer die her kommen soll) oder auch zusätzliche Informationen (z.B. Ladezeit einer Seite).

    AntwortenLöschen
  5. Wie schon oben erwähnt - sehr informativ und ja, es ist sehr technisch und das ist auch gut so.

    Kurze Frage - die Einbindung in den Head ist absolut zwingend? Funktioniert so dann nicht mehr wie bisher im Body?

    Danke für Dein Feedback.

    AntwortenLöschen
  6. Hallo!

    Sehr interessante Aufstellung - dafür vielen Dank. Einen Punkt vermisse ich: Wie muss ich die Zeile

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    anpassen, wenn ich die ga.js lokal speichere? Das ist ja letztlich eine Empfehlung von Google Pagespeed, um die Ladezeit zu drücken in dem man die Zahl der DNS-Abfragen senkt.

    Viele Grüße
    Sebastian

    AntwortenLöschen
  7. @Michael Friedrich: Vielen Dank für Dein Feedback. Die Erstellung Pflege dieses Blogs kostet eine Menge Zeit - ich denke, da kann man auch mal, und das ja wirklich selten, auf sein eigenes Buch und seine eigene Firma hinweisen. Insbesondere dann, wenn es thematisch passend ist. Und da ich davon ausgehe, dass viele meiner Blogleser auch das Buch zu Hause haben dachte ich, es wäre ein Mehrwert um direkt weitere Infos zu den entsprechenden Themen nachlesen zu können. Ich habe es daher nicht als Werbung, sondern als Mehrwert für die Leser gesehen.

    @Tobi: Ich habe nochmal bei Google Rücksprache gehalten - Asynchrones Tracking sollte auf allen Browsern funktionieren. Einzig bei Opera funktioniert es noch nicht komplett. HTML5 wird allerdings unterstützt.

    @Tom: Bei vielen Individualisierungen (bspw. Events, onClicks, etc.) ist es nicht möglich den Standard Tracking Code ganz am Ende einzubinden, da er bereits vorab initialisiert werden muss um die dann kommenden Ereignisse zu erfassen. Bei einfachen Implementierungen geht dies, bei individualisierten nicht. Da ist dann das asynchrone Tracking von Vorteil. Der Hauptnutzen ist bei "schweren" Seiten mit bspw. viel Javascript oder Ajax oder so erkennbar.

    @Wandtattoos: Nein, die Einbindung in den Head Bereich ist nicht zwingend. Letztendlich kannst Du ihn einbauen wo Du willst. Es wird allerdings empfohlen ihn möglichst weit oben einzubauen.

    @sbrinkmann: Naja, das hängt ja davon ab, wo Du dann das File speicherst. Da kann ich so keine exakte Antwort drauf geben. Wichtig ist bei lokaler Speicherung vor allem, dass das File regelmäßig upgedatet wird!

    AntwortenLöschen
  8. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  9. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  10. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  11. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  12. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  13. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  14. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  15. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  16. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  17. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  18. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  19. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  20. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  21. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  22. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  23. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  24. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  25. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  26. Weiß hier jemdand ob Goolge Analytics das Searchranking ändert, im Bezug auf Ladezeit, Aufenthaltsdauer usw.?

    AntwortenLöschen
  27. Wie kann ich google denn da sagen das die Ip verschleirt wird konnte für die Variante kein Beispiel finden :(

    AntwortenLöschen
  28. @king: ich aktualisiere in Kürze den Post über die IP Verschleierung, der war etwas unter Zeitdruck geschrieben. Sorry, ist asap fertig...

    AntwortenLöschen
  29. "der alte Code funktioniert wie gehabt weiter - keine Sorge als!" - Da fehlt noch ein "o". :-)

    AntwortenLöschen
  30. Ich nutze Google Analytics und die Webmastertools für meinen Blog. Ich habe das Problem das ich nicht mehr unter den angegebenen Suchanfragen gefunden werden. Woran liegt das?

    AntwortenLöschen
  31. Wie schon oben erwähnt - sehr informativ und ja, es ist sehr technisch und das ist auch gut so.

    ผลบอลสด ผลบอล ผลบอลวันนี้

    AntwortenLöschen
  32. Wie kann ich google denn da sagen das die Ip verschleirt wird konnte für die Variante kein Beispiel

    AntwortenLöschen
  33. Danke für die super Beschreibung!!! Hat mir sehr geholfen!

    AntwortenLöschen
  34. Price – The cost was in the best ballpark have the ability to|to have the ability to} make the business case for the management staff. Reliable – although we had our startup issues with this unit, help was good and we managed to right issues. We imagine the Leapfrog Bolt Pro is a very dependable machine for greatest way|the way in which} we use this tools. Availability, pricing, product configuration and specifications may differ in accordance with geographical location, local laws and practices. Today, you want a trusted associate who is aware of} {how to|the way to|tips on how to} apply it successfully to assist precision machining remedy your specific supply-chain challenges.

    AntwortenLöschen

 
Google