Best Practices für die Implementierung von Einzelseiten-Programmen (SPA)

Erfahren Sie mehr über die Best Practices zur Implementierung von Adobe Analytics auf Einzelseiten-Programmen (SPA). Dazu gehört die Verwendung von Experience Platform Tags, der empfohlenen Implementierungsmethode.

VORABBEMERKUNGEN:

  • Der folgende Inhalt bezieht sich auf die Verwendung von Experience Platform Tags zur Implementierung von Adobe Analytics auf Ihrer Website. Diese Überlegungen gelten auch, wenn Experience Platform Tags nicht verwendet wird, und müssen daher an Ihre Implementierungsmethode angepasst werden.
  • Es gibt Unterschiede in SPA. Daher sollten Sie Ihren Ansatz Ihren Bedürfnissen entsprechend anpassen.

Einfaches Diagramm zum Arbeiten mit SPAs in Experience Platform Tags

SPA für Analysen in Tags

HINWEIS: Dies ist ein vereinfachtes Diagramm, wie SPA-Seiten in einer Adobe Analytics-Implementierung mit Experience Platform Tags behandelt werden. In den folgenden Abschnitten werden die zu berücksichtigenden Schritte und Probleme beschrieben.

Festlegen der Datenschicht

Wenn neue Inhalte geladen werden oder eine Aktion auf einer SPA-Seite erfolgt, aktualisieren Sie zuerst die Datenschicht. Dies muss vor der Ausführung eines benutzerdefinierten Ereignisses, das eine Regel in Experience Platform Tags auslöst, geschehen. Dadurch wird sichergestellt, dass die richtigen Werte aus der Datenschicht in Tags und dann in Adobe Analytics übertragen werden.

Im Folgenden finden Sie ein Beispiel für eine Datenschicht. Jedes dieser Elemente kann sich basierend auf der ursprünglichen Ansicht oder einer nachträglichen Änderung der Ansicht aufgrund einer auf Ihrer SPA-Seite durchgeführten Aktion ändern. Bei einer Änderung der Voll- oder Mehrheitsansicht ist es beispielsweise üblich, einen eindeutigen „pageName“-Wert zu übergeben, um zwischen den Ansichten in Adobe Analytics-Berichten zu unterscheiden.

<script>
    digitalData = {
        pageInstanceID: "Launch Demo Site",
        page:{
            pageInfo:{
                pageID: '2745374',
                pageName: 'acs demo - product listing page'
            },
            attributes:{
                project: "Experience Platform Launch Project"
            }
        },
        user : [ {
          "profile" : [ {
            "attributes" : {
              "gender" : "male",
              "age" : "35"
            }
          } ]
        }],
        libraries : {
          adobe : {
            launch : {
              state : 0, // 0 = not loaded , 1 = loaded
              domain : "assets.adobedtm.com"
            }
          }
        }

     };
    </script>

Festlegen benutzerdefinierter Ereignisse und Überwachen dieser Ereignisse in Experience Platform Tags

Wenn neue Inhalte geladen werden oder eine Aktion auf der SPA erfolgt, müssen Experience Platform-Tags informiert werden, um eine Regel auszuführen, die Daten an Analytics sendet. Hierfür gibt es mehrere Ansätze: Direktaufrufregeln oder benutzerdefinierte Ereignisse.

  • Direktaufrufregeln: Richten Sie eine Direktaufrufregel ein, die ausgeführt wird, wenn sie direkt von der Seite aufgerufen wird. Wenn das Laden oder die Aktion der Seite einfach oder eindeutig ist und jedes Mal einen bestimmten Satz von Anweisungen ausführen kann (beispielsweise eVar4 auf X setzen und event2 jedes Mal auslösen), dann ist dieser Ansatz geeignet. Weitere Details zum Erstellen von Direktanrufregeln finden Sie in der Experience Platform Tags-Dokumentation.
  • Benutzerdefinierte Ereignisse: Wenn Sie eine Payload mit eindeutigen Werten für Ereignisse, die auf SPA-Seiten auftreten, dynamisch anhängen müssen, verwenden Sie benutzerdefinierte JavaScript-Ereignisse und überwachen Sie diese in Experience Platform Tags. Verwenden Sie die Payload, um Datenelemente und Analytics-Variablen in Tags festzulegen. Diese Methode wird als Best Practice betrachtet, da diese Anforderung normalerweise für SPAs gilt. Unsere folgenden Beispiele verwenden die Methode für benutzerdefinierte Ereignisse.

