Zum Inhalt springen
Dokumentation
Jetzt starten

Single-Page Applications messen

Inhalt
Automatische Wrapper-Funktion Wrapper-Tag im etracker tag manager Manueller Einbau des Wrappers Parameter des Wrappers Allgemeine Hinweise zur Wrapper-Funktion

Bei einer Single-Page Application (SPA) wird nur eine einzige HTML-Seite geladen und der Inhalt dann mithilfe von JavaScript-APIs aktualisiert, um angezeigte Inhalte zu ändern. Diese Änderungen werden standardmäßig nicht als neue Seitenaufrufe gemessen. Daher ist es erforderlich, hierfür virtuelle Seitenaufrufe zu generieren.

Für die Messung virtueller Seitenaufrufe gibt es drei Methoden:

  1. Automatische Wrapper-Funktion.
  2. Wrapper-Tag im etracker tag manager.
  3. Manueller Einbau des Wrappers.

Automatische Wrapper-Funktion

Bestimmte Änderungen lassen sich automatisch erkennen und für das Auslösen der Messung eines neuen Seitenaufrufs nutzen. Hierzu muss folgende Ergänzung innerhalb des in der Website integrierten etracker Codes vorgenommen werden:

data-page-changed-detection=<Modus>

Für den Modus stehen diese Optionen zur Verfügung:

  1. off: Aus.
  2. url: Löst einen neuen Seitenaufruf aus, wenn sich die URL ohne Hashwert ändert.
  3. url_debug: Wie url, jedoch nur auszulesen im console.log der Browser-DevTools.
  4. hash: Löst einen neuen Seitenaufruf aus, wenn sich die URL inklusive Hashwert ändert.
  5. hash_debug: Wie hash, jedoch nur auszulesen im console.log der Browser-DevTools.
  6. title: Löst einen neuen Seitenaufruf aus, wenn sich document.title ändert.
  7. title_debug: Wie title, jedoch nur auszulesen im console.log der Browser-DevTools.

Wrapper-Tag im etracker tag manager

Ein virtueller Seitenaufruf kann auch über den etracker tag manager generiert werden. Dieser erspart Änderungen am etracker Code und damit im HTML der Website. Außerdem bietet das Wrapper-Tag noch weitere Trigger neben „History Change“. Dazu zählen insbesondere:

  • Element-Klick: Beispielsweise durch eine Reiter-Struktur (Tabs) können sich Inhalte stark verändern. Die Tab-Klicks können als Auslöser dienen.
  • Element-Sichtbarkeit: Inhaltsänderungen können auch durch Hovern oder Eingaben ausgelöst werden.
  • Scroll-Tiefe: Wenn Inhaltsänderungen durch Scrolling ausgelöst werden.
  • Datalayer Push: Flexible Art, um Inhaltsänderungen zu übergeben.

Hier findest du eine Anleitung für die Einrichtung des Wrapper-Tags.

Manueller Einbau des Wrappers

Der Wrapper wird mit dem Standard JavaScript Code von etracker ausgeliefert und kann zum Beispiel so eingebaut werden:

javascript
<script>
    function testCall(){
        if(typeof(_etracker) === 'object') {
            et_eC_Wrapper({et_et: 'ACCOUNTSCHLÜSSEL', et_pagename: 'pagename', et_areas: 'Bereich1/Bereich2/Bereich3', et_seg1: 'Eigenes Segment 1'});
        }
    }
</script>

Damit der Aufruf der Wrapper-Funktion durch eventuell geblockten etracker Code, beispielsweise durch den Ausschluss von der Zählung, nicht zu einem JavaScript-Fehler führt, wird mit typeof zunächst das Vorhandensein des etracker Objektes überprüft.

Parameter des Wrappers

Der Parameter et_et für den Account-Schlüssel ist ein Pflichtparameter. Alle weiteren Parameter sind optional:

VariableTypeBedeutungBeschreibung
et_pagenameStringSeitennameEindeutiger Name der Seite
et_areasStringBereichsnameBezeichnung des Seitenbereichs
et_tvalFloatGesamtbestellwertNettoumsatz, der durch die Zielerreichung generiert wurde
et_tonrStringBestellnummerEindeutige Bestellnummer (ohne Kommas und Semikolons)
et_tsaleIntegerBestellstatusBestellstatus für Umsatzziele:
0 = Lead
1 = Sale
2 = Vollstorno
et_basketStringWarenkorbVom Shopsystem vergebene Parameter zum Zuordnen der Warenkorbartikel (ArtNr, ArtName, ArtGruppe, Anzahl, Preis)
cc_attributesStringKampagnen-AttributeAttributname und Attributwert für Kampagnen
et_seg1 StringEigenes SegmentInhalt des eigenen Segments

Wenn die optionalen Parameter nicht ausdrücklich gesetzt sind, werden die Werte übernommen, die beim letzten Seitenaufruf an etracker übermittelt wurden. Die Werte können über den Standard Tracking Code bei Seitenaufruf der Seite im Browser oder über den Wrapper beim dynamischen Laden der Seite übermittelt werden.

Folgender Aufruf erzeugt die gleichen Daten wie der ursprüngliche Aufruf über den Standard Tracking Code:

javascript
<script>
    if(typeof(_etracker) === 'object') {
        et_eC_Wrapper({et_et: 'ACCOUNTSCHLÜSSEL'});
    }
</script>
Beispiel für einen vollständigen Aufruf javascript
<script>
    if(typeof(_etracker) === 'object') {
        et_eC_Wrapper(
            {
                et_et: 'ACCOUNTSCHLÜSSEL',
                et_pagename:'Suchergebnisse',
                et_areas: 'DE/Suche',
                cc_attributes:{etcc_cu:'onsite',etcc_med_onsite:'Interne Suche',etcc_cmp_onsite:'Mit Ergebnis',etcc_st_onsite:'Stiefel'},
                et_seg1: 'eingeloggt',
                et_seg2: 'B2B'
            }
            );
        }
</script>

Allgemeine Hinweise zur Wrapper-Funktion

Erfassung von Events im Zusammenspiel mit dem Wrapper

Werden Events im Rahmen des etracker Event Trackings an etracker übermittelt, so werden diese dem Seitennamen zugewiesen, der zuletzt vor dem Auslösen des Events an etracker übermittelt wurde. Wurde beispielsweise ein Seitenaufruf zunächst mittels Wrapper ausgelöst und danach ein Event getrackt, so wird das Event in der Auswertung dem Seitennamen zugeordnet, der mit dem Wrapper an etracker übermittelt wurde.

Erfassung von URLs im Zusammenspiel mit dem Wrapper

Da über den Wrapper keine URL an etracker übermittelt werden kann, weist etracker die Seitenaufrufe, die mittels Wrapper an etracker übertragen werden, immer der URL zu, die in der Eigenschaft document.location.href gespeichert ist.

Bitte beachte:

Eine eindeutige URL steht bei SPAs für die Auswertung nicht zur Verfügung. Um dennoch eine eindeutige Auswertung der einzelnen Inhalte zu gewährleisten, sollte besonders darauf geachtet werden, dass jede virtuelle Seite einen eindeutigen und in der Auswertung leicht nachzuvollziehenden Seitennamen erhält.

Falls dies wegen der Vielzahl an Inhalten oder aus anderen Gründen nicht möglich ist, empfehlen wir, keine sprechenden Seitennamen zu verwenden, sondern stattdessen virtuelle Seitenpfade über den Parameter et_pagename zu übermitteln.