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

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 auf eine neue Seite übergeht. Zum Beispiel klickt ein Benutzer auf einen Produktlink in der Produktliste und wird sofort zur Detailansicht dieses Produkts weitergeleitet. Nehmen wir an, wir wollen wissen, an welchem Index das Produkt in der Produktliste stand, damit wir diese Information nutzen können, um die Sortierung in der Produktliste in Zukunft neu zu ordnen. Um diese Information zu erhalten, müssten wir eine Anfrage an einen Tracking-Server mit einem bestimmten Schlüssel-Wert-Paar senden.

Mögliche Lösungen:

Es gibt einige Lösungen, die du dir vorstellen kannst.

• Eine Möglichkeit besteht darin, eine clientseitige 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 brechen alle Verbindungen ab, bevor sie eine andere Seite laden. Um dies zu umgehen, könnten wir warten, bis die Anfrage erfolgreich war, und den Benutzer anschließend auf die Seite mit der Detailansicht weiterleiten. Aber das ist genauso dumm, wie es klingt.
• Eine andere Möglichkeit ist, die Informationen irgendwie auf die nächste Seite zu bringen und sie dort zu verfolgen. Aber wie bekommen wir diese Informationen auf die nächste Seite?
  • Einerseits könnten wir einen Abfrageparameter auf der Seite mit der Detailansicht hinzufügen. Das würde zu einer ganzen Reihe von verschiedenen URLs für ein und dasselbe Produkt führen. Das ist keine gute Idee. Erstens wird dadurch der Caching-Mechanismus der Website zerstört, da jeder zur URL hinzugefügte Parameter zu einer neuen Ressource führt. Und zweitens führt es zu einem SEO-Problem: doppelter Inhalt.
  • Andererseits könnten wir die Tracking-Informationen in einem Cookie speichern. Aber dann hätten wir Probleme mit der Verwaltung der Cookie-Werte. Die Größe der Cookies würde zunehmen, und da sie immer an den Server gesendet werden, würde auch der Datenverkehr zunehmen. Außerdem könnte man mit Multi-Tabbing Probleme bekommen, da Cookies nicht zustandslos sind.

Unsere Lösung:

Wie du vielleicht schon erraten hast - wir speichern die Tracking-Informationen innerhalb des Fragments. Auf der Seite mit der Detailansicht 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 wie folgt aus:

<a href="/p/a-great-shoe-123456#t={'listposition':3}">Schuh</a>

Beim Laden des Körpers liest ein kleines Javascript-Snippet (1) das Fragment der URL, analysiert den Wert der Variable t und sendet dieses Objekt an unseren Tracking-Server. Danach wird die Variable t aus dem Fragment entfernt. Auf diese Weise stellen wir sicher, dass die Tracking-Anfrage nicht erneut gesendet wird, wenn ein Benutzer die Seite neu lädt oder den Link an einen Freund schickt.

Zum Lesen und Manipulieren des Fragments verwenden wir das quelloffene jQuery-Plugin "BBQ"(http://benalman.com/projects/jquery-bbq-plugin/)

1) Snippet, um Tracking-Informationen zu extrahieren und an unseren Tracking-Server zu senden:

var trackingHash = $.bbq.getState('t'), t; try { if (trackingHash) { t = JSON.parse(trackingHash); if (t) { sendData(t); // eine Funktion, um unsere Daten an den Tracking-Server zu senden hash = $.deparam.fragment(); delete hash.t; /* wir wollen keinen neuen Zustand im Browser erzeugen, damit der Zurück-Button noch funktioniert. */ window.location.replace('#' + $.param(hash)); }     } } catch (ignore) { }

Weitere Anwendung dieser Technik:

Natürlich ist die Nachverfolgung nicht der einzige Grund, Informationen zu einer neuen Seite hinzuzufügen. Wir verwenden diese Technik auch, um eine Javascript-Funktion beim Laden auf der Grundlage von im Fragment festgelegten Variablen auszuführen. Zum Beispiel, um eine Ebene sofort auf einer Seite zu öffnen oder um direkt zu einer anderen Registerkarte als der Standard-Registerkarte zu wechseln und sogar um die richtige Variante auf einer Produkt-Detailansichtsseite auszuwählen.