Nachverfolgen angeklickter Komponenten mit Adobe Analytics

Navigieren Sie zur WKND-Startseite

Ö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 suchen Sie nach Einträgen mit dem Präfix button- und dem Eintrag teaser-xyz-cta. Es sollte ein Datenschema wie das folgende angezeigt werden:

Schaltflächenschema:

button-2e6d32893a:
    @type: "wknd/components/button"
    dc:title: "View All"
    parentId: "page-2eee4f8914"
    repo:modifyDate: "2020-07-11T22:17:55Z"
    xdm:linkURL: "/content/wknd/us/en/magazine.html"

Teaser-Schema:

teaser-da32481ec8-cta-adf3c09db9:
    @type: "wknd/components/teaser/cta"
    dc:title: "Surf's Up"
    parentId: "teaser-da32481ec8"
    xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"

Die obigen Datendetails basieren auf der Variablen Komponenten-/Container-Element-Schema. Die neue Tag-Regel verwendet dieses Schema.

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 der Tag-Eigenschaften und klicken Sie dann auf Regel hinzufügen.

Benennen Sie die Regel CTA-Geklickt.

Klicken Sie auf Events > Hinzufügen, um den Assistenten Event-Konfiguration zu öffnen.

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

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

var componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Tag Rule and pass event
      console.debug("cmp:click 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 Property 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:click into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:click` and callback to the `componentClickedHandler` function
   dl.addEventListener("cmp:click", componentClickedHandler);
});

Das obige Codesnippet fügt einen Ereignis-Listener hinzu, indem es eine Funktion in die Datenschicht schiebt. Jedes Mal, wenn das cmp:click-Ereignis ausgelöst wird, wird die Funktion componentClickedHandler aufgerufen. In dieser Funktion werden einige Integritätsprüfungen hinzugefügt und ein neues event-Objekt mit dem letzten Zustand der Datenschicht für die Komponente, die das Ereignis ausgelöst hat, konstruiert.

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.debug("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);

Das event-Objekt wird von der trigger()-Methode übergeben, die in dem benutzerdefinierten Ereignis aufgerufen wird. Das component-Objekt ist der aktuelle Zustand der Komponente, die von der getState()-Methode der Datenschicht abgeleitet wurde, und ist das Element, das den Klick ausgelöst hat.

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

Navigieren Sie zur WKND Site und öffnen Sie die Entwickler-Tools, um die Konsole anzuzeigen. Aktivieren Sie zudem das Kontrollkästchen Protokoll beibehalten.

Klicken Sie auf eine der CTA-Schaltflächen Teaser oder Schaltfläche, um zu einer anderen Seite zu navigieren.

Beachten Sie in der Entwicklerkonsole, dass die Regel CTA-Geklickt ausgelöst wurde:

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 hinzufügen.

In das Feld Name geben Sie Komponenten-ID ein.

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

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

if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}

Speichern Sie die Änderungen.

Navigieren Sie zum Abschnitt Datenelemente und klicken Sie auf Neues Datenelement hinzufügen.

In das Feld Name geben Sie Komponententitel ein.

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

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('dc:title')) {
    return event.component['dc:title'];
}

Speichern Sie die Änderungen.

Navigieren Sie in der Benutzeroberfläche der Tag-Eigenschaft zur CTA-Geklickt-Regel, die zuvor erstellt wurde.

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

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

Klicken Sie auf Editor öffnen und geben Sie Folgendes in den Editor für benutzerdefinierten Code ein:

if(event && event.component && event.component.hasOwnProperty('@type')) {
    // console.log("Event Type: " + event.component['@type']);
    //Check for Button Type OR Teaser CTA type
    if(event.component['@type'] === 'wknd/components/button' ||
       event.component['@type'] === 'wknd/components/teaser/cta') {
        return true;
    }
}

// none of the conditions are met, return false
return false;

Der obige Code prüft zunächst, ob der Ressourcentyp von einer Schaltfläche oder von einem CTA in einem Teaser stammt.

Speichern Sie die Änderungen.

In der CTA-Geklickt-Regel, entfernen Sie die Aktion Kern – Benutzerdefinierter Code (die Konsolenmeldungen):

Klicken Sie unter Aktionen auf Hinzufügen, um eine Aktion zu erstellen.

Legen Sie den Typ Erweiterung auf Adobe Analytics und den Aktionstyp auf Variablen festlegen fest.

Legen Sie die folgenden Werte für eVars, Props, und Ereignisse fest:

• evar8 - %Component ID%
• prop8 - %Component ID%
• event8

Als Nächstes fügen Sie eine zusätzliche Aktion rechts neben Adobe Analytics – Variablen festlegen hinzu, indem Sie auf das Plus-Symbol tippen:

Legen Sie den Typ Erweiterung auf Adobe Analytics und den Aktionstyp auf Beacon senden fest.

Setzen Sie unter Tracking das Optionsfeld auf s.tl().

Für das Feld Link-Typ wählen Sie Benutzerdefinierter Link und für Link-Name setzen Sie den Wert auf: %Component Title%: CTA Clicked:

Die obige Konfiguration kombiniert die dynamische Variable aus dem Datenelement Komponententitel und die statische Zeichenfolge CTA-Geklickt.

Speichern Sie die Änderungen. Die CTA-Geklickt-Regel sollte jetzt die folgende Konfiguration aufweisen:

• 1. Lauschen Sie auf das Ereignis cmp:click.
• 2. Überprüfen Sie, ob das Ereignis durch eine Schaltfläche oder Teaser ausgelöst wurde.
• 3. Legen Sie Analytics-Variablen fest, um die Komponenten-ID als eVar, Prop und ein Ereignis zu verfolgen.
• 4. Senden Sie den Analytics Verfolgungs-Link-Beacon ab (und behandeln Sie ihn nicht wie einen Seitenaufruf).

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 die Konsolenprotokollierung aktiviert ist.

Öffnen Sie das Analytics-Menü und überprüfen Sie, ob die Report Suite auf Ihre Report Suite festgelegt ist.

Klicken Sie im Browser auf eine der Teaser- oder Schaltfläche-CTA-Schaltflächen, um zu einer anderen Seite zu navigieren.

Kehren Sie zum Experience Platform Debugger zurück, scrollen Sie nach unten und erweitern Sie Netzwerkanfragen > Ihre Report Suite. Sie sollten feststellen können, dass eVar, prop und event festgelegt sind.

Kehren Sie zum Browser zurück und öffnen Sie die Entwicklungskonsole. Navigieren Sie zur Fußzeile der Site und klicken Sie auf einen der Navigations-Links:

Beachten Sie in der Browser-Konsole die Nachricht „Benutzerspezifischer Code“ für Regel „CTA angeklickt“ wurde nicht erfüllt.

Die obige Meldung wird angezeigt, weil die Navigationskomponente ein cmp:click-Ereignis auslöst, aber wegen Bedingung für die Regel, das den Ressourcentyp überprüft, wird keine Aktion ausgeführt.