Erfassen von Seitendaten mit Adobe Analytics

Erfahren Sie, wie Sie die integrierten Funktionen der Adobe Client-Datenschicht mit AEM Kernkomponenten verwenden können, um Daten zu einer Seite in Adobe Experience Manager Sites zu erfassen. Experience Platform Launch und die Adobe Analytics-Erweiterung werden verwendet, um Regeln zum Senden von Seitendaten an Adobe Analytics zu erstellen. 🔗

Was Sie erstellen werden

Seitendatenverfolgung

In diesem Tutorial erstellen Sie eine Launch-Regel basierend auf einem Ereignis aus der Adobe Client-Datenschicht, fügen Bedingungen für den Zeitpunkt hinzu, zu dem die Regel ausgelöst werden soll, und senden die Seitenname und die Seitenvorlage einer AEM an Adobe Analytics.

Ziele

  1. Erstellen einer ereignisgesteuerten Regel in Launch basierend auf Änderungen an der Datenschicht
  2. Seitendatenschichteigenschaften Datenelementen in Launch zuordnen
  3. Erfassen von Seitendaten und Senden an Adobe Analytics mit dem Seitenansichts-Beacon

Voraussetzungen

Folgendes ist erforderlich:

  • Experience Platform LaunchProperty
  • Report Suite-ID und Tracking-Server für Adobe Analytics-Tests/Entwicklung. Weitere Informationen finden Sie in der folgenden Dokumentation für Erstellen einer neuen Report Suite.
  • Experience Platform Debugger-Browsererweiterung. Screenshots in diesem Tutorial, die aus dem Chrome-Browser erfasst wurden.
  • (Optional) AEM Site mit der aktivierten Adobe Client-Datenschicht 🔗. In diesem Tutorial wird die öffentliche Site https://wknd.site/us/en.html verwendet, Sie können jedoch Ihre eigene Website verwenden.
HINWEIS

Benötigen Sie Hilfe bei der Integration von Launch und Ihrer AEM Site? Siehe diese Videoreihe.

Wechseln von Launch-Umgebungen für WKND-Site

https://wknd. siteis ist eine öffentliche Website, die auf einem Open-Source- Projekt basiert und als Referenz und 🔗 Tutorial für AEM Implementierungen konzipiert ist.

Anstatt eine AEM Umgebung einzurichten und die WKND-Codebasis zu installieren, können Sie den Experience Platform-Debugger zu switch the live https://wknd.site/ zu your Launch-Eigenschaft verwenden. Natürlich können Sie Ihre eigene AEM-Site verwenden, wenn die Adobe Client-Datenschicht bereits aktiviert ist

  1. Melden Sie sich bei Experience Platform Launch an und erstellen Sie eine Launch-Eigenschaft (falls noch nicht geschehen).

  2. Stellen Sie sicher, dass eine erste Launch Bibliothek erstellt und in eine Launch Umgebung weitergeleitet wurde.

  3. Kopieren Sie den Launch-Einbettungscode aus der Umgebung, in der Ihre Bibliothek veröffentlicht wurde.

    Kopieren des eingebetteten Launch-Codes

  4. Öffnen Sie in Ihrem Browser eine neue Registerkarte und navigieren Sie zu https://wknd.site/

  5. Öffnen Sie die Browsererweiterung Experience Platform Debugger .

    Experience Platform Debugger

  6. Navigieren Sie zu Launch > Konfiguration und ersetzen Sie unter Eingefügte Einbettungscodes den vorhandenen Launch-Einbettungscode durch Ihren -Einbettungscode, der aus Schritt 3 kopiert wurde.

    Eingebetteten Code ersetzen

  7. Aktivieren Sie Konsolenprotokollierung und Sperren den Debugger auf der Registerkarte WKND .

    Konsolenprotokollierung

Überprüfen der Adobe Client-Datenschicht auf der WKND-Site

