Verfolgen geklickter Komponenten mit Adobe Analytics

Ereignisgesteuert verwenden Adobe der Client-Datenschicht mit AEM Kernkomponenten , um Klicks auf bestimmte Komponenten auf einer Adobe Experience Manager-Site zu verfolgen. Erfahren Sie, wie Sie Regeln in Experience Platform Launch verwenden, um Klick-Ereignisse zu überwachen, nach Komponenten zu filtern und die Daten mit einem Verfolgungs-Linkbeacon an Adobe Analytics zu senden.

Was Sie erstellen werden

Das WKND-Marketing-Team möchte wissen, welche Aktionsaufruf-Schaltflächen (CTA) die beste Leistung auf der Startseite erzielen. In diesem Tutorial fügen wir eine neue Regel in Experience Platform Launch hinzu, die auf Folgendes überwacht: cmp:click Ereignisse aus Teaser und Schaltfläche Komponenten und senden Sie die Komponenten-ID und ein neues Ereignis zusammen mit dem Verfolgungslink-Beacon an Adobe Analytics.

Was Sie für Tracking-Klicks erstellen werden

Ziele

  1. Erstellen Sie eine ereignisbasierte Regel in Launch basierend auf der cmp:click -Ereignis.
  2. Filtern Sie die verschiedenen Ereignisse nach Komponenten-Ressourcentyp.
  3. Legen Sie die angeklickte Komponenten-ID fest und senden Sie das Ereignis Adobe Analytics mit dem Verfolgungslink-Beacon.

Voraussetzungen

Dieses Tutorial stellt eine Fortsetzung von Erfassen von Seitendaten mit Adobe Analytics und geht davon aus, dass Sie über Folgendes verfügen:

Inspect des Schaltflächen- und Teaser-Schemas

Bevor Sie Regeln in Launch erstellen, sollten Sie die Schema für Schaltfläche und Teaser und überprüfen Sie sie in der Datenschichtimplementierung.

  1. Navigieren Sie zu https://wknd.site/us/en.html

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

    adobeDataLayer.getState();
    

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

    Status der Datenschicht über die Browser-Konsole

  3. Erweitern Sie die Antwort und suchen Sie Einträge mit dem Präfix button- und teaser-xyz-cta eingeben. 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"
    

    Diese basieren auf der Komponenten-/Container-Element-Schema. Die Regel, die wir in Launch erstellen, verwendet dieses Schema.

Erstellen einer auf CTA geklickten Regel

Die Adobe Client-Datenschicht ist eine event gesteuerte Datenschicht. Wenn auf eine Kernkomponente geklickt wird, wird ein cmp:click -Ereignis über die Datenschicht gesendet. Erstellen Sie als Nächstes eine Regel, die auf die cmp:click -Ereignis.

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

  2. Navigieren Sie zum Regeln in der Launch-Benutzeroberfläche und klicken Sie dann auf Regel hinzufügen.

  3. Benennen Sie die Regel. CTA angeklickt.

  4. Klicken Veranstaltungen > Hinzufügen , um Ereigniskonfiguration Assistent.

  5. under Ereignistyp select Benutzerspezifischer Code.

    Benennen Sie die Regel CTA Angeklickt und fügen Sie das benutzerspezifische Code-Ereignis hinzu.

  6. Klicken Editor öffnen Geben Sie im Hauptbereich das folgende Codefragment ein:

    var componentClickedHandler = 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: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 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: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 Codefragment fügt einen Ereignis-Listener hinzu von Pushen einer Funktion in die Datenschicht ein. Wenn die cmp:click -Ereignis ausgelöst wird, wird die componentClickedHandler aufgerufen. In dieser Funktion werden einige Sanitätsprüfungen hinzugefügt und ein neuer event -Objekt wird mit der neuesten Status der Datenschicht für die Komponente, die das Ereignis ausgelöst hat.

    Danach trigger(event) aufgerufen wird. trigger() ist ein reservierter Name in Launch und "Trigger"die Launch-Regel. Wir überholen die event -Objekt als Parameter, der wiederum von einem anderen reservierten Namen in Launch mit dem Namen event. Datenelemente in Launch können jetzt auf verschiedene Eigenschaften verweisen, z. B.: event.component['someKey'].

  7. Speichern Sie die Änderungen.

  8. Nächste unter Aktionen click Hinzufügen , um Aktionskonfiguration Assistent.

  9. under Aktionstyp Auswählen Benutzerspezifischer Code.

    Aktionstyp für benutzerspezifischen Code

  10. Klicken Editor öffnen Geben Sie im Hauptbereich das folgende Codefragment 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']);
    

    Die event -Objekt wird von der trigger() -Methode, die im benutzerspezifischen Ereignis aufgerufen wird. component ist der aktuelle Status der aus der Datenschicht abgeleiteten Komponente getState , der den Klick ausgelöst hat.

  11. Speichern Sie die Änderungen und führen Sie eine build in Launch , um den Code für die Umgebung verwendet auf Ihrer AEM Site.

    HINWEIS

    Es kann sehr nützlich sein, die Adobe Experience Platform Debugger , um den Einbettungscode in einen Entwicklung Umgebung.

  12. Navigieren Sie zum WKND-Site und öffnen Sie die Entwickler-Tools, um die Konsole anzuzeigen. Auswählen Protokoll beibehalten.

  13. Klicken Sie auf einen der Teaser oder Schaltfläche CTA-Schaltflächen zum Navigieren zu einer anderen Seite.

    CTA-Schaltfläche zum Klicken

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

    CTA-Schaltfläche angeklickt

