smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Piwik: Asynchrones Tracking & Caching-Probleme

2. Mai 2012
Stephan
Piwik - Webanalyse

Die übliche Methode zum Tracken von Daten beim Einsatz von Piwik ist es, einen auf JavaScript basierenden Tracking-Code in die eigene Website einzufügen. Hierfür gibt es zum einen den standardmäßigen Tracking-Code, welcher z.B. auch bei der Installation von Piwik bereitgestellt wird, der für synchrones Tracking gedacht ist.

Daneben gibt es auch noch die asynchrone Variante, bei der die Piwik-Daten asychron verarbeitet werden. Das hat den Vorteil, dass die eigene Website beim Laden nicht auf Piwik warten muss und somit die Website (optimalerweise) schneller geladen wird bzw. der Besucher das Gefühl hat, dass die Website schneller lädt.

Der asynchrone Tracking-Code

Bei der synchronen Variante wird der dazugehörige Tracking-Code laut Piwik-Dokumentation vor dem schließenden </body> eingefügt.

Im Gegensatz dazu, soll der Tracking-Code für das asynchrone Tracking innerhalb des <head>-Bereichs eingefügt werden. Dabei sieht der asynchrone Tracking-Code wie folgt aus:

<!-- Piwik --> <script type="text/javascript">
var _paq = _paq || [];
(function(){ var u=(("https:" == document.location.protocol) ? "https://{$PIWIK_URL}/" : "http://{$PIWIK_URL}/");
_paq.push(['setSiteId', {$IDSITE}]);
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.defer=true; g.async=true; g.src=u+'piwik.js';
s.parentNode.insertBefore(g,s); })();
 </script>
<!-- End Piwik Code -->

Hier müssen wir jetzt grundsätzlich nur noch zwei Dinge anpassen. Zum einen muss der Platzhalter {$PIWIK_URL} mit der eigenen Piwik-URL ersetzt werden. Zum anderen muss die von Piwik bereitgestellte Website-ID für den Platzhalter {$IDSITE} eingefügt werden.

Die benötigte Website-ID findet ihr im Admin-Bereich eurer Piwik-Installation.

Problem beim Cachen und Komprimieren der „piwik.js“

Beim Einsatz des asynchronen Tracking-Codes hatte ich das Problem, dass das PageSpeed-Tool von Google mich darauf hinwies, dass die Datei piwik.js weder mittels Gzip komprimiert übertragen wird noch Angaben zum Browser-Caching vorhanden sind.

In dem folgenden Screenshot (PageSpeed-Wert bezieht sich auf die Startseite) ist das für meine lokale Testumgebung mal abgebildet:

Piwik - PageSpeed-Ergebnis ohne Caching & Komprimierung

Grundsätzlich habe ich jetzt zwei Wege gefunden, dieses Problem zu beheben.

Angemerkt sei, dass Piwik bei mir unter einer Subdomain erreichbar ist.

Lösung Nr.1

Die erste Möglichkeit ist es nun im Root-Verzeichnis, auf welches die Piwik-Subdomain verweist eine .htaccess-Datei mit den nötigen Caching-Angaben zu hinterlegen.

Mein Ergebnis war jedoch noch nicht vollends zufriedenstellend:

Piwik - PageSpeed-Ergebnis mit Caching & Komprimierung per htaccess

Lösung Nr.2

Auf die zweite Möglichkeit bin ich eher zufällig gestoßen, als ich im Piwik-Installationsverzeichnis im Unterverzeichnis js/ mir die README-Datei durchgelesen habe.

Ein kleiner Auszug daraus lautet:

Why Use "js/index.php"?

* js/index.php (or implicitly as "js/") can be used to serve up the minified
  piwik.js

  - it supports conditional-GET and Last-Modified, so piwik.js can be cached
    by the browser
  - it supports deflate/gzip compression if your web server (e.g., Apache
    without mod_deflate or mod_gzip), shrinking the data transfer to 8K

* js/index.php (or implicitly as "js/") can also act as a proxy to piwik.php

Also habe ich einfach im asynchronen Tracking-Code die genannten Änderungen (im Code sind die entsprechenden Zeilen hervorgehoben) vorgenommen:

