Integrieren von AEM Sites und Adobe Analytics

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

Stellen Sie sicher, dass eine anfängliche Tag-JavaScript-Bibliothek erstellt und in die Tag-Umgebung weitergeleitet wurde.

Kopieren Sie den JavaScript-Einbettungs-Code aus der Tag-Umgebung, in der Ihre Bibliothek veröffentlicht wurde.

Öffnen Sie in Ihrem Browser eine neue Registerkarte und navigieren Sie zur WKND-Site

Öffnen Sie die Experience Platform Debugger-Browser-Erweiterung.

Navigieren Sie zu Experience Platform Tags > Konfiguration und ersetzen Sie unter Eingeführte Einbettungs-Codes den vorhandenen Einbettungs-Code durch Ihren Einbettungs-Code, der aus Schritt 3 kopiert wurde.

Aktivieren Sie die Konsolenprotokollierung und sperren Sie den Debugger auf der WKND-Registerkarte.

Navigieren Sie zur WKND-Site.

Öffnen Sie die Entwickler-Tools des Browsers und navigieren Sie zur Konsole. Führen Sie den folgenden Befehl aus:

adobeDataLayer.getState();

Der obige Code gibt den aktuellen Status der Adobe Client-Datenschicht zurück.

Erweitern Sie die Antwort und überprüfen Sie den page-Eintrag. 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"

Verwenden Sie zum Senden von Seitendaten an Adobe Analytics die Standardeigenschaften wie dc:title, xdm:language und xdm:template der Datenschicht.

Weitere Informationen finden Sie unter dem Seitenschema aus den Datenschemata der Kernkomponenten.

Navigieren Sie zu Experience Platform und zur Tag-Eigenschaft, die mit der AEM-Site integriert ist.

Navigieren Sie zum Abschnitt Regeln in der Benutzeroberfläche „Tag-Eigenschaft“ auf und klicken Sie auf Neue Regel erstellen.

Benennen Sie die Regel Seite geladen.

Klicken Sie im Unterabschnitt Veranstaltungen auf Hinzufügen, um den Ereigniskonfiguration-Assistenten zu öffnen.

Für das Feld Ereignistyp wählen Sie Benutzerspezifischer Code.

Klicken Sie im Hauptbedienfeld auf Editor öffnen und geben Sie das folgende Codesnippet ein:

var pageShownEventHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger the Tag Rule and pass event
      console.log("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 Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag 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 Codesnippet fügt einen Ereignis-Listener hinzu, indem es eine Funktion in die Datenschicht schiebt. Wenn das cmp:show-Ereignis ausgelöst wird, wird die pageShownEventHandler-Funktion aufgerufen. In dieser Funktion werden einige Konsistenzprüfungen hinzugefügt und ein neues event wird mit dem neuesten Status der Datenschicht für die Komponente erstellt, die das Ereignis ausgelöst hat.

Schließlich wird die Funktion trigger(event) aufgerufen. Die Funktion trigger() ist ein reservierter Name in der Tag-Eigenschaft und löst die Regel aus. Das event-Objekt wird als Parameter übergeben, der wiederum durch einen anderen reservierten Namen in der Tag-Eigenschaft verfügbar gemacht wird. Datenelemente in der Tag-Eigenschaft können jetzt auf verschiedene Eigenschaften verweisen, indem sie Codesnippets wie event.component['someKey'] verwenden.

Speichern Sie die Änderungen.

Klicken Sie anschließend unter Aktionen auf Hinzufügen, um den Assistenten Aktionskonfiguration zu öffnen.

Für das Feld Aktionstyp wählen Sie Benutzerdefinierter Code.

Klicken Sie im Hauptbedienfeld auf Editor öffnen und geben Sie das folgende Codesnippet ein:

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

Das event-Objekt wird von der trigger()-Methode übergeben, die in dem benutzerdefinierten Ereignis aufgerufen wird. Hier ist die component die aktuelle von der Datenschicht getState abgeleitete Seite im benutzerspezifischen Ereignis.

Speichern Sie die Änderungen und führen Sie einen Build in der Tag-Eigenschaft durch, um den Code in die Umgebung zu übertragen, die auf Ihrer AEM-Site verwendet wird.

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:

Navigieren Sie zu Experience Platform und zur Tag-Eigenschaft, die mit der AEM-Site integriert ist.

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

Tragen Sie im Feld Name den Komponenten-Ressourcentyp ein.

Wählen Sie im Feld Datenelementtyp Benutzerspezifischer Code aus.

Klicken Sie auf die Schaltfläche Editor öffnen und geben Sie den folgenden Code in den benutzerdefinierten Code-Editor ein:

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

Speichern Sie die Änderungen.

Klicken Sie auf die Schaltfläche Datenelement hinzufügen

Tragen Sie im Feld Name Seitenname ein.

Wählen Sie im Feld Datenelementtyp Benutzerspezifischer Code aus.

Klicken Sie auf die Schaltfläche 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.

Klicken Sie auf die Schaltfläche Datenelement hinzufügen

Tragen Sie im Feld Name Seitenvorlage ein.

Wählen Sie im Feld Datenelementtyp Benutzerspezifischer Code aus.

Klicken Sie auf die Schaltfläche 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.

Sie sollten jetzt drei Datenelemente als Teil Ihrer Regel haben:

Navigieren Sie zu Experience Platform und zur Tag-Eigenschaft, die mit der AEM-Site integriert ist.

Navigieren Sie zu Erweiterungen > Katalog

Suchen Sie die Adobe Analytics-Erweiterung und klicken Sie auf Installieren

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

Aktivieren Sie das Kontrollkästchen, um die Option Activity Map verwenden zu aktivieren.

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

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

Navigieren Sie in der Benutzeroberfläche der Tag-Eigenschaft zur zuvor erstellten Regel Seite geladen.

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

Wählen Sie im Feld Bedingungstyp die Option Wertvergleich.

Setzen Sie den ersten Wert im Formularfeld auf %Component Resource Type%. Sie können das Datenelementsymbol zur Auswahl des Komponenten-Ressourcentyp-Datenelements verwenden. Belassen Sie den Vergleichsoperator auf Equals.

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

Speichern Sie die Änderungen.

Entfernen Sie in der Regel „Seite geladen“ die Aktion Kern – benutzerspezifischer Code (die Konsolenanweisungen):

Klicken Sie unter dem Unterabschnitt „Aktionen“ auf Hinzufügen, um eine neue Aktion hinzuzufügen.

Legen Sie den Erweiterungstyp auf Adobe Analytics und die Aktionstyp auf Variablen festlegen fest

Wählen Sie im Hauptbedienfeld eine verfügbare eVar und legen Sie als Wert des Datenelements Seitenvorlage fest. Verwenden Sie das Datenelementsymbol zur Auswahl des Seitenvorlage-Elements.

Scrollen Sie nach unten und legen Sie unter Zusätzliche Einstellungen den Seitennamen auf das Datenelement Seitenname fest:

Speichern Sie die Änderungen.

Fügen Sie als Nächstes rechts neben Adobe Analytics – Variablen festlegen durch Tippen auf das Plus-Symbol eine zusätzliche Aktion hinzu:

Legen Sie den Erweiterungstyp auf Adobe Analytics und den Aktionstyp auf Beacon senden fest. Da diese Aktion als Seitenansicht gilt, belassen Sie das standardmäßige Tracking auf s.t().

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

• 1. Lauschen Sie auf das Ereignis cmp:show.
• 2. Überprüfen Sie, ob das Ereignis von einer Seite ausgelöst wurde.
• 3. Legen Sie Analytics-Variablen für den Seitennamen und die Seitenvorlage fest.
• 4. Senden Sie den Analytics-Seitenansichts-Beacon.

Speichern Sie alle Änderungen und erstellen Sie Ihre Tag-Bibliothek, indem Sie sie an die entsprechende Umgebung weiterleiten.

Öffnen Sie die WKND-Site in Ihrem Browser.

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

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

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

Scrollen Sie nach unten und erweitern Sie Netzwerkanfragen. Unter eVar sollte die Seitenvorlage festgelegt sein:

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

Sehen Sie sich in der Browser-Konsole die Konsolenanweisung an:

Dies liegt daran, dass das Karussell ein cmp:show-Ereignis auslöst, aber weil wir den Komponenten-Ressourcentyp festgelegt haben, wird kein Ereignis ausgelöst.

Navigieren Sie zu einer Artikelseite wie West Australia. Sie werden feststellen, dass sich Seitenname und Vorlagentyp ändern.