Datenelemente erstellen

Erstellen Sie anschließend ein Datenelement , um die Komponenten-ID und den Titel zu erfassen, auf die geklickt wurde. Erinnern Sie sich in der vorherigen Übung an die Ergebnisse von event.path etwas Ähnliches war component.button-b6562c963d und der Wert von event.component['dc:title'] war so etwas wie “Ausflüge ansehen”.

Komponenten-ID

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

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

  3. Für Name enter Komponenten-ID.

  4. Für Datenelementtyp select Benutzerspezifischer Code.

    Komponenten-ID-Datenelementformular

  5. Klicken Editor öffnen und geben Sie Folgendes im Editor für benutzerdefinierten Code 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.

    HINWEIS

    Erinnern Sie sich daran, dass die event -Objekt wird basierend auf dem Ereignis, das die Regel in Launch. Der Wert eines Datenelements wird erst festgelegt, wenn das Datenelement referenziert innerhalb einer Regel. Daher ist es sicher, dieses Datenelement innerhalb einer Regel wie die CTA angeklickt in der vorherigen Übung erstellte Regel but in anderen Kontexten nicht sicher verwendet werden.

Komponentenname

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

  2. Für Name enter Komponententitel.

  3. Für Datenelementtyp select Benutzerspezifischer Code.

  4. Klicken 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.

Hinzufügen einer Bedingung zur Regel "CTA angeklickt"

Aktualisieren Sie anschließend die CTA angeklickt -Regel, um sicherzustellen, dass die Regel nur ausgelöst wird, wenn die cmp:click -Ereignis ausgelöst wird für eine Teaser oder Schaltfläche. Da der CTA des Teasers als separates Objekt in der Datenschicht betrachtet wird, ist es wichtig, das übergeordnete Element zu überprüfen, um sicherzustellen, dass es von einem Teaser stammt.

  1. Navigieren Sie in der Launch-Benutzeroberfläche zum CTA angeklickt Regel, die zuvor erstellt wurde.

  2. under Bedingungen click Hinzufügen , um Bedingungskonfiguration Assistent.

  3. Für Bedingungstyp select Benutzerspezifischer Code.

    CTA angeklickter benutzerdefinierter Code für Bedingung

  4. Klicken Editor öffnen und geben Sie Folgendes im 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 und überprüft dann, ob der Ressourcentyp aus einem CTA in einer Teaser.

  5. Speichern Sie die Änderungen.

