Best Practices für die Implementierung von Einzelseiten-Programmen (SPA) implementation-best-practices-for-single-page-appliations

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:

Einfaches Diagramm zum Arbeiten mit SPAs in Experience Platform Tags simple-diagram-of-working-with-spas-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 set-the-data-layer

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 setting-custom-events-and-listening-in-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.

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:

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 running-s-t-or-s-tl-in-the-launch-rule

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.

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 clear-variables

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 additional-considerations

Fenster mit benutzerdefiniertem Code in Experience Platform Tags custom-code-windows-in-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.

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 hybrid-spa-and-traditional-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 integration-with-target-using-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 additional-resources