Das WKND-Referenzprojekt wurde mit AEM Kernkomponenten erstellt und verfügt standardmäßig über die Adobe Client-Datenschicht. Überprüfen Sie als Nächstes, ob die Adobe Client-Datenschicht aktiviert ist.

  1. Navigieren Sie zu https://wknd.site.

  2. Öffnen Sie die Entwicklertools des Browsers und navigieren Sie zur Konsole. Führen Sie den folgenden Befehl aus:

    adobeDataLayer.getState();
    

    Dadurch wird der aktuelle Status der Client-Datenschicht der Adobe zurückgegeben.

    Status der Adobe-Datenschicht

  3. Erweitern Sie die Antwort und überprüfen Sie den Eintrag page. Es sollte ein Datenschema wie das folgende angezeigt werden:

    page-2eee4f8914:
        @type: "wknd/components/page"
        dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
        dc:title: "WKND Adventures and Travel"
        repo:modifyDate: "2020-08-31T21:02:21Z"
        repo:path: "/content/wknd/us/en.html"
        xdm:language: "en-US"
        xdm:tags: ["Attract"]
        xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"
    

    Wir verwenden Standardeigenschaften, die aus dem Seitenschema, dc:title, xdm:language und xdm:template der Datenschicht abgeleitet wurden, um Seitendaten an Adobe Analytics zu senden.

    HINWEIS

    Das JavaScript-Objekt adobeDataLayer wird nicht angezeigt? Stellen Sie sicher, dass die Adobe Client Data Layer🔗 auf Ihrer Site aktiviert wurde.

Erstellen einer Regel "Seite geladen"

Die Adobe Client-Datenschicht ist eine event-gesteuerte Datenschicht. Wenn die AEM Seite-Datenschicht geladen wird, wird ein -Ereignis cmp:show Trigger. Erstellen Sie eine Regel, die basierend auf dem cmp:show -Ereignis ausgelöst wird.

  1. Navigieren Sie zu Experience Platform Launch und zur Webeigenschaft, die mit der AEM Site integriert ist.

  2. Navigieren Sie in der Launch-Benutzeroberfläche zum Abschnitt Regeln und klicken Sie dann auf Neue Regel erstellen.

    Regel erstellen

  3. Nennen Sie die Regel Seite geladen.

  4. Klicken Sie auf Ereignisse Hinzufügen , um den Assistenten Ereigniskonfiguration zu öffnen.

  5. Wählen Sie unter Ereignistyp Benutzerspezifischer Code aus.

    Benennen Sie die Regel und fügen Sie das Ereignis für benutzerdefinierten Code hinzu.

  6. Klicken Sie im Hauptbereich auf Editor öffnen und geben Sie das folgende Codefragment ein:

    var pageShownEventHandler = function(evt) {
       // defensive coding to avoid a null pointer exception
       if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
          //trigger Launch Rule and pass event
          console.debug("cmp:show event: " + evt.eventInfo.path);
          var event = {
             //include the path of the component that triggered the event
             path: evt.eventInfo.path,
             //get the state of the component that triggered the event
             component: window.adobeDataLayer.getState(evt.eventInfo.path)
          };
    
          //Trigger the Launch Rule, passing in the new `event` object
          // the `event` obj can now be referenced by the reserved name `event` by other Launch data elements
          // i.e `event.component['someKey']`
          trigger(event);
       }
    }
    
    //set the namespace to avoid a potential race condition
    window.adobeDataLayer = window.adobeDataLayer || [];
    //push the event listener for cmp:show into the data layer
    window.adobeDataLayer.push(function (dl) {
       //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
       dl.addEventListener("cmp:show", pageShownEventHandler);
    });
    

    Das obige Codefragment fügt einen Ereignis-Listener hinzu, indem eine Funktion in die Datenschicht gepusht wird. Wenn das cmp:show-Ereignis ausgelöst wird, wird die Funktion pageShownEventHandler aufgerufen. In dieser Funktion werden einige Integritätsprüfungen hinzugefügt und ein neuer event wird mit dem neuesten Status der Datenschicht für die Komponente erstellt, die das Ereignis ausgelöst hat.

    Danach wird trigger(event) aufgerufen. trigger() ist ein reservierter Name in Launch und "Trigger"für die Launch-Regel. Wir übergeben das event -Objekt als Parameter, der wiederum durch einen anderen reservierten Namen in Launch namens event verfügbar gemacht wird. Datenelemente in Launch können jetzt auf verschiedene Eigenschaften verweisen, z. B.: event.component['someKey'].

  7. Speichern Sie die Änderungen.

  8. Klicken Sie dann unter Aktionen auf Hinzufügen , um den Assistenten Aktionskonfiguration zu öffnen.

  9. Wählen Sie unter Aktionstyp Benutzerspezifischer Code aus.

    Aktionstyp für benutzerspezifischen Code

  10. Klicken Sie im Hauptbereich auf Editor öffnen und geben Sie das folgende Codefragment ein:

    console.debug("Page Loaded ");
    console.debug("Page name: " + event.component['dc:title']);
    console.debug("Page type: " + event.component['@type']);
    console.debug("Page template: " + event.component['xdm:template']);
    

    Das event-Objekt wird von der trigger()-Methode übergeben, die im benutzerdefinierten Ereignis aufgerufen wird. component ist die aktuelle Seite, die von der Datenschicht getState im benutzerdefinierten Ereignis abgeleitet wurde. Erinnern Sie sich an das frühere von der Datenschicht angezeigte Seitenschema, um die verschiedenen standardmäßig angezeigten Schlüssel anzuzeigen.

  11. Speichern Sie die Änderungen und führen Sie einen Build in Launch aus, um den Code in die auf Ihrer AEM Site verwendete Umgebung weiterzuleiten.

    HINWEIS

    Es kann sehr nützlich sein, den Adobe Experience Platform Debugger zu verwenden, um den Einbettungscode in eine Entwicklungsumgebung zu wechseln.

  12. Navigieren Sie zu Ihrer AEM-Site und öffnen Sie die Entwickler-Tools, um die Konsole anzuzeigen. Aktualisieren Sie die Seite. Sie sollten sehen, dass die Konsolenmeldungen protokolliert wurden:

    Seitengeladene Konsolenmeldungen

