1
 
 
Profil
In deinem persönlichen Profilbereich kannst du den Status deiner Bewerbung einsehen, unvollständige Bewerbungen zwischenspeichern und aktuelle News und Events einsehen
26. Februar 2014

Die magische # [ˈɑːktoʊθɔːrp]

Worum geht es in dem Artikel?

Octothorpe ist der technische Begriff für die Raute, die das optionale Fragment einer URL einleitet. Das Fragment teilt dem Browser in der Regel mit, wo die Seite zu positionieren ist, wenn sich ein Anker-Tag mit dem Namen des Fragments auf der Seite befindet.

Aber ist das die einzige Möglichkeit, wie das Fragment verwendet werden kann?

Da man fast alles in das Fragment packen kann, kann es auch als Methode verwendet werden, um Abfrageparameter zu einer Seite hinzuzufügen, die nicht an den Server gesendet werden und somit nur auf dem Client ausgewertet werden können. Mit dieser Methode ist es möglich, einer Seite einen Zustand hinzuzufügen, ohne eine neue URL bezüglich SEO zu generieren.

Der Fall:

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.

Mögliche Lösungen:

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.

Unsere Lösung

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) { }

Weitere Anwendungsmöglichkeiten dieser Technik:

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.

0Noch keine Kommentare
Kommentar schreiben
Hinterlasse uns hier deinen Kommentar und lass die Autor*innen wissen, wie dir der Artikel gefallen hat.
Antwort auf:  Direkt auf das Thema antworten

Geschrieben von

Techblogger
Techblogger

Ähnliche Beiträge

Gespeichert!

We want to improve out content with your feedback.

How interesting is this blogpost?

We have received your feedback.