Aangeklikte component bijhouden met Adobe Analytics

Navigeren naar WKND-startpagina

Open de ontwikkelaarsgereedschappen van de browser en ga naar 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 vooraf items met button- en teaser-xyz-cta vermelding. 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"

De bovenstaande gegevensdetails zijn gebaseerd op de Component-/containeritemschema. De nieuwe tagregel gebruikt dit schema.

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

Ga naar de Regels in de gebruikersinterface voor eigenschappen van tags en klik vervolgens op Regel toevoegen.

Naam van de regel CTA geklikt.

Klikken Gebeurtenissen > Toevoegen om de Gebeurtenisconfiguratie wizard.

Voor Type gebeurtenis veld, selecteren Aangepaste code.

Klikken Editor openen in het hoofddeelvenster en voer 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 gebeurtenislistener toe door een functie duwen in de gegevenslaag. Wanneer de cmp:click de gebeurtenis wordt geactiveerd componentClickedHandler functie wordt aangeroepen. In deze functie worden een paar gezondheidscontroles toegevoegd en een nieuwe event object is samengesteld met de nieuwste status van de gegevenslaag voor de component die de gebeurtenis heeft geactiveerd.

Tot slot de trigger(event) functie wordt aangeroepen. De trigger() function is a reserved name in the tag property and it triggers de regel. De 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.

Volgende onder Handelingen klikken Toevoegen om de Configuratie van handelingen wizard.

Voor Type handeling veld, kies Aangepaste code.

Klikken Editor openen in het hoofddeelvenster en voer 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']);

De event object wordt doorgegeven vanuit het trigger() wordt aangeroepen in de aangepaste gebeurtenis. De component object is de huidige status van de component die is afgeleid van de gegevenslaag getState() methode en is het element dat de klik teweegbracht.

Sla de wijzigingen op en voer een build in de eigenschap tag om de code naar de milieu gebruikt op uw AEM Site.

Ga naar de WKND-site en open de ontwikkelaarshulpmiddelen om de console te bekijken. Selecteer ook de optie Logbestand behouden selectievakje.

Klik op een van de Teaser of Knop CTA knopen om aan een andere pagina te navigeren.

Neem in de ontwikkelaarsconsole waar dat CTA geklikt regel is geactiveerd:

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

Ga naar de Gegevenselementen sectie en klik op Nieuw gegevenselement toevoegen.

Voor Naam veld, Enter Component-id.

Voor Type gegevenselement veld, selecteren Aangepaste code.

Klikken Editor openen en voert u het volgende in de aangepaste code-editor 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.

Ga naar de Gegevenselementen sectie en klik op Nieuw gegevenselement toevoegen.

Voor Naam veld, Enter Componenttitel.

Voor Type gegevenselement veld, selecteren Aangepaste code.

Klikken Editor openen en voert u het volgende in de aangepaste code-editor in:

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

Sla de wijzigingen op.

Navigeer in de interface Tageigenschap naar de CTA geklikt regel eerder gemaakt.

Onder Voorwaarden klikken Toevoegen om de Condition Configuration wizard.

Voor Type voorwaarde veld, selecteren Aangepaste code.

Klikken Editor openen en voer 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 of het middeltype van a afkomstig was Knop of als het middeltype van een CTA binnen een Teaser.

Sla de wijzigingen op.

In de CTA geklikt regel, remove de Core - Aangepaste code handeling (de consoleverklaringen):

Klik onder Handelingen op Toevoegen om een handeling te maken.

Stel de Extensie tekst naar Adobe Analytics en stelt de Type handeling tot Variabelen instellen.

Stel de volgende waarden in voor eVars, Props, en Gebeurtenissen:

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

Voeg vervolgens een extra handeling toe aan de rechterkant van de knop Adobe Analytics - Variabelen instellen door op de plus pictogram:

Stel de Extensie tekst naar Adobe Analytics en stelt de Type handeling tot Bandbaken verzenden.

Onder Tekstspatiëring het keuzerondje instellen op s.tl().

Voor Koppelingstype veld, kies Aangepaste koppeling en voor Koppelingsnaam Stel de waarde in op: %Component Title%: CTA Clicked:

Bovenstaande config combineert de dynamische variabele van het gegevenselement Componenttitel en de statische tekenreeks CTA geklikt.

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

• 1. Luister naar de cmp:click gebeurtenis.
• 2. Controleer of de gebeurtenis is geactiveerd door een Knop of Teaser.
• 3. Stel analysevariabelen in om de Component-id als eVar, prop en event.
• 4. Verzend het Beacon van de Verbinding van het Spoor Analytics (en doe niet behandelen het als paginamening).

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

Open de WKND-site in uw browser.

Klik op het pictogram Foutopsporing om Foutopsporing op Experience Platform te openen.

Controleer of Foutopsporing de eigenschap tag toewijst aan uw Ontwikkelomgeving, zoals eerder beschreven, en de Logboekregistratie voor console is ingeschakeld.

Open het menu Analytics en controleer of de rapportsuite is ingesteld op uw rapportsuite.

Klik in de browser op een van de Teaser of Knop CTA knopen om aan een andere pagina te navigeren.

Terug naar Foutopsporing Experience Platform en omlaag schuiven en uitvouwen Netwerkverzoeken > Uw rapportsuite. U moet de eVar, prop, en event set.

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 waar Er is niet voldaan aan "Aangepaste code" voor regel waarop wordt geklikt.

Het bovenstaande bericht is omdat de navigatiecomponent een cmp:click event maar vanwege Voorwaarde voor de regel dat het middeltype controleert wordt geen actie ondernomen.