Wie funktioniert ClickMap?

Von | 17. April 2012

Ben Gaines beschrieb vor ziemlich genau drei Jahren, wie er beim ersten Kontakt mit ClickMap beeindruckt war, und wie er sich fragte, was wohl die Technik hinter den fast wie Magie anmutenden Overlays sein mochte. Ben wäre nicht Ben, wenn er nicht anschließend einen hervorragenden Artikel daraus gemacht hätte. Den möchten wir heute nachvollziehen.

Überblick

ClickMap besteht aus zwei Komponenten:

  1. Datensammlung und
  2. einem Browser Plugin.

Das Plugin ist für die Anzeige der Daten zuständig, d.h. es kann auf einer Seite die gesammelten Daten als Overlay über die Links einblenden. Man hat damit einen sehr visuellen Eindruck davon, welche Links oder Elemente auf der Seite wichtig sind.

Und man kann in ClickMap nicht nur Klicks als Metrik heranziehen, sondern auch relevantere Metriken wie Umsatz oder Success Events.

Wie aber werden die Daten gesammelt?

Wenn der Browser eine Seite lädt, initialisiert er den SiteCatalyst Code. Bei dieser Initialisierung (die mit der s_gi() Methode geschieht) wird unter anderem ein onClick-Handler an document.body angefügt.

Der Handler wird immer dann aufgerufen, wenn der Benutzer ein Element auf der Seite anklickt. Der Handler bestimmt dann eine „Object ID“ und schreibt diese entweder in den „s_sq“ Cookie (bei „normalen Links“) oder schickt sie an SiteCatalyst (bei Exitlinks, Downloads oder Custom Links). Daten aus dem „s_sq“ Cookie werden auf der nächsten Seite gesendet.

Das Plugin benutzt später die Daten und zeigt sie als Overlay über der aktuell im Browser dargestellten Seite an.

Woher weiß das Plugin, welche Daten genau es benutzen muß?

Erstens sieht sich das Plugin den Namen der aktuell geladenen Seite an, also den Inhalt der s.pageName Variable. Im Debugger kann man diesen Wert unter dem Parameter „pid=“ sehen.

Das bedeutet natürlich, daß ClickMap nur solange Daten anzeigen kann, wie der Name sich nicht ändert. Dynamische Seitennamen oder Änderungen werfen ClickMap aus der Bahn.

Tip: Es bedeutet auch, daß man sich eine lokale Kopie einer Seite machen und das Plugin darauf benutzen kann. Sinnvoll vor Redesigns.

Zweitens identifiziert das Plugin wie erwähnt individuelle Links über ihre „Object ID“. Im Debugger taucht die als URL Parameter „oid=“ auf.

Wenn das ClickMap Plugin also für die aktuelle Seite und den aktuellen Link Daten im Backend findet, blendet es ein Overlay ein.

Drittens benutzt der Initialisierungscode die document.all() Methode um jedem Link auf der Seite eine numerische ID zuzuweisen. Die sieht man im Debugger unter dem URL Parameter „oi=“, wenn der Code sie überträgt. Eine numerische ID nicht immer nötig, darauf kommen wir gleich.

So weit so gut.

Object ID?

Die „Object ID“ berechnet ClickMap normalerweise selber. Es zieht dazu die URL des Links heran.

Das kann unter zwei Umständen problematisch sein.

Einerseits gibt es auf vielen Seiten mehrere Links mit gleichem Ziel. Man denke nur an die allgegenwärtigen „Homepage“ Links auf praktisch jeder Seite im Web, oder daran, daß es meist mehr als nur einen „Buy >“ Knopf gibt.

Die „Object ID“ eines Links ist also nicht unbedingt eindeutig und daher braucht das System noch die numerische ID, die sich grob aus der Position des Links auf der Seite ableitet. Der „Home“ Link oben links ist also ein anderes Objekt als der „Home“ Link ganz unten im Footer.

Browser sehen allerdings eine Seite nicht nur grafisch (das tun sie natürlich, sonst würden wir nichts sehen). Intern speichern Browser eine HTML Seite aber in einer Repräsentation namens „Document Object Model“ oder kurz „DOM“. Die Position eines Links auf der Seite wie wir sie sehen hat leider mit der Position im DOM nichts gemein. Der Code nutzt aber die Position im DOM für die Berechnung der numerischen ID.

Das bedeutet: Wenn der Webdesigner beschließt Code der Seite zu ändern, kann das ClickMap aus dem Trab bringen. Das gilt sogar, wenn die Änderungen keinerlei optische Auswirkungen haben. Beliebtes Beispiel: Das Menü auf der linken Seite wird im Code hinter den Inhalt der Seite gestellt und per Style bei der Darstellung nach links geschoben.

Das klingt akademisch, wird aber für SEO oder die Optimierung für Mobilgeräte durchaus gemacht.

Zweitens sind solche Links problematisch, die per URL Parameter auf verschiedene Seiten zeigen, z.B. http://www.test.com/?page_ID=1630.

Die „Object ID“ dieses Links wäre „http://www.test.com/?page_ID=1630“, aber in SiteCatalyst werden als Standard bei URLs die Parameter nicht gespeichert. (Kann man ändern, das hat aber Seiteneffekte.) Das bedeutet, daß ClickMap nicht sicher wissen kann, welcher Link denn nun genau mit „http://www.test.com/“ gemeint war.

Wie kann man ClickMap helfen?

Man kann ClickMap die Arbeit erleichtern und gleichzeitig die Zahlen verbessern, indem man die „Object ID“ für die Links im onClick-Handler spezifiziert.

Damit werden alle Unsicherheiten bzgl. „Object ID“ und numerischer ID eliminiert und ClickMap weiß ganz genau, welcher Link welcher ist, solange die „Object ID“ eines Links sich nicht ändert.

Wie setzt man die „Object ID“?

Es genügt, dem Link einen onClick-Handler zu spendieren und in diesem die Variable „s_objectID“ zu setzen, z.B. so:

<a href=“http://www.test.com/?page_ID=1630″ 
   onclick=“var s_objectID=‘homepage_link1’;”>

Das ist ein recht großer Aufwand, wenn man es wirklich mit allen Links auf allen Seiten einer Website machen will. Das sollte aber vielfach gar nicht notwendig sein.

Wer wirklich für alle Links „Object ID“s berechnen will kann sich bei Consulting nach dem entsprechenden Plugin erkundigen. Das ist allerdings nicht frei verfügbar.

Ein großer Vorteil der „s_objectID“ Variable ist noch, daß man damit Unterschiede zwischen Browsern überspielt. Firefox und IE geben unterschiedlich viel Informationen über Linkpositionen preis. Das führt dazu, daß ein und dieselbe Seite im ClickMap Plugin für Firefox anders aussehen kann als im Plugin für IE. Wer aber „s_objectID“ setzt, sieht in beiden Browsern das gleiche.

Ein Gedanke zu „Wie funktioniert ClickMap?

  1. Pingback: IP Adressen Nicht Tracken | Webanalyse auf Deutsch

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.