Aangeklikte component bijhouden met Adobe Analytics

Navigeer aan WKND Homepage

Open de de ontwikkelaarshulpmiddelen van browser en navigeer aan de Console. Voer de volgende opdracht uit:

adobeDataLayer.getState();

Boven code keert de huidige staat van de Gegevens van de Cliënt van de Adobe Laag terug.

Vouw de reactie uit en zoek de items die vooraf aan de items button- en teaser-xyz-cta zijn toegewezen. U zou een gegevensschema als het volgende moeten zien:

Knopschema:

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"

Teaserschema:

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"

Boven gegevensdetails zijn gebaseerd op het Schema van het Punt van de Component/van de Container. De nieuwe tagregel gebruikt dit schema.

Navigeer naar het Experience Platform en naar de eigenschap tag die is geïntegreerd met de AEM Site.

Navigeer aan de sectie van Regels in het Bezit UI van de Markering, dan klik voegt Regel toe.

Noem de regel CTA klikte.

Klik Gebeurtenissen > toevoegen om de tovenaar van de Configuratie van de Gebeurtenis te openen.

Voor het Type van Gebeurtenis gebied, uitgezochte Code van de Douane.

Klik Open Redacteur in het belangrijkste paneel en ga het volgende codefragment in:

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

Het bovenstaande codefragment voegt een gebeurtenisluisteraar toe door een functiein de gegevenslaag te duwen. Wanneer de gebeurtenis cmp:click wordt geactiveerd, wordt de functie componentClickedHandler aangeroepen. In deze functie, worden een paar gezondheidscontroles toegevoegd en een nieuw event voorwerp wordt geconstrueerd met de recentste staat van de gegevenslaagvoor de component die de gebeurtenis teweegbracht.

Tot slot wordt de functie trigger(event) aangeroepen. De trigger() functie is een gereserveerde naam in het markeringsbezit en het brengt de regel teweeg. Het event -object wordt doorgegeven als een parameter die vervolgens weer wordt weergegeven door een andere gereserveerde naam in de eigenschap tag. Gegevenselementen in de eigenschap tag kunnen nu verwijzen naar verschillende eigenschappen met behulp van een codefragment, zoals event.component['someKey'] .

Sla de wijzigingen op.

Daarna onder Acties klik ​ ​toevoegen om de tovenaar van de Configuratie van de Actie te openen.

