Eine Single-Page-Webanwendung (SPA) ist eine Webanwendung oder -website, die beim Laden der ersten Seite alle Ressourcen lädt, die zum Navigieren durch die Website erforderlich sind. Wenn der Benutzer auf Links klickt und mit der Seite interagiert, wird der nachfolgende Inhalt dynamisch geladen. Die Anwendung aktualisiert häufig die URL in der Adressleiste, um die herkömmliche Seitennavigation zu emulieren, aber eine weitere vollständige Seitenanforderung wird nie ausgeführt.
Es gibt einige Möglichkeiten, DTM für Single-Page-Webanwendungen zu verwenden und wir werden in diesem Artikel einige dieser Optionen durchgehen.
Methode 1 - Regeln für Direktaufrufe (DCR - Direct Call Rules)
Starten Sie eine Regel für Direktaufrufe wie _satellite.track („Seitenansicht“) für alles, was als Seitenansicht betrachtet wird, unabhängig davon, ob es sich um ein neues DOM handelt oder nicht.
Weitere Informationen zu Regeln für Direktaufrufe finden Sie unter Link
Methode 2 - pushState oder hashchange
Das Ereignis pushState oder hashchange kann mit Single-Page-Webanwendungen (SPAs) verwendet werden, bei denen eine Seite nicht neu geladen wird, sondern deren Inhalt sich ändert. Zu den üblichen Entwicklungs-Frameworks, die zum Erstellen von SPAs verwendet werden können, gehören Angular und React. Mit diesem Ereignistyp können Sie ereignisbasierte Regeln erstellen, ohne auf Entwickler angewiesen zu sein. Diese Regeln werden ausgelöst, wenn allgemeine Funktionen in SPAs auftreten, zum Beispiel:
- Der URL-Pfad wurde basierend auf der Verwendung der HTML5-History-pushState-API geändert.
- Der Hash wurde geändert, weil der Benutzer Ansichten oder Speicherorte auf der Seite änderte.
Schritt 1: Erstellen Sie eine neue ereignisbasierte Regel und wählen Sie den Ereignistyp „pushState“ oder „Hashchange“.
Schritt 2: Wählen Sie unter Regelbedingungen Kriterien als „Hash“ und geben Sie dann den Hash-Parameter an
Bitte beachten Sie, dass im Falle von SPAs zwei oder mehr Image-Abfragen auf derselben Seite gestellt werden. Daher müssen die Werte der zuvor festgelegten Variablen gelöscht werden.
Für s.tl(), d.h. Aufrufe zur Linkverfolgung, kann dies erreicht werden durch:
- Schreiben einer einfachen JavaScript-Funktion zum Löschen der Adobe-Variablen
- Legen Sie die Variablen linkTrackVars und linkTrackEvents fest, wenn Sie dies nicht bereits in der Datei „s_code.js / App Measurement“ getan haben
- Legen Sie die Werte passend für den geänderten Inhalt fest, namentlich die Variable pageName.
- Nachdem die Variablen festgelegt wurden, rufen Sie die tl()-Funktion auf.
Beispielcode :
s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="event1"; s.prop1="some value"; s.eVar1="another value"; s.events="event1"; s.tl(this,'o','My Link Name');
Für s.t(), d. h. Aufrufe der Seitenansicht, kann das durch Folgendes erreicht werden:
Löschen Sie alle Werte für das „s“-Objekt, die Sie nicht beibehalten wollen. Wenn Sie AppMeasurement für JavaScript verwenden, können Sie s.clearVars() aufrufen. Wenn Sie H-Code verwenden, schreiben Sie eine einfache Routine, um Variablen auf eine leere Zeichenfolge zu setzen.
Beispielcode :
s.clearVars(); s.pageName="New Page" s.prop1="some value" void(s.t());
Methode 3 - benutzerdefinierte ereignisbasierte Regel
DTM kann auch auf benutzerdefinierte Ereignisse reagieren, die auf der Seite auftreten. Ein benutzerdefiniertes Ereignis, das vom DOM ausgelöst wird, kann mithilfe von ereignisbasierten Regeln mit dem Ereignistyp als „benutzerdefiniertes Ereignis“ verfolgt werden.
Nehmen wir als Beispiel eine E-Commerce-SPA, wobei die Idee darin besteht, Aufrufe von „Seitenansichten“ auszulösen, wenn die Person in der SPA von einer Seite zu einer anderen surft, ohne die neue Seite zu laden.
Schritt 1: Erstellen Sie eine neue ereignisbasierte Regel und wählen Sie den Ereignistyp als „Benutzerdefiniertes Ereignis“ und geben Sie den Anzeigenamen „Custom_Page_View“ für den ausgelösten Ereignistyp an. „#content“ wird im Feld „Elementtyp oder Selektor“ angegeben, da das Ereignis dorthin gesendet wird. Aktivieren Sie das Kontrollkästchen „Event-Handler direkt auf Element anwenden“, ohne das die Regel nicht ausgelöst würde.
Schritt 2: Aktivieren Sie im Analytics-Abschnitt der Regel das Optionsfeld für das Verfolgen von „s.t()“, da dies für die Verfolgung einer „Seitenansicht“ in diesem Anwendungsfall erforderlich ist.
Schritt 3: Fügen Sie den Code in Ihre Site ein, die das Ereignis erstellt und versendet.
Wir können auf die über das Ereignis gesendeten Daten verweisen, indem im Analytics-Abschnitt der Regel %event.detail.pageName% verwendet wird.
Hinweis: Unabhängig von den oben genannten drei Methoden müssen wir möglicherweise das Startseitenanzeige-Beacon deaktivieren, das das Analytics-Tool als Standard festlegen wollen wird. Ansonsten erhalten Sie, im obigen Beispiel, wo die Entwickler eine Regel zum direkten Aufruf oder EBR für alle Seitenansichten auslösen, ZWEI Beacons auf der ersten Seite und 1 auf allen folgenden Seiten. Bitte beachten Sie den Beispielcode, um das Startseitenansichts-Beacon für das Analytics-Tool zu unterdrücken.
- Fügen Sie „return false“ zu einem beliebigen benutzerdefinierten Code-Block von Analytics Tool hinzu, der auf dieser Seite ausgeführt wird.
