[Integrering]{class="badge positive"}

Spåra klickade komponenter med Adobe Analytics

Använd det händelsestyrda Adobe-klientdatalagret med AEM kärnkomponenter för att spåra klickningar på specifika komponenter på en Adobe Experience Manager-plats. Lär dig hur du använder regler i taggegenskapen för att lyssna efter klickhändelser, filtrera efter komponent och skicka data till en Adobe Analytics med en spårlänkssignal.

Vad du ska bygga what-build

WKND:s marknadsföringsteam är intresserade av att veta vilka Call to Action (CTA)-knappar som fungerar bäst på hemsidan. I den här självstudiekursen lägger vi till en regel i taggegenskapen som lyssnar efter cmp:click-händelserna från komponenterna Teaser och Button. Skicka sedan komponent-ID:t och en ny händelse till Adobe Analytics tillsammans med spårlänkens fyr.

Det här skapar du spårklickningar för

Mål objective

  1. Skapa en händelsestyrd regel i taggegenskapen som fångar cmp:click-händelsen.
  2. Filtrera de olika händelserna efter komponentresurstyp.
  3. Ange komponent-id:t och skicka en händelse till Adobe Analytics med spårlänkens fyr.

Förutsättningar

Den här självstudien är en fortsättning på Samla in siddata med Adobe Analytics och förutsätter att du har:

Inspect the Button and Teaser schema

Innan du skapar regler i taggegenskapen är det praktiskt att granska schemat för Button och Teaser och inspektera dem i datalagrets implementering.

  1. Navigera till WKND-startsida

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

    code language-js
    adobeDataLayer.getState();
    

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

    Datalagrets tillstånd via webbläsarkonsolen

  3. 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:

    code language-json
    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:

    code language-json
    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.

Skapa en CTA-klickad regel

Adobe-klientdatalagret är ett händelsestyrt datalager. När någon Core Component klickas skickas en cmp:click-händelse via datalagret. Om du vill lyssna efter cmp:click-händelsen skapar vi en regel.

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

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

  3. Namnge regeln CTA klickad.

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

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

    Namnge regeln CTA Klicka på och lägg till den anpassade kodhändelsen

  6. Klicka på Öppna redigeraren i huvudpanelen och ange följande kodfragment:

    code language-js
    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'].

  7. Spara ändringarna.

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

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

    Åtgärdstyp för anpassad kod

  10. Klicka på Öppna redigeraren i huvudpanelen och ange följande kodfragment:

    code language-js
    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.

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

    note note
    NOTE
    Det kan vara användbart att använda Adobe Experience Platform Debugger för att växla inbäddningskoden till en Development -miljö.
  12. Navigera till WKND-platsen och öppna utvecklarverktygen för att visa konsolen. Markera kryssrutan Bevara logg.

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

    CTA-knapp för att klicka på

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

    CTA-knapp klickad

Skapa dataelement

Skapa sedan ett dataelement för att hämta komponent-ID:t och titeln som du klickade på. Återkalla i föregående övning utdata från event.path liknar component.button-b6562c963d och värdet för event.component['dc:title'] var något som "Visa resor".

Komponent-ID

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

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

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

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

    Formulär för komponent-ID-dataelement

  5. Klicka på knappen Öppna redigeraren och ange följande i den anpassade kodredigeraren:

    code language-js
    if(event && event.path && event.path.includes('.')) {
        // split on the `.` to return just the component ID
        return event.path.split('.')[1];
    }
    
  6. Spara ändringarna.

    note note
    NOTE
    Kom ihåg att objektet event görs tillgängligt och omfång baserat på händelsen som utlöste egenskapen Rule i tagg. Värdet för ett dataelement anges inte förrän dataelementet är refererat i en regel. Det är därför säkert att använda det här dataelementet i en regel som Sidinläsning som skapades i föregående steg , men skulle inte vara säker att använda i andra sammanhang.

Komponenttitel

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

  2. Ange Komponenttitel för fältet Namn.

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

  4. Klicka på knappen Öppna redigeraren och ange följande i den anpassade kodredigeraren:

    code language-js
    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    
  5. Spara ändringarna.

Lägga till ett villkor i regeln CTA klickat

Uppdatera sedan regeln CTA Click för att se till att regeln bara aktiveras när händelsen cmp:click utlöses för en Teaser eller en Button . Eftersom Teaser CTA betraktas som ett separat objekt i datalagret är det viktigt att kontrollera det överordnade objektet för att verifiera att det kommer från ett Teaser.

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

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

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

    CTA klickade på anpassad villkorskod

  4. Klicka på Öppna redigeraren och ange följande i den anpassade kodredigeraren:

    code language-js
    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.

  5. Spara ändringarna.

För närvarande ger regeln CTA Click bara en konsolsats. Därefter använder du dataelementen och Analytics-tillägget för att ange Analytics-variabler som en åtgärd. Vi ställer också in en extra åtgärd som utlöser spårlänken och skickar insamlade data till Adobe Analytics.

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

    Ta bort anpassad kodåtgärd

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

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

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

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

    Ange eVar Prop och händelser

    note note
    NOTE
    Här används %Component ID% eftersom den garanterar en unik identifierare för den CTA som du klickade på. En potentiell nackdel med %Component ID% är att analysrapporten innehåller värden som button-2e6d32893a. Om du använder %Component Title% skulle det ge ett mer användarvänligt namn, men värdet kanske inte är unikt.
  5. Lägg sedan till en extra åtgärd till höger om Adobe Analytics - Ange variabler genom att trycka på ikonen plus :

    Lägg till en extra åtgärd i taggregeln

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

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

  8. 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:

    Konfiguration för Lägg till länk-fyr

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

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

    Konfiguration av slutlig taggregel

    • 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).
  10. Spara alla ändringar och bygg ditt taggbibliotek och marknadsför till rätt miljö.

Validera beteendet för spårlänk och Analytics-anropet

Nu när regeln CTA Click skickar analysfyren bör du kunna se analysspårningsvariablerna med Experience Platform-felsökaren.

  1. Öppna WKND-platsen i webbläsaren.

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

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

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

    Flikfelsökning för analys

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

    CTA-knapp för att klicka på

  6. 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 .

    Analyshändelser, evar och prop spåras vid klickning

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

    Klicka på navigeringslänken i sidfoten

  8. 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.

    note note
    NOTE
    Om du inte ser några konsolloggar kontrollerar du att Konsolloggning finns under Experience Platform-taggar i Felsökning för Experience Platform.

Grattis!

Du har precis använt det händelsestyrda Adobe-klientdatalagret och -taggen i Experience Platform för att spåra klickningar på specifika komponenter på en AEM plats.

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d