Beispiele: In diesem Hilfedokument gibt es Links zu Beispiel-SPA-Sites, die Analytics und andere Experience Cloud-Lösungen implementieren. In diesen Beispielen werden die folgenden benutzerdefinierten Ereignisse verwendet:

  • Event-view-start: Wird beim Start der Ansicht/des Status ausgeführt, die/der geladen wird.
  • Event-view-end: Wird ausgeführt, wenn eine Änderung der Ansicht/des Status erfolgt und alle SPA-Komponenten auf der Seite vollständig geladen sind. Dies ist das Ereignis, das normalerweise Daten an Adobe Analytics sendet.
  • Event-action-trigger: Wird ausgeführt, wenn ein beliebiges Ereignis auf der Seite auftritt, mit Ausnahme des Ladevorgangs von Ansicht/Status. Beispiele hierfür sind ein Klick-Ereignis oder eine kleinere Inhaltsänderung ohne Änderung der Ansicht.

Weitere Informationen dazu, wie und wann diese Ereignisse ausgelöst werden, finden Sie auf den oben genannten Seiten und in den entsprechenden Dokumenten. Sie müssen nicht dieselben Ereignisnamen in Ihrer Implementierung verwenden. Es ist wichtig, den funktionalen Anwendungsfall für die verwendete Methode zu verstehen, da dies die empfohlene Best Practice für jede Methode ist. Das folgende Video zeigt eine beispielhafte SPA-Seite und einen Beispiel-Code in Experience Platform Tags, der auf die benutzerdefinierten Ereignisse wartet.

Ausführen von s.t() oder s.tl() in Experience Platform Tags

Ein wichtiges Konzept für Analytics bei der Arbeit mit einer SPA ist der Unterschied zwischen s.t() und s.tl(). Ihr Code löst die eine oder die andere dieser Methoden in Experience Platform Tags aus, um Daten an Analytics zu senden.

  • s.t(): „t“ steht für „track“ (nachverfolgen) und stellt eine Seitenansicht dar. Wenn sich die Ansicht so stark ändert, dass Sie sie als neue „Seite“ ansehen, verwenden Sie diesen Aufruf. Setzen Sie einen eindeutigen Wert für die Variable s.pageName und verwenden Sie s.t(), um die Daten an Analytics zu senden.

  • s.tl(): Das „tl“ steht für „track link“ (Link nachverfolgen) und repräsentiert einen Link-Klick oder eine kleine Inhaltsänderung. Wenn die Änderung der Ansicht minimal ist, verwenden Sie s.tl(), um einen eindeutigen Wert über die Interaktion an Analytics zu übergeben. Diese übergebene Variable ist nicht s.pageName, da dies in Analytics ignoriert wird, wenn s.tl()-Aufrufe empfangen werden.

TIPP: Als allgemeine Richtlinie sollte man, wenn sich der Bildschirm um mehr als 50 % ändert, den s.t()-Seitenansicht-Aufruf verwenden. Verwenden Sie andernfalls s.tl(). Überlegen Sie jedoch nach eigenem Ermessen, welche Aktionen eine neue „Seite“ darstellen und wie dies in Adobe Analytics-Berichten dargestellt werden soll.

Das folgende Video zeigt, wo und wie Sie s.t() oder s.tl() in Tags auslösen.

Löschen von Variablen

Senden Sie die richtigen Daten zur richtigen Zeit an Analytics. In einer SPA-Umgebung bleibt ein in einer Analytics-Variable gespeicherter Wert bestehen und wird erneut an Analytics gesendet, möglicherweise auch dann, wenn Sie ihn nicht mehr benötigen. In der Analytics Tags-Erweiterung gibt es eine Funktion zum Löschen der Variablen, um sicherzustellen, dass beim nächsten Aufruf nicht versehentlich Daten an Analytics gesendet werden.