Derzeit ist das CTA angeklickt -Regel gibt einfach eine Konsolenanweisung aus. Verwenden Sie als Nächstes die Datenelemente und die Analytics-Erweiterung, um Analytics-Variablen als action. Wir werden auch zusätzliche Maßnahmen zum Trigger der Link verfolgen und senden Sie die erfassten Daten an Adobe Analytics.

  1. Im CTA angeklickt Regel remove die Core - benutzerspezifischer Code action (die Konsolenanweisungen):

    Aktion für benutzerdefinierten Code entfernen

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

  3. Legen Sie die Erweiterung type to Adobe Analytics und legen Sie die Aktionstyp nach Variablen festlegen.

  4. Legen Sie die folgenden Werte für eVars, Props und Veranstaltungen:

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

    Festlegen von eVar-Prop- und -Ereignissen

    HINWEIS

    Hier %Component ID% verwendet wird, da dadurch eine eindeutige Kennung für den angeklickten CTA sichergestellt wird. Ein potenzieller Nachteil bei der Verwendung von %Component ID% ist, dass der Analytics-Bericht Werte wie button-2e6d32893a. Verwenden %Component Title% würde einen benutzerfreundlicheren Namen geben, aber der Wert ist möglicherweise nicht eindeutig.

  5. Fügen Sie anschließend rechts neben dem Adobe Analytics - Variablen festlegen durch Tippen auf plus Symbol:

    Hinzufügen einer zusätzlichen Launch-Aktion

  6. Legen Sie die Erweiterung type to Adobe Analytics und legen Sie die Aktionstyp nach Signal senden.

  7. under Tracking Setzen Sie das Optionsfeld auf s.tl().

  8. Für Link-Typ Auswählen Benutzerspezifischer Link und Linkname Setzen Sie den Wert auf: %Component Title%: CTA Clicked:

    Konfiguration für das Signal "Link senden"

    Dadurch wird die dynamische Variable aus dem Datenelement kombiniert. Komponententitel und die statische Zeichenfolge CTA angeklickt.

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

    Abschließende Launch-Konfiguration

    • 1. Suchen Sie nach cmp:click -Ereignis.
    • 2. Überprüfen Sie, ob das Ereignis durch eine Schaltfläche oder Teaser.
    • 3. Legen Sie Analytics-Variablen für fest, um die Komponenten-ID als eVar, prop und ein event.
    • 4. Senden des Analytics-Beacons "Link verfolgen"(und führen Sie not behandelt es als Seitenansicht).
  10. Speichern Sie alle Änderungen und erstellen Sie Ihre Launch-Bibliothek, indem Sie sie in die entsprechende Umgebung weiterleiten.

Nun, dass CTA angeklickt sendet das Analytics-Beacon. Sie sollten 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 zu Ihre Entwicklungsumgebung, wie zuvor beschrieben und Konsolenprotokollierung aktiviert ist.

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

    Analytics-Tab-Debugger

  5. Klicken Sie im Browser auf einen der Teaser oder Schaltfläche CTA-Schaltflächen zum Navigieren zu einer anderen Seite.

    CTA-Schaltfläche zum Klicken

  6. Kehren Sie zum Experience Platform Debugger zurück, scrollen Sie nach unten und erweitern Sie Netzwerkanforderungen > Ihre Report Suite. Sie sollten die eVar, prop und event gesetzt.

    Analytics-Ereignisse, eVar und beim Klick verfolgte Eigenschaften

  7. Kehren Sie zum Browser zurück und öffnen Sie die Entwicklerkonsole. Navigieren Sie zur Fußzeile der Site und klicken Sie auf einen der Navigationslinks:

    Klicken Sie in der Fußzeile auf den Link Navigation .

  8. In der Browser-Konsole die Nachricht beobachten "Benutzerspezifischer Code"für Regel "CTA angeklickt"wurde nicht erfüllt.

    Dies liegt daran, dass die Navigationskomponente den Trigger einer cmp:click event but weil wir den gegen den Ressourcentyp überprüfen, wird keine Aktion durchgeführt.

    HINWEIS

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

Herzlichen Glückwunsch!

Sie haben soeben die ereignisgesteuerte Adobe Client Data Layer und den Experience Platform Launch verwendet, um Klicks auf bestimmte Komponenten auf einer Adobe Experience Manager-Site zu verfolgen.

Auf dieser Seite