Voor gebied van het Type van Actie 0} {, kies de Code van de Douane .

Klik Open Redacteur in het belangrijkste paneel en ga het volgende codefragment in:

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

Het object event wordt doorgegeven via de methode trigger() die in de aangepaste gebeurtenis wordt aangeroepen. Het component -object is de huidige status van de component die is afgeleid van de methode data layer getState() en is het element dat de klik heeft geactiveerd.

Sparen de veranderingen en stel a in werking bouwtin het markeringsbezit om de code aan het milieute bevorderen dat op uw AEMPlaats wordt gebruikt.

Navigeer aan de Plaats WKNDen open de ontwikkelaarshulpmiddelen om de console te bekijken. Ook, selecteer het Logboek van het Behoud checkbox.

Klik één van Taser of Knoop CTA knopen om aan een andere pagina te navigeren.

te klikken

Merk in de ontwikkelaarsconsole op dat de CTA geklikte regel in brand is gestoken:

Navigeer naar het Experience Platform en naar de eigenschap tag die is geïntegreerd met de AEM Site.

Navigeer aan de sectie van de Elementen van Gegevens 0} {en klik toevoegen Nieuw Element van Gegevens .

Voor het gebied van de Naam, ga identiteitskaart van de Component in.

Voor het Type van Element van Gegevens gebied, uitgezochte Code van de Douane.

Klik Open de knoop van de Redacteur en ga het volgende in de redacteur van de douanecode in:

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

Sla de wijzigingen op.

Navigeer aan de sectie van de Elementen van Gegevens 0} {en klik toevoegen Nieuw Element van Gegevens .

Voor het gebied van de Naam, ga Titel van de Component in.

Voor het Type van Element van Gegevens gebied, uitgezochte Code van de Douane.

Klik Open de knoop van de Redacteur en ga het volgende in de redacteur van de douanecode in:

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

Sla de wijzigingen op.

In het Bezit van de Markering UI, navigeer aan CTA geklikte regel vroeger gecreeerd.

Onder Voorwaarden klik ​ ​toevoegen om de tovenaar van de Configuratie van de Voorwaarde te openen.

Voor gebied van het Type van Voorwaarde 0} {, uitgezochte Code van de Douane .

Klik Open Redacteur en ga het volgende in de redacteur van de douanecode in:

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;

De bovenstaande code controleert eerst om te zien of was het middeltype van a Knoop of als het middeltype van een CTA binnen a Taser was.

Sla de wijzigingen op.

In CTA klikte regel, verwijdert de Kern - de actie van de Code van de Douane (de consoleverklaringen):

Onder Acties, voegt de klik ​ ​toe om een actie tot stand te brengen.

Plaats het type van Uitbreiding aan Adobe Analytics en plaats het Type van Actie aan Vastgestelde Variabelen.

Plaats de volgende waarden voor eVars, Props, en Gebeurtenissen:

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

Daarna, voeg een extra Actie rechts van Adobe Analytics toe - plaats Variabelen door het plus pictogram te tikken:

Plaats het type van de Uitbreiding 0} {aan Adobe Analytics en plaats het Type van Actie aan verzendt Baken .

Onder Volgend plaatsen het radioknoop aan s.tl().

Voor het Type van Verbinding gebied, kies Douane Verbinding en voor de Naam van de Verbinding plaatsen de waarde aan: %Component Title%: CTA Clicked

Bovenstaande config combineert de dynamische variabele van de Titel van de Component van het gegevenselement ​ ​en het statische koord CTA klikte.

Sla de wijzigingen op. De CTA geklikte regel zou nu de volgende configuratie moeten hebben:

• 1. Luister naar de cmp:click -gebeurtenis.
• 2. Controle dat de gebeurtenis door a Knoop of Taser werd teweeggebracht.
• 3. Vastgestelde variabelen van de Analyse om identiteitskaart van de Component als eVar, pro, en een gebeurtenis te volgen.
• 4. verzend het Baken van de Verbinding van het Spoor van Analytics (en niet behandelt het als paginamening).

Sla alle wijzigingen op en maak uw tagbibliotheek, waarbij u een upgrade uitvoert naar de juiste omgeving.

Open de Plaats WKNDin uw browser.

Klik het Debugger pictogram van de Ervaring om Debugger van het Experience Platform te openen.

Zorg ervoor dat Debugger het markeringsbezit aan in kaart brengt uw milieu van de Ontwikkeling, zoals vroeger beschreven en het Loggen van de Console wordt gecontroleerd.

Open het menu van Analytics en verifieer dat de rapportreeks aan uw rapportreeks wordt geplaatst.

In browser, klik één van Taser of Knoop CTA knopen om aan een andere pagina te navigeren.

te klikken

Terugkeer aan debugger van het Experience Platform en rol neer en breid Verzoeken van het Netwerk uit > Uw Reeks van het Rapport. U zou de eVar, prop, en gebeurtenis moeten kunnen vinden reeks.

{de gebeurtenissen van 0} Analytics, evar, en prop die op klik worden gevolgd

Ga terug naar de browser en open de ontwikkelaarsconsole. Navigeer naar de voettekst van de site en klik op een van de navigatiekoppelingen:

Neem in de browser console het bericht "Aangepaste Code"voor regel "CTA Clicked"niet werd ontmoet waar.

Het bovenstaande bericht is omdat de component van de Navigatie a cmp:click gebeurtenis teweegbrengt maar wegens Voorwaarde aan de regeldie het middeltype controleert geen actie wordt genomen.