Das obige Diagramm zeigt Variablen, die geleert werden, nachdem Sie Daten hinein gesendet haben. In Wirklichkeit kann dies vor ODER nach dem Aufruf geschehen, aber seien Sie für eine saubere Implementierung konsequent in Ihren Experience Platform Tags-Regeln. Wenn Sie Variablen löschen, bevor Sie s.t() ausführen, legen Sie die neuen Variablen sofort nach dem Aufruf fest und fahren Sie dann fort, die neuen Daten in Analytics zu senden.

HINWEIS: Das Löschen von Variablen ist nicht immer erforderlich, wenn s.tl() ausgeführt wird. Dieser Aufruf erfordert die Verwendung der Variable linkTrackVars, um Analytics anzuweisen, welche Variablen gesetzt werden sollen. Dies geschieht automatisch in Experience Platform Tags durch Konfiguration. Es verhindert, dass fehlerhafte Variablen gesetzt werden, im Gegensatz zum Verhalten bei s.t()-Aufrufen in einer SPA-Umgebung. Um die sauberste und zuverlässigste Implementierung zu gewährleisten, ist es wahrscheinlich einfacher, die Funktion „clear variables“ (Variablen bereinigen) für beide Aufrufe in einer SPA-Umgebung zu verwenden.

Das folgende Video zeigt, wo und wie man Variablen in Tags löscht.

Weitere Überlegungen

Fenster mit benutzerdefiniertem Code in Experience Platform Tags

In der Tags Analytics-Erweiterung gibt es zwei Stellen, an denen benutzerdefinierter Code eingefügt werden kann: die Abschnitte Bibliotheksverwaltung und Konfiguration des Trackers mit benutzerdefiniertem Code.

Benutzerdefinierte Code-Fenster in Tags Analytics

An jedem dieser Orte wird der darin enthaltene Code einmal beim ersten Laden Ihrer SPA-Seite ausgeführt. Wenn der Code bei einer Ansicht- oder Aktionsänderung ausgeführt werden soll, implementieren Sie diesen Code in der entsprechenden Regel (beispielsweise die Regel „page load: event-view-end“), um sicherzustellen, dass der Code jedes Mal ausgeführt wird, wenn die Regel ausgeführt wird. Wenn Sie die Aktion in der Regel erstellen, setzen Sie Extension = Core und Action Type = Custom Code.

„Hybride“ SPA und traditionelle Sites

Einige Websites bestehen aus einer Kombination von herkömmlichen und SPA Seiten. In diesem Fall sollten Sie eine Strategie verwenden, die für beide Seitentypen funktioniert. Beim Konfigurieren Ihrer benutzerdefinierten Ereignisse auf der Site und dem Auslösen von Regeln in Experience Platform Tags stellen Sie sicher, dass keine doppelten Treffer in Analytics aufgrund von Hash-Änderungen und ähnlichem gesendet werden. Unterdrücken Sie in diesem Fall eine der Seitenansichten, um zu verhindern, dass doppelte Daten an Adobe Analytics übergeben werden.

Wenn Sie sich entscheiden, die Funktionalität in einzelne Regeln aufzuteilen, um mehr Kontrolle zu haben, denken Sie daran, dies zu dokumentieren. Wenn Sie eine Regel ändern, nehmen Sie die gleiche Änderung an der anderen Regel vor.

Integration mit Target über A4T

Bei der Integration mit Target über A4T stellen Sie sicher, dass die Target- und Analytics-Anfragen, die über dieselbe Ansicht oder Aktion gesendet werden, denselben SDID-Parameterwert übergeben. Dadurch wird sichergestellt, dass Ihre Daten im Backend ordnungsgemäß synchronisiert werden.

Verwenden Sie zum Anzeigen dieser Treffer einen Debugger oder ein Tool zur Paketüberwachung. Adobe bietet zu diesem Zweck einen Experience Platform Debugger. Es handelt sich um eine Chrome-Erweiterung, die hier heruntergeladen werden kann. Target sollte zuerst auf der Seite ausgeführt werden. Dies kann auch im Debugger überprüft werden.

Zusätzliche Ressourcen

Auf dieser Seite