Erstellen von Datenelementen

Erstellen Sie anschließend mehrere Datenelemente , um andere Werte als die Adobe Client-Datenschicht zu erfassen. Wie wir in der vorherigen Übung gesehen haben, ist es möglich, direkt über benutzerdefinierten Code auf die Eigenschaften der Datenschicht zuzugreifen. Der Vorteil der Verwendung von Datenelementen besteht darin, dass sie über Launch-Regeln hinweg wiederverwendet werden können.

Erinnern Sie sich an das frühere Seitenschema, das von der Datenschicht verfügbar gemacht wird:

Datenelemente werden den Eigenschaften @type, dc:title und xdm:template zugeordnet.

Komponenten-Ressourcentyp

  1. Navigieren Sie zu Experience Platform Launch und zur Webeigenschaft, die mit der AEM Site integriert ist.

  2. Navigieren Sie zum Abschnitt Datenelemente und klicken Sie auf Neues Datenelement erstellen.

  3. Geben Sie für Name Component Resource Type ein.

  4. Wählen Sie für Datenelementtyp Benutzerspezifischer Code aus.

    Komponenten-Ressourcentyp

  5. Klicken Sie auf Editor öffnen und geben Sie Folgendes im Editor für benutzerdefinierten Code ein:

    if(event && event.component && event.component.hasOwnProperty('@type')) {
        return event.component['@type'];
    }
    

    Speichern Sie die Änderungen.

    HINWEIS

    Beachten Sie, dass das event-Objekt basierend auf dem Ereignis, das die Regel in Launch ausgelöst hat, verfügbar gemacht und in den Gültigkeitsbereich gesetzt wird. Der Wert eines Datenelements wird erst festgelegt, wenn das Datenelement innerhalb einer Regel referenced ist. Daher ist es sicher, dieses Datenelement innerhalb einer Regel zu verwenden, wie die Regel Seite geladen , die im vorherigen Schritt erstellt wurde, aber in anderen Kontexten nicht sicher verwendet werden kann.

Seitenname

  1. Klicken Sie auf Datenelement hinzufügen.

  2. Geben Sie für Name Seitenname ein.

  3. Wählen Sie für Datenelementtyp Benutzerspezifischer Code aus.

  4. Klicken Sie auf Editor öffnen und geben Sie Folgendes im Editor für benutzerdefinierten Code ein:

    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    

    Speichern Sie die Änderungen.

Seitenvorlage

  1. Klicken Sie auf Datenelement hinzufügen.

  2. Geben Sie für Name Seitenvorlage ein.

  3. Wählen Sie für Datenelementtyp Benutzerspezifischer Code aus.

  4. Klicken Sie auf Editor öffnen und geben Sie Folgendes im Editor für benutzerdefinierten Code ein:

    if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
        return event.component['xdm:template'];
    }
    

    Speichern Sie die Änderungen.

  5. Sie sollten jetzt drei Datenelemente als Teil Ihrer Regel haben:

    Datenelemente in der Regel

Hinzufügen der Analytics-Erweiterung

