Spåra klickade komponenter med Adobe Analytics

Navigera till WKND - startsida

Öppna webbläsarens utvecklarverktyg och gå till Konsol. Kör följande kommando:

adobeDataLayer.getState();

Ovanför kod returnerar det aktuella läget för Adobe-klientdatalagret.

Expandera svaret och hitta poster som har prefixet button- och teaser-xyz-cta post. Du bör se ett dataschema som följande:

Knappschema:

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"

Ovanstående datainformation baseras på Komponent-/behållarobjektschema. Den nya taggregeln använder det här schemat.

Navigera till Experience Platform och till taggegenskapen som är integrerad med AEM.

Navigera till Regler i taggegenskapsgränssnittet och klicka sedan på Lägg till regel.

Namnge regeln CTA klickat.

Klicka Händelser > Lägg till för att öppna Händelsekonfiguration guide.

För Händelsetyp fält, markera Egen kod.

Klicka Öppna redigeraren i huvudpanelen och ange följande kodfragment:

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);
});

Ovanstående kodfragment lägger till en händelseavlyssnare med trycka en funktion till datalagret. När cmp:click -händelsen aktiveras componentClickedHandler funktionen anropas. I den här funktionen läggs några säkerhetskontroller till och en ny event objektet har skapats med den senaste datalagrets läge för komponenten som utlöste händelsen.

Äntligen trigger(event) funktionen anropas. The trigger() funktionen är ett reserverat namn i taggegenskapen och den utlösare regeln. The event objektet skickas som en parameter som i sin tur visas med ett annat reserverat namn i taggegenskapen. Dataelement i taggegenskapen kan nu referera till olika egenskaper med hjälp av kodfragment som event.component['someKey'].

Spara ändringarna.

Nästa under Åtgärder klicka Lägg till för att öppna Åtgärdskonfiguration guide.

För Åtgärdstyp fält, välj Egen kod.

Klicka Öppna redigeraren i huvudpanelen och ange följande kodfragment:

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']);

The event objektet skickas från trigger() metoden anropas i den anpassade händelsen. The component objektet är det aktuella läget för komponenten som härleds från datalagret getState() och är det element som utlöste klickningen.

Spara ändringarna och kör en bygg i tagg-egenskapen för att höja upp koden för miljö som används på din AEM.

Navigera till WKND-plats och öppna utvecklarverktygen för att visa konsolen. Välj även Bevara logg kryssrutan.

Klicka på en av Teaser eller Knapp CTA-knappar för att navigera till en annan sida.

Observera att utvecklarkonsolen CTA klickat regeln har utlösts:

Navigera till Experience Platform och till taggegenskapen som är integrerad med AEM.

Navigera till Dataelement och klicka Lägg till nytt dataelement.

För Namn fält, ange Komponent-ID.

För Dataelementtyp fält, markera Egen kod.

Klicka Öppna redigeraren och ange följande i den anpassade kodredigeraren:

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

Spara ändringarna.

Navigera till Dataelement och klicka Lägg till nytt dataelement.

För Namn fält, ange Komponenttitel.

För Dataelementtyp fält, markera Egen kod.

Klicka Öppna redigeraren och ange följande i den anpassade kodredigeraren:

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

Spara ändringarna.

I taggegenskapsgränssnittet går du till CTA klickat regeln skapades tidigare.

Under Villkor klicka Lägg till för att öppna Villkorskonfiguration guide.

För Villkorstyp fält, markera Egen kod.

Klicka Öppna redigeraren och ange följande i den anpassade kodredigeraren:

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;

Ovanstående kod kontrollerar först om resurstypen kommer från en Knapp eller om resurstypen kommer från en CTA inom en Teaser.

Spara ändringarna.

I CTA klickat regel, ta bort den Core - anpassad kod åtgärd (konsolprogramsatser):

Klicka på under Åtgärder Lägg till för att skapa en åtgärd.

Ange Tillägg skriv till Adobe Analytics och ange Åtgärdstyp till Ange variabler.

Ange följande värden för eVars, Props och Händelser:

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

Lägg sedan till en extra åtgärd till höger om Adobe Analytics - Ange variabler genom att trycka på plus ikon:

Ange Tillägg skriv till Adobe Analytics och ange Åtgärdstyp till Skicka Beacon.

Under Spårning ställ in alternativknappen på s.tl().

För Länktyp fält, välj Egen länk och for Länknamn ange värdet till: %Component Title%: CTA Clicked:

Konfigurationen ovan kombinerar den dynamiska variabeln från dataelementet Komponenttitel och den statiska strängen CTA klickat.

Spara ändringarna. The CTA klickat regeln ska nu ha följande konfiguration:

• 1. Lyssna på cmp:click -händelse.
• 2. Kontrollera att händelsen utlöstes av en Knapp eller Teaser.
• 3. Ange analysvariabler för att spåra Komponent-ID som eVar, prop och en event.
• 4. Skicka Länken Analytics Track (och gör det) not behandlas som en sidvy).

Spara alla ändringar och bygg ditt taggbibliotek och marknadsför till rätt miljö.

Öppna WKND-plats i webbläsaren.

Klicka på ikonen Felsökning för att öppna felsökningsprogrammet för Experience Platform.

Kontrollera att felsökaren mappar taggegenskapen till din Utvecklingsmiljö, som beskrivits tidigare, och Konsolloggning är markerad.

Öppna Analytics-menyn och kontrollera att rapportsviten är inställd på din rapportsvit.

Klicka på något av alternativen i webbläsaren Teaser eller Knapp CTA-knappar för att navigera till en annan sida.

Återgå till Felsökning för Experience Platform och rulla nedåt och expandera Nätverksförfrågningar > Din rapportsvit. Du bör kunna hitta eVar, prop och event set.

Gå tillbaka till webbläsaren och öppna utvecklarkonsolen. Navigera till webbplatsens sidfot och klicka på en av navigeringslänkarna:

Observera meddelandet i webbläsarkonsolen "Anpassad kod" för regeln "CTA-klickad" uppfylldes inte.

Ovanstående meddelande är att navigeringskomponenten inte utlöser en cmp:click event men på grund av Villkor till regeln som kontrollerar resurstypen ingen åtgärd utförs.