Manchmal ist es notwendig, eine Interaktion zu verfolgen, die am Ende zu einer neuen Seite führt. Beispielsweise klickt ein Nutzer auf einen Produktlink in der Produktliste und wird sofort zur Detailansicht dieses Produkts weitergeleitet. Nehmen wir an, wir möchten wissen, an welcher Position sich das Produkt in der Produktliste befand, damit wir diese Information nutzen können, um die Sortierung dieser Produktliste in Zukunft neu zu ordnen. Um diese Information zu erhalten, müssten wir eine Anfrage mit einem bestimmten Schlüssel-Wert-Paar an einen Tracking-Server senden.
Es gibt einige Lösungen, die man in Betracht ziehen könnte.
- Eine Möglichkeit besteht darin, eine klientenseitige Tracking-Anfrage zu senden, bevor der Browser zur nächsten Seite wechselt. Dieser Ansatz hat einen großen Nachteil: Wir wissen nie, ob die Anfrage tatsächlich erfolgreich war. Einige Browser trennen alle Verbindungen, bevor sie eine andere Seite laden. Um dies zu umgehen, könnten wir warten, bis die Anfrage erfolgreich war, und den Nutzer anschließend zur Detailansicht weiterleiten. Aber das ist genauso unsinnig, wie es klingt.
- Eine andere Möglichkeit besteht darin, die Informationen irgendwie auf die nächste Seite zu übertragen und dort zu tracken. Aber wie bringen wir diese Tracking-Informationen auf die nächste Seite?
- Einerseits könnten wir der Detailansicht einen Abfrageparameter hinzufügen. Dies würde zu einer Vielzahl unterschiedlicher URLs für ein und dasselbe Produkt führen. Das ist keine gute Idee. Erstens würde dies den Caching-Mechanismus der Website zerstören, da jeder der URL hinzugefügte Parameter zu einer neuen Ressource führt. Und zweitens würde dies zu einem SEO-Problem führen: doppelten Inhalten.
- Andererseits könnten wir die Tracking-Informationen in einem Cookie speichern. Aber dann hätten wir Probleme bei der Verwaltung der Cookie-Werte. Die Cookie-Größe würde zunehmen, und da sie immer an den Server gesendet werden, hätten wir auch einen Anstieg des Datenverkehrs. Außerdem könnte es bei der Nutzung mehrerer Tabs zu Problemen kommen, da Cookies nicht zustandslos sind.
Wie Sie vielleicht schon erraten haben – wir speichern die Tracking-Informationen im Fragment. Auf der Detailansichtsseite extrahieren wir diese Informationen, senden die Anfrage und „bereinigen“ anschließend das Fragment. Wir haben uns entschieden, die Variable „t“ und ein JSON-Objekt als Wert zu verwenden.
Unser Link sieht so aus:
<a href=”/p/a-great-shoe-123456#t={‘listposition’:3}”>Schuh</a>
Beim Laden der Seite liest ein kleines JavaScript-Snippet (1) das Fragment der URL, analysiert den Wert der Variablen t und sendet dieses Objekt an unseren Tracking-Server. Anschließend wird die Variable t aus dem Fragment entfernt. Dadurch stellen wir sicher, dass die Tracking-Anfrage nicht erneut gesendet wird, wenn ein Nutzer die Seite neu lädt oder den Link an einen Freund weiterleitet.
Zum Lesen und Bearbeiten des Fragments verwenden wir das Open-Source-jQuery-Plugin „BBQ“ (http://benalman.com/projects/jquery-bbq-plugin/)
1) Snippet zum Extrahieren von Tracking-Informationen und zum Senden an unseren Tracking-Server:
var trackingHash = $.bbq.getState('t'),
t;
try {
if (trackingHash) {
t = JSON.parse(trackingHash);
if (t) {
sendData(t); // eine Funktion zum Senden unserer Daten an den Tracking-Server
hash = $.deparam.fragment();
delete hash.t;
/* wir wollen keinen neuen Status im Browser erstellen, damit die Zurück-Schaltfläche weiterhin funktioniert. */
window.location.replace('#' + $.param(hash));
}
}
} catch (ignore) { }
Natürlich ist das Tracking nicht der einzige Grund, Informationen zu einer neuen Seite hinzuzufügen. Wir nutzen diese Technik auch, um beim Laden der Seite eine JavaScript-Funktion auszuführen, die auf den im Fragment festgelegten Variablen basiert. Zum Beispiel, um sofort ein Popup-Fenster auf einer Seite zu öffnen, direkt zu einem anderen Reiter als dem Standardreiter zu wechseln oder sogar die richtige Variante auf einer Produktdetailseite auszuwählen.