<!-- Piwik --> <script type="text/javascript">
var _paq = _paq || [];
(function(){ var u=(("https:" == document.location.protocol) ? "https://{$PIWIK_URL}/" : "http://{$PIWIK_URL}/");
_paq.push(['setSiteId', {$IDSITE}]);
_paq.push(['setTrackerUrl', u+'js/']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.defer=true; g.async=true; g.src=u+'js/';
s.parentNode.insertBefore(g,s); })();
 </script>
<!-- End Piwik Code -->

Das PageSpeed-Ergebnis war bei dieser Variante im Vergleich zur ersten Variante wie folgt:

Piwik - PageSpeed-Ergebnis

Welche Variante ihr nutzt, ist denke ich generell egal, wobei ich mir nicht sicher bin, welche von beiden nun wirklich die bessere ist.

Bei der .htaccess-Variante beispielsweise wird die Website-Performance beim YSlow-Tool im Gegensatz zu PageSpeed besser bewertet als bei der zweiten Variante.

Fazit

Unabhängig von meinem Caching-Problem ziehe ich die asynchrone der synchronen Tracking-Variante vor, um bei Lade-Problemen von Piwik nicht den Ladevorgang meiner Website unnötig zu verlangsamen/blockieren.

Da ich gleich von Anfang an den asynchronen Tracking-Code verwendet habe, kann ich jedoch keine Aussage dazu treffen, ob sich die Performance wirklich spürbar im Vergleich zum synchronen Tracking verbessert hat.

Welche Erfahrungen habt ihr bzgl. Piwik und dem asynchronen Tracking? Hattet ihr auch Probleme bzgl. dem Caching des Tracking-Codes?

Hat dir der Artikel gefallen? Dann interessiert dich vielleicht auch:
Kategorien: Web-Analytics
Tags: Piwik, Web-Analytics
Kommentare  
10 Kommentare vorhanden
1 Christian schrieb am 15. Juli 2012 um 22:54 Uhr

Bis jetzt verwende ich noch die Sync-Variante, werde nun aber mal die Async einbauen und schauen ob damit die Seite schneller wird.

2 Stephan L. schrieb am 16. Juli 2012 um 09:40 Uhr

Hallo Christian,

wie im Artikel bereits erwähnt, weiß ich leider nicht, inwieweit die asynchrone im Vergleich zur synchronen Variante wirklich spürbare Auswirkungen auf die Performance der Seite hat.
Würde mich aber schon mal interessieren, ob nachdem du die Asynch-Variante bei dir eingebaut hast, deine Seite wirklich schneller lädt.

Grüße Stephan

3 saoes schrieb am 16. Juli 2012 um 11:49 Uhr

Ich bin erst gestern auf das asynchrone Laden von Piwik gestossen und habe es in meinen oben genannten Fotoblog eingebaut. Nun habe ich noch die hier vorgeschlagenen Änderungen integriert, leider ändert sich laut Google`s GPS nicht wirklich etwas an der Performance der Seite. Auch wenn dort jetzt der Komprimierungseintrag von Piwik wegfällt.

4 Christian schrieb am 21. Juli 2012 um 14:41 Uhr

Hallo Stephan,

ich hab das asynchrone Tracking vor kurzem eingebaut. Allerdings muss mir wohl ein Fehler unterlaufen sein, denn es wurden keine Zugriff mehr protokolliert.

Werde es aber die Tage noch mal versuchen.

Gruß
Christian

5 Stephan L. schrieb am 22. Juli 2012 um 12:22 Uhr

Hmm, also da hatte ich eigentlich keine Probleme mit. Bei mir wurden von Anfang an alle Besucher/Zugriffe korrekt erfasst.

Wie beschrieben musst du grundsätzlich nur den obigen Code bzw. direkt von der Piwik-Dokumentation kopieren, bei dir einfügen und die URL zu deiner Piwik-Installation als auch die Piwik-ID der jeweiligen Domain angeben.

Grüße Stephan

6 Brubaker schrieb am 11. August 2012 um 15:14 Uhr

Falls das jemand interessiert: bei diesen WordPress Plugin http://wordpress.org/extend/plugins/piwiktracking kann man ganz bequem umschalten. Das plugin ist auf meinen blog aktiv, steht auf asynchron und bis jetzt kann ich nicht klagen. Einen Vergleich habe ich nicht gemacht…

Gruss.

7 Stephan L. schrieb am 11. August 2012 um 16:09 Uhr

Hallo,

danke für deinen Hinweis! Ich werde mir das Plugin mal anschauen, aber grundsätzlich bevorzuge ich, da wo es nicht unbedingt nötig ist, den Einsatz von zusätzlichen Plugins zu vermeiden. Für all diejenigen, die sich nicht mit dem Theme und dem Code auseinandersetzen wollen und darin irgendwas per Hand ändern möchten, ist so ein Plugin aber natürlich sehr nützlich. 🙂

Grüße Stephan

8 Marco schrieb am 24. August 2012 um 12:09 Uhr

Vielen Dank für die Anleitung, ich habe den asynchronen Piwik-Tracking-Code in mein neustes Projekt eingebunden und werde den Code auch künftig verwenden.

Zwei Hinweise noch:

1. Da ich die Site-ID nicht sofort gefunden habe: Ihr findet sie in Piwik unter Settings –> Websites –> und dann vorne links vor der Website. Die Zahl dürfte eine niedrige einstellige Nummer sein, wahrscheinlich ist es die „1“. In die geschweifte Klammer kommt die Zahl dann ohne das Dollar-Zeichen: {1}

2. Für Nutzer, die JavaScript deaktiviert haben, sollte im Footer noch folgender Code stehen:

<noscript>
    <img src="http://domain.tld/piwik/piwik.php?idsite=YOUR_SITE_ID" alt="" />
</noscript>

(YOUR_SITE_ID = Deine Site-ID)

9 Stephan L. schrieb am 24. August 2012 um 13:16 Uhr

Hallo Marco,

danke dir für deine hilfreiche Ergänzung! 🙂

Beste Grüße

Stephan

10 axel schrieb am 11. März 2015 um 12:10 Uhr

Hallo,
vielen dank für den Tip.
Habe allerdings das gleiche Problem wie Christian – es werden keine Zugriffe mehr protokolliert.
Bin jedoch sicher alles korrekt gemacht zu haben (viel falsch machen kann man ja schliesslich nicht)

Die ID ist die 1.
Was mich allerdings wundert ist diese Ausgabe im :

var u=((„https:“ == document.location.protocol) ? „https://{piwik.agentur-mai.de}/“ : „http://{piwik.agentur-mai.de}/“);

Müsste der Pfad nicht anders, nämlich ohne die geschweiften Klammern ausgegeben werden?
gruss axel

2 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!