Spåra klickade komponenter med Adobe Analytics

Navigera till WKND-startsida

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

adobeDataLayer.getState();

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

Expandera svaret och sök efter poster som har prefixats med posten button- och teaser-xyz-cta. 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å schemat Component/Container Item. Den nya taggregeln använder det här schemat.

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

Navigera till avsnittet Regler i gränssnittet för taggegenskaper och klicka sedan på Lägg till regel.

Namnge regeln CTA klickad.

Klicka på Händelser > Lägg till för att öppna guiden Händelsekonfiguration.

För fältet Händelsetyp väljer du Egen kod.

Klicka på Ö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 genom att överföra en funktion till datalagret. När cmp:click-händelsen utlöses anropas funktionen componentClickedHandler. I den här funktionen läggs några säkerhetskontroller till och ett nytt event-objekt skapas med det senaste -läget för datalagretför komponenten som utlöste händelsen.

Slutligen anropas funktionen trigger(event). Funktionen trigger() är ett reserverat namn i taggegenskapen och den utlöser regeln. Objektet event 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 kodfragment som event.component['someKey'].

Spara ändringarna.

Klicka på Lägg till under Åtgärder för att öppna guiden Åtgärdskonfiguration.

Välj Anpassad kod för fältet Åtgärdstyp.

Klicka på Ö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']);

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

Spara ändringarna och kör en build i taggegenskapen för att befordra koden till den miljö som används på AEM.

Navigera till WKND-platsen och öppna utvecklarverktygen för att visa konsolen. Markera kryssrutan Bevara logg.

Klicka på någon av Teaser- eller Button CTA-knapparna för att navigera till en annan sida.

Observera i utvecklarkonsolen att regeln CTA Click har utlösts:

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

Navigera till avsnittet Dataelement och klicka på Lägg till nytt dataelement.

Ange komponent-ID för fältet Namn.

För fältet Dataelementtyp väljer du Egen kod.

Klicka på knappen Ö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 avsnittet Dataelement och klicka på Lägg till nytt dataelement.

Ange Komponenttitel för fältet Namn.

För fältet Dataelementtyp väljer du Egen kod.

Klicka på knappen Ö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.

Gå till regeln CTA-klickning som skapades tidigare i gränssnittet för taggegenskaper.

Under Villkor klickar du på Lägg till för att öppna guiden Konfiguration av villkor.

Välj Anpassad kod för fältet Villkorstyp.

Klicka på Ö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 är från en Button eller om resurstypen är från en CTA inom en Teaser.

Spara ändringarna.

I regeln som klickades på CTA tar du bort åtgärden Core - Custom Code (konsolprogramsatserna):

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

Ange typen Tillägg till Adobe Analytics och ställ in Åtgärdstyp till Ange variabler.

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

• 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å ikonen plus :

Ange typen Tillägg till Adobe Analytics och ställ in åtgärdstypen till Skicka Beacon.

Under Spärra/knip ställer du in alternativknappen på s.tl().

För fältet Länktyp väljer du Egen länk och för Länknamn anger du värdet %Component Title%: CTA Clicked:

Ovanstående config kombinerar den dynamiska variabeln från dataelementet Component Title och den statiska strängen CTA Click.

Spara ändringarna. Regeln CTA-klickad bör nu ha följande konfiguration:

• 1. Lyssna efter händelsen cmp:click.
• 2. Kontrollera att händelsen utlöstes av en Button eller Teaser.
• 3. Ange Analytics-variabler för att spåra komponent-ID som eVar, prop och en händelse.
• 4. Skicka analysspårslänkens Beacon (och behandla den inte som en sidvy).

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

Öppna WKND-platsen i webbläsaren.

Klicka på felsökningsikonen för att öppna Experience Platform Debugger.

Kontrollera att felsökaren mappar taggegenskapen till din-utvecklingsmiljö, enligt beskrivningen ovan, och att konsolloggning är markerad.

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

Klicka på någon av Teaser- eller Button CTA-knapparna i webbläsaren för att navigera till en annan sida.

Gå tillbaka till Felsökning för Experience Platform och bläddra nedåt och expandera Nätverksförfrågningar > Din rapportsvit. Du bör kunna hitta uppsättningen eVar, prop och event .

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

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

Ovanstående meddelande beror på att navigeringskomponenten utlöser en cmp:click-händelse men på grund av villkoret för regelnsom kontrollerar resurstypen. Ingen åtgärd utförs.