Fügen Sie als Nächstes die Analytics-Erweiterung Ihrer Launch-Eigenschaft hinzu. Wir müssen diese Daten irgendwo senden!

  1. Navigieren Sie zu Experience Platform Launch und zur Webeigenschaft, die mit der AEM Site integriert ist.

  2. Gehen Sie zu Erweiterungen > Katalog

  3. Suchen Sie die Erweiterung Adobe Analytics und klicken Sie auf Installieren

    Adobe Analytics-Erweiterung

  4. Geben Sie unter Bibliotheksverwaltung > Report Suites die Report Suite-IDs ein, die Sie für jede Launch-Umgebung verwenden möchten.

    Report Suite-IDs eingeben

    HINWEIS

    In diesem Tutorial können Sie eine Report Suite für alle Umgebungen verwenden. In der Praxis sollten Sie jedoch separate Report Suites verwenden, wie in der Abbildung unten dargestellt

    TIPP

    Es wird empfohlen, die Option Bibliothek für mich verwalten als Einstellung für die Bibliotheksverwaltung zu verwenden, da es wesentlich einfacher ist, die Bibliothek AppMeasurement.js auf dem neuesten Stand zu halten.

  5. Aktivieren Sie das Kontrollkästchen, um Activity Map zu aktivieren.

    Verwenden von Activity Map aktivieren

  6. Geben Sie unter Allgemein > Tracking-Server Ihren Tracking-Server ein, z. B. tmd.sc.omtrdc.net. Geben Sie Ihren SSL-Tracking-Server ein, wenn Ihre Site https:// unterstützt.

    Trackingserver eingeben

  7. Klicken Sie auf Speichern, um die Änderungen zu speichern.

Hinzufügen einer Bedingung zur Regel "Seite geladen"

Aktualisieren Sie anschließend die Regel Seite geladen , um das Datenelement Komponentenressourcentyp zu verwenden, um sicherzustellen, dass die Regel nur ausgelöst wird, wenn das cmp:show-Ereignis für Seite gilt. Andere Komponenten können das cmp:show-Ereignis auslösen, z. B. löst die Karussellkomponente es aus, wenn sich die Folien ändern. Daher ist es wichtig, eine Bedingung für diese Regel hinzuzufügen.

  1. Navigieren Sie in der Launch-Benutzeroberfläche zur Regel Seite geladen , die Sie zuvor erstellt haben.

  2. Klicken Sie unter Conditions auf Hinzufügen , um den Assistenten Bedingungskonfiguration zu öffnen.

  3. Wählen Sie für Bedingungstyp Wertvergleich aus.

  4. Setzen Sie den ersten Wert im Formularfeld auf %Component Resource Type%. Sie können das Datenelementsymbol Datenelementsymbol verwenden, um das Datenelement Komponentenressourcentyp auszuwählen. Belassen Sie den Vergleichssatz auf Equals.

  5. Setzen Sie den zweiten Wert auf wknd/components/page.

    Bedingungskonfiguration für Seitenladeregel

    HINWEIS

    Sie können diese Bedingung innerhalb der benutzerdefinierten Code-Funktion hinzufügen, die auf das zuvor im Tutorial erstellte cmp:show-Ereignis wartet. Das Hinzufügen der Regel innerhalb der Benutzeroberfläche bietet zusätzlichen Benutzern mehr Sichtbarkeit, die möglicherweise Änderungen an der Regel vornehmen müssen. Außerdem können wir unser Datenelement verwenden!

  6. Speichern Sie die Änderungen.

Analytics-Variablen und Trigger-Seitenansichts-Beacon festlegen

