Ankerlinks in WordPress setzen und per Piwik tracken

Bei größeren Artikeln in WordPress kann es schon mal vorkommen, dass man sich eine Unterteilung und ein Navigationsmenü wünscht. Hier bietet es sich Anker-Links zu setzen. Dadurch ist es möglich zu einer bestimmten, selbstdefinierten Stelle im Text zu springen.


Aus eigener Erfahrung ist es aber sinnig, dies nur einzusetzen, wenn man dafür den Artikel in WordPress durch das setzen eines “Weiterlesen”-Links in zwei Teile teilt. Dadurch hat man sozusagen einen Anfangstext und der Benutzer muss vorher über einen Link auf die eigentliche, komplette Artikelseite wechseln.

Im zweiten Abschnitt kann man dann sein eigenes Menü einbauen. Wie genau, das aussehen soll, zeige ich hier an einem Beispiel:

Unterteilt man seinen eigenen Artikel in mehrere Unterkategorien die z.B. durch eine Überschrift in <h2>- oder <h3>-Tags, kann man diese durch einen Ankerlink mit einem spezifischen Namen versehen.

<h2><a name="ueberschrift"></a>Überschrift</h2>

Hat unser Artikel beispielsweise vier Kategorien, dann brauchen wir natürlich auch vier dieser Anker-Links.

Jetzt geht es darum, diese Links auch ansprechbar zu machen.

<ul>
<li><a href="http://linkzumblog.xyz/artikelname/#ueberschrift">Überschrift</a></li>
<li><a href="http://linkzumblog.xyz/artikelname/#ueberschrift2">Überschrift 2</a></li>
</ul>

Für linkzumblog.xyz/artikelname/ muss natürlich der Permalink von WordPress verwendet werden, denn wir wollen ja nur einen Anker-Link auf der selben Seite ansprechen. Als Beispiel habe ich hier zwei Überschriften eingebaut, welche in einer unsortierten Liste zusammengefasst werden. Diesen <ul>-Block solltet ihr am besten direkt hinter den “Weiterlesen”-Link packen, dann ist er sofort sichtbar, wenn die Besucher auf diese Seite springen.

Für Nutzer von Piwik stellt sich nun aber die Frage, bekomme ich eigentlich mit, wenn Besucher auf einen der Anker-Links klicken? Die Antwort lautet leider nein, aber dieses Problem können wir beheben und es ist auch gar nicht schwer.

Als erstes bauen wir uns ein kleines JavaScript in unser Dokument ein. Dies sollte auf jeden Fall vor unserem Ankerlink-Menü eingefügt werden.

<script type="text/javascript">var baseURL = document.location.href;</script>

Hier handelt es sich nur um eine Zuweisung der aktuellen URL zur Variable baseURL. Das ganze dient dazu, dass wir immer die Ursprungs-URL zur Verfügung haben, so lange sich ein Besucher mit den Ankerlinks über die Seite bewegt.

Als nächstes passen wir unser Linkmenü an, so dass wir bei Aufruf eines Ankerlinks eine Nachricht an Piwik schicken. Dies geschieht durch das setzen von onclick im Ankerlink.

<ul>
<li><a onclick="javascript:piwikTracker.setCustomUrl(baseURL + '#ueberschrift'); javascript:piwikTracker.trackPageView(document.title + ' / Überschrift');" href="http://linkzumblog.xyz/artikelname/#ueberschrift">Überschrift</a></li>
<li><a onclick="javascript:piwikTracker.setCustomUrl(baseURL + '#1'); javascript:piwikTracker.trackPageView(document.title + ' / Überschrift 2');" href="http://linkzumblog.xyz/artikelname/#ueberschrift2">Überschrift 2</a></li>
</ul>

Hier nutzen wir zwei JavaScript-Funktionen. Als erstes setzen wir eine eigene URL, die aus unser vorher festgelegten baseURL und dem Ankertag – z.B. #ueberschrift – besteht. Als nächstes tracken wir die Seitenansicht manuell und übermitteln dabei einen eigenen Dokumententitel, der sich aus dem eigentlichen Dokumententitel plus einer eigenen Ergänzung zusammensetzt. Wir unterteilen beide durch ein ” / “, wodurch wir in Piwiks Seitenansicht eine Baumansicht der Seitenaufrufe bekommen. Alle normalen Seitenaufrufe werden gezählt und die Aufrufe der Ankerlinks werden in einem Unterzweig dargestellt und sind durch unsere eigene Ergänzung in Piwik auswertbar.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>