Nachdem ich im letzten Post berichtet hatte, wie man ein Piwik auf Uberspace installiert¹ geht es nun darum, eine Website² mit dem notwendigen Piwik-Tracking-Code auszustatten.

Websites tracken mit Piwik

Diesen kann man manuell in der Piwik-Administration zusammenklicken und dann manuell auf allen zu trackenden Seiten einfügen aber das kann ja niemand wollen.

Daher sammelt die Piwik-Integrations-Site Links zu Plugins für mehr als 65 verschiedene Systeme, die dann automatisch dafür sorgen dass der Tracking-Code auf allen Seiten erscheint. Da sind sehr große und bekannte Systeme dabei wie Wordpress, Typo3 und Drupal. Auch etwas exotischere Kandidaten wie Hudson/Jenkins und GetSimple sind verfügbar.

Da werden also viele Leute sehr schnell glücklich werden.

Nun geht es hier in erster Linie eben um meine Seite und die wird immer noch mit einem antiken Octopress betrieben und das ist auf der Integrations-Site von Piwik nicht verzeichnet.

octopress-piwik auf GitHub

Der erste Google-Treffer für “piwik octopress” liefert dann auch einen guten Startpunkt: Das GitHub-Repo octpress-piwik von jcbedier. Der letzte Commit stammt aus dem Jahr 2014 aber grundsätzlich ist hier schon alles notwendige drin.

Über die Ansicht des Netzwerks des Repos habe ich dann den Fork des Users paskal gefunden, der den allgemeinen Teil des Tracking-Codes Ende November auf den aktuellen Stand gebracht hat.

OpenSource at work… Man muss es einfach lieben.

Installation und Konfiguration von octopress-piwik

Genau diesen Stand der Dinge habe ich dann auch wie folgt für instant-thinking.de verwendet.

Piwik-Variablen in _config.yml einfügen

Als erstes werden die erforderlichen Werte für die Site in der zentralen Octopress-Konfigurationsdatei _config.yml eingesetzt.

1
2
3

# Piwik
piwik_url: piwik.instant-thinking.de
piwik_siteid: 1

Die piwik_url ist einfach die Website, auf der euer Piwik läuft und die piwik_siteid ist die durch Piwik vergebene Nummer der Website.

Piwik-Code inkludieren

Als nächstes wird die Stelle für den Einbau des Tracking-Codes bestimmt. Das geschieht hier in der after_footer.html, die durch Octopress in allen Posts inkludiert wird. Direkt nach dem Disqus-Plugin folgt hier nun das Piwik-Plugin in der Zeile 2:

1
2
3

{% include disqus.html %}
{% include piwik_analytics.html %}
{% include custom/after_footer.html %}

Was jetzt noch fehlt ist die Datei mit dem Tracking-Code an sich. Daher muss nun die piwik_analytics.html aus dem Repo auch im Verzeichnis source/_includes/ zum liegen kommen.

Und das war es dann auch schon. Ein rake generate weiter wird der Tracking-Code an der passenden Stelle eingebaut. Im Safari-Web-Inspector schaut das dann so aus:

Fortan wird der Code also mit jedem Seitenaufruf auf instant-thinking.de ausgeführt und zählt den Besuch. Klasse!

Production vs. Development

Immer wenn ich gerade einen Post schreibe, diesen aber noch nicht veröffentlich habe, benutze ich die Octopress Vorschau-Funktion um mir den aktuellen Stand direkt neben meinem Editor im Browser anzuschauen. Im Moment schaut das genau so aus:

Das ist super, ich mag das sehr so zu schreiben.

Das Problem ist, dass jeder Aufruf der Vorschau nun auch den Piwik-Code aufruft und dieser die Statistiken für instant-thinking.de mit Einträgen füttert die zu einem Post gehören, den es noch gar nicht wirklich gibt. Dass ich damit außerdem den uninteressantesten Besucher der Welt³ überproportional häufig in die Zahlen bekomme ist natürlich auch nicht gut.

Was also her muss ist eine Differenzierung zwischen der produktiven Website im Internet und dem lokalen Vorschaumodus.

Ich nahm eigentlich an, dass das ein gelöstes Problem sein müsste aber es scheint doch nicht ganz einfach zu sein…

Also dachte ich mir, bevor ich mit Piwik-Plugins und der entsprechenden Config rumhantiere wäre es doch eigentlich eine gute Idee, das Problem direkter anzugehen.

Octopress ist ja im Prinzip Jekyll und Jekyll kann ein Jekyll environment spezifizieren, welches dann in Liquid-Tags abgefragt werden kann.

So weit so gut, nur ist mein Jekyll halt antik⁴ und kennt diese Option nicht. Unter der Auflistung von jekyll --help habe ich aber die Option --url [URL] Set custom site.url gefunden. Die ist weniger elegant, lässt sich aber in Kombination mit rake für den hier vorliegenden Zweck im Prinzip genauso verwenden wie das fancy environment.

Den Aufruf von jekyll in dem preview-Task in meinem Rakefile habe ich daher um die Option --url 'http://localhost:4000' ergänzt. Der diff des Tasks schaut so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

desc "preview the site in a web browser"
task :preview do
  raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
  puts "Starting to watch source with Jekyll and Compass. Starting Rack on port #{server_port}"
  system "compass compile --css-dir #{source_dir}/stylesheets" unless File.exist?("#{source_dir}/stylesheets/screen.css")
-  jekyllPid = Process.spawn({"OCTOPRESS_ENV"=>"preview"}, "jekyll --auto")
+  jekyllPid = Process.spawn({"OCTOPRESS_ENV"=>"preview"}, "jekyll --auto --url 'http://localhost:4000'")
  compassPid = Process.spawn("compass watch")
  rackupPid = Process.spawn("rackup --port #{server_port}")

  trap("INT") {
    [jekyllPid, compassPid, rackupPid].each { |pid| Process.kill(9, pid) rescue Errno::ESRCH }
    exit 0
  }

  [jekyllPid, compassPid, rackupPid].each { |pid| Process.wait(pid) }
end

Den Piwik-Code in der piwik_analytics.html habe ich dann in eine weitere if-Bedingung⁵ gewickelt die ihn nur dann inkludiert, wenn die site.url nicht http://localhost:4000 ist:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{% if site.piwik_url %}
{% if site.url != "http://localhost:4000" %}
<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//{{ site.piwik_url }}/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '{{ site.piwik_siteid }}']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img src="//{{ site.piwik_url }}/piwik.php?idsite={{ site.piwik_siteid }}" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
{% endif %}
{% endif %}

Das ganze klappte so verblüffend gut, dass ich das Plugin-Repo auf Github forkte und die beiden Vorgänger mit Pull requests bedachte.

Das führte nach dem Merge zu einem interessanten Network-Graph und außerdem dazu, dass im octpress-piwik Haupt-Repo von jcbedier nun der aktuelle Piwik-Code enthalten ist und meine kleine Erweiterung für alle geneigten Octopress-User nutzbar ist.