Derzeit gibt die Regel Seite geladen einfach eine Konsolenanweisung aus. Verwenden Sie als Nächstes die Datenelemente und die Analytics-Erweiterung, um Analytics-Variablen als action in der Regel Seite geladen festzulegen. Wir werden außerdem eine zusätzliche Aktion einrichten, um den Seitenansichts-Beacon Trigger und die erfassten Daten an Adobe Analytics zu senden.

  1. In der Regel Seite geladen Entfernen die Aktion Core - Benutzerspezifischer Code (die Konsolenanweisungen):

    Aktion für benutzerdefinierten Code entfernen

  2. Klicken Sie unter "Aktionen"auf Hinzufügen , um eine neue Aktion hinzuzufügen.

  3. Setzen Sie den Typ Erweiterung auf Adobe Analytics und setzen Sie Aktionstyp auf Variablen festlegen

    Aktionserweiterung auf Analytics-Variablen festlegen

  4. Wählen Sie im Hauptbereich ein verfügbares eVar aus und legen Sie als Wert des Datenelements Seitenvorlage fest. Verwenden Sie das Symbol Datenelemente Symbol Datenelemente, um das Element Seitenvorlage auszuwählen.

    Als eVar-Seitenvorlage festlegen

  5. Scrollen Sie nach unten unter Weitere Einstellungen Seitenname auf das Datenelement Seitenname:

    Umgebungsvariablensatz für Seitenname

    Speichern Sie die Änderungen.

  6. Fügen Sie anschließend eine zusätzliche Aktion rechts neben Adobe Analytics - Variablen festlegen hinzu, indem Sie auf das Symbol plus tippen:

    Hinzufügen einer zusätzlichen Launch-Aktion

  7. Setzen Sie den Typ Erweiterung auf Adobe Analytics und setzen Sie Aktionstyp auf Beacon senden. Da dies als Seitenansicht gilt, lassen Sie den standardmäßigen Tracking-Satz auf s.t().

    Aktion "Beacon Adobe Analytics senden"

  8. Speichern Sie die Änderungen. Die Regel Seite geladen sollte jetzt die folgende Konfiguration aufweisen:

    Abschließende Launch-Konfiguration

    • 1. Suchen Sie nach dem cmp:show Ereignis.
    • 2. Überprüfen Sie, ob das Ereignis von einer Seite ausgelöst wurde.
    • 3. Analytics-Variablen für Seitennamen und Seitenvorlage festlegen
    • 4. Senden des Analytics-Beacons für die Seitenansicht
  9. Speichern Sie alle Änderungen und erstellen Sie Ihre Launch-Bibliothek, indem Sie sie in die entsprechende Umgebung weiterleiten.

Überprüfen des Seitenansichts-Beacons- und Analytics-Aufrufs

Nachdem die Regel Seite geladen das Analytics-Beacon sendet, sollten Sie die Analytics-Tracking-Variablen mit dem Experience Platform Debugger sehen können.

  1. Öffnen Sie die WKND-Site in Ihrem Browser.

  2. Klicken Sie auf das Debugger-Symbol Experience Platform Debugger-Symbol, um den Experience Platform Debugger zu öffnen.

  3. Stellen Sie sicher, dass der Debugger die Launch-Eigenschaft Ihrer Entwicklungsumgebung zuordnet, wie zuvor beschrieben, und Konsolenprotokollierung aktiviert ist.

  4. Öffnen Sie das Menü Analytics und überprüfen Sie, ob die Report Suite auf Ihre Report Suite eingestellt ist. Der Seitenname sollte ebenfalls angegeben werden:

    Analytics-Tab-Debugger

  5. Scrollen Sie nach unten und erweitern Sie Netzwerkanforderungen. Sie sollten die evar-Einstellung für Seitenvorlage finden:

    eVar- und Seitenname-Satz

  6. Kehren Sie zum Browser zurück und öffnen Sie die Entwicklerkonsole. Klicken Sie oben auf der Seite durch das Karussell.

    Karussellseite durchklicken

  7. Beobachten Sie in der Browser-Konsole die Konsolenanweisung:

    Bedingung nicht erfüllt

    Dies liegt daran, dass das Karussell ein cmp:show-Ereignis aber Trigger, da wir den Komponenten-Ressourcentyp überprüfen, wird kein Ereignis ausgelöst.

    HINWEIS

    Wenn keine Konsolenprotokolle angezeigt werden, stellen Sie sicher, dass Konsolenprotokollierung im Experience Platform Debugger unter Launch aktiviert ist.

  8. Navigieren Sie zu einer Artikelseite wie Westaustralien. Beachten Sie, dass sich Seitenname und Vorlagentyp ändern.

Herzlichen Glückwunsch!

Sie haben soeben die ereignisbasierte Adobe Client Data Layer and Experience Platform Launch verwendet, um Daten von einer AEM Site zu erfassen und an Adobe Analytics zu senden.

Nächste Schritte

Sehen Sie sich das folgende Tutorial an, um zu erfahren, wie Sie die ereignisgesteuerte Adobe Client Data-Schicht verwenden können, um Klicks auf bestimmte Komponenten auf einer Adobe Experience Manager-Site🔗 zu verfolgen.

Auf dieser Seite