Integratie

AEM Sites en Adobe Analytics integreren

Leer hoe u AEM Sites en Adobe Analytics kunt integreren met de extensie van Adobe Analytics-tags met de ingebouwde functies van de Clientgegevenslaag Adoben met AEM kerncomponenten gegevens over een pagina in Adobe Experience Manager Sites verzamelen. Labels in Experience Platform en de Adobe Analytics-extensie worden gebruikt om regels te maken voor het verzenden van paginagegevens naar Adobe Analytics.

Wat u gaat bouwen

In dit leerprogramma, gaat u een markeringsregel teweegbrengen die op een gebeurtenis van de Laag van de Gegevens van de Cliënt van de Adobe wordt gebaseerd. Voeg ook voorwaarden toe voor wanneer de regel moet worden geactiveerd en verzend vervolgens de Paginanaam en Paginasjabloon waarden van een AEM Page naar Adobe Analytics.

Doelstellingen

1. Maak een gebeurtenisgestuurde regel in de eigenschap tag die wijzigingen vastlegt vanaf de gegevenslaag
2. Eigenschappen van paginalagen toewijzen aan gegevenselementen in de eigenschap Tag
3. Paginagegevens verzamelen en naar Adobe Analytics verzenden met behulp van het paginaweergavebaken

Vereisten

Hiervoor is het volgende vereist:

• Tag, eigenschap in Experience Platform
• Adobe Analytics test/dev rapportsuite-id en trackingserver. Zie de volgende documentatie voor een rapportenpakket maken.
• Foutopsporing Experience Platform browserextensie. Screenshots in deze zelfstudie werden vastgelegd vanuit de Chrome-browser.
• (Optioneel) AEM Site met de Gegevenslaag client-Adobe ingeschakeld. In deze zelfstudie wordt het publiek onder ogen gezien WKND maar u kunt uw eigen site graag gebruiken.

Omgeving van Switch-tag voor WKND-site

De WKND is een openbare site die is gebouwd op basis van een open-source-project ontworpen als referentie en zelfstudie voor een AEM uitvoering.

In plaats van het opzetten van een AEM milieu en het installeren van de WKND codebasis, kunt u debugger van het Experience Platform gebruiken aan switch het leven WKND-site tot uw tag, eigenschap. U kunt echter uw eigen AEM gebruiken als deze al beschikt over de Gegevenslaag client-Adobe ingeschakeld.

1. Aanmelden bij Experience Platform en een eigenschap Tag maken (als je dat nog niet hebt gedaan).

2. Zorg ervoor dat een initiële tag JavaScript bibliotheek is gemaakt en worden gepromoot naar de tag milieu.

3. Kopieer de ingesloten JavaScript-code uit de tagomgeving waarin uw bibliotheek is gepubliceerd.

   

4. Open in uw browser een nieuw tabblad en navigeer naar WKND-site

5. De browserextensie van Foutopsporing Experience Platform openen

   

6. Navigeren naar Experience Platform-tags > Configuratie en onder Ingespelde insluitcodes de bestaande insluitcode vervangen door uw ingesloten code die u hebt gekopieerd uit stap 3.

   

7. Inschakelen Logboekregistratie voor console en Vergrendelen de debugger op het WKND lusje.

   

Gegevens Adobe client-gegevenslaag op WKND-site verifiëren

De WKND-referentieproject is gebouwd met AEM Core Components en bevat de Gegevenslaag client-Adobe ingeschakeld standaard. Daarna, verifieer dat de Laag van de Gegevens van de Cliënt van de Adobe wordt toegelaten.

1. Navigeren naar WKND-site.

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

   

3. Breid de reactie uit en inspecteer page vermelding. U zou een gegevensschema als het volgende moeten zien:

   page-2eee4f8914:
       @type: "wknd/components/page"
       dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
       dc:title: "WKND Adventures and Travel"
       repo:modifyDate: "2020-08-31T21:02:21Z"
       repo:path: "/content/wknd/us/en.html"
       xdm:language: "en-US"
       xdm:tags: ["Attract"]
       xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"
   

   Als u paginagegevens naar Adobe Analytics wilt verzenden, gebruiken we de standaardeigenschappen zoals dc:title, xdm:language, en xdm:template van de gegevenslaag.

   Voor meer informatie raadpleegt u de Paginaschema uit de gegevensschema's voor kerncomponenten.

   OPMERKING

   Als u de adobeDataLayer JavaScript-object? Zorg ervoor dat de De Laag van Gegevens van de Cliënt van de Adobe is toegelaten op uw site.

Een regel maken voor het laden van pagina's

De gegevenslaag van de Cliënt van de Adobe is gebeurtenisgestuurd gegevenslaag. Wanneer de gegevenslaag AEM pagina is geladen, wordt een cmp:show gebeurtenis. Maak een regel die wordt geactiveerd wanneer de cmp:show gebeurtenis wordt geactiveerd vanaf de paginalaag.

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

2. Ga naar de Regels in de gebruikersinterface van de eigenschap Tag en klik vervolgens op Nieuwe regel maken.

   

3. Naam van de regel Pagina geladen.

4. In de Gebeurtenissen subsectie, klikken Toevoegen om de Gebeurtenisconfiguratie wizard.

5. Voor Type gebeurtenis veld, selecteren Aangepaste code.

   

6. Klikken Editor openen in het hoofddeelvenster en voer het volgende codefragment in:

   var pageShownEventHandler = function(evt) {
      // defensive coding to avoid a null pointer exception
      if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
         //trigger the Tag Rule and pass event
         console.log("cmp:show 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 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:show into the data layer
   window.adobeDataLayer.push(function (dl) {
      //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
      dl.addEventListener("cmp:show", pageShownEventHandler);
   });
   

   Het bovenstaande codefragment voegt een gebeurtenislistener toe door een functie duwen in de gegevenslaag. Wanneer cmp:show de gebeurtenis wordt geactiveerd pageShownEventHandler functie wordt aangeroepen. In deze functie worden een paar gezondheidscontroles toegevoegd en een nieuwe event is samengesteld met de meest recente 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'].

7. Sla de wijzigingen op.

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

9. Voor Type handeling veld, kies Aangepaste code.

   

10. Klikken Editor openen in het hoofddeelvenster en voer het volgende codefragment in:

    console.log("Page Loaded ");
    console.log("Page name: " + event.component['dc:title']);
    console.log("Page type: " + event.component['@type']);
    console.log("Page template: " + event.component['xdm:template']);
    

    De event object wordt doorgegeven vanuit het trigger() wordt aangeroepen in de aangepaste gebeurtenis. Hier, component is de huidige pagina die van de gegevenslaag wordt afgeleid getState in de aangepaste gebeurtenis.

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

    OPMERKING

    Het kan handig zijn om de Adobe Experience Platform Debugger om de insluitcode over te schakelen op een Ontwikkeling milieu.

12. Navigeer naar uw AEM en open de ontwikkelaarshulpmiddelen om de console te bekijken. Vernieuw de pagina en u zou moeten zien dat de consoleberichten zijn geregistreerd:

Gegevenselementen maken

Maak vervolgens verschillende gegevenselementen om verschillende waarden vast te leggen uit de gegevenslaag van de client-Adobe. Zoals in de vorige oefening wordt gezien is het mogelijk om tot de eigenschappen van de gegevenslaag rechtstreeks door douanecode toegang te hebben. Het voordeel van het gebruik van gegevenselementen is dat deze opnieuw kunnen worden gebruikt in verschillende labelregels.

Gegevenselementen worden toegewezen aan de @type, dc:title, en xdm:template eigenschappen.

Type componentbron

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

2. Ga naar de Gegevenselementen sectie en klik op Nieuw gegevenselement maken.

3. Voor de Naam veld, voert u de Type componentbron.

4. Voor de Type gegevenselement veld, selecteren Aangepaste code.

   

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

   if(event && event.component && event.component.hasOwnProperty('@type')) {
       return event.component['@type'];
   }
   

6. Sla de wijzigingen op.

   OPMERKING

   Herinnert eraan dat de event object beschikbaar wordt gemaakt en het bereik wordt ingesteld op basis van de gebeurtenis die het Regel in tag-eigenschap. De waarde van een gegevenselement wordt pas ingesteld wanneer het gegevenselement gerefereerd binnen een regel. Daarom is het veilig om dit Element van Gegevens binnen een Regel als te gebruiken Pagina geladen regel die in de vorige stap is gemaakt maar zou niet veilig zijn om in andere contexten te gebruiken.

Paginanaam

1. Klikken Gegevenselement toevoegen knop

2. Voor de Naam veld, Enter Paginanaam.

3. Voor de Type gegevenselement veld, selecteren Aangepaste code.

4. 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'];
   }
   

5. Sla de wijzigingen op.

Paginasjabloon

1. Klik op de knop Gegevenselement toevoegen knop

2. Voor de Naam veld, Enter Paginasjabloon.

3. Voor de Type gegevenselement veld, selecteren Aangepaste code.

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

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

5. Sla de wijzigingen op.

6. U moet nu drie gegevenselementen hebben als onderdeel van uw regel:

   

De extensie Analytics toevoegen

Voeg vervolgens de extensie Analytics toe aan de eigenschap Tag om gegevens naar een rapportsuite te verzenden.

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

2. Ga naar Extensies > Catalogus

3. Zoek de Adobe Analytics en klik op Installeren

   

4. Onder Bibliotheekbeheer > Rapportageopties, voert u de rapportsuite-id's in die u voor elke tagomgeving wilt gebruiken.

   

   OPMERKING

   Het is oké om één rapportenreeks voor alle milieu's in dit leerprogramma te gebruiken, maar in echt zou u afzonderlijke rapportseries willen gebruiken, zoals aangetoond in het hieronder beeld

   TIP

   We raden u aan de De optie Bibliotheek voor mij beheren als de instelling voor Bibliotheekbeheer het veel eenvoudiger maakt om de AppMeasurement.js bibliotheek is bijgewerkt.

5. Schakel het selectievakje in om in te schakelen Activity Map gebruiken.

   

6. Onder Algemeen > Trackingserver voert u bijvoorbeeld uw trackingserver in. tmd.sc.omtrdc.net. Voer uw SSL-traceringsserver in als uw site ondersteuning biedt https://

   

7. Klikken Opslaan om de wijzigingen op te slaan

Een voorwaarde toevoegen aan de regel Pagina geladen

Werk vervolgens de Pagina geladen de regel om Type componentbron gegevenselement om ervoor te zorgen dat de regel alleen wordt geactiveerd wanneer de cmp:show de gebeurtenis is voor de Pagina. Andere componenten kunnen de cmp:show bijvoorbeeld door de component Carousel wordt deze geactiveerd wanneer de dia's veranderen. Daarom is het belangrijk om een voorwaarde voor deze regel toe te voegen.

1. Navigeer in de interface Tageigenschap naar de Pagina geladen regel eerder gemaakt.

2. Onder Voorwaarden klikken Toevoegen om de Condition Configuration wizard.

3. Voor Type voorwaarde veld, selecteren Waardevergelijking -optie.

4. De eerste waarde in het formulierveld instellen op %Component Resource Type%. U kunt het pictogram Gegevenselement gebruiken om de Type componentbron gegevenselement. Laat de vergelijkingsfunctie ingesteld staan op Equals.

5. De tweede waarde instellen op wknd/components/page.

   

   OPMERKING

   Het is mogelijk om deze voorwaarde binnen de functie van de douanecode toe te voegen die op cmp:show eerder in de zelfstudie gemaakte gebeurtenis. Nochtans, geeft het toevoegen van het binnen UI meer zicht aan extra gebruikers die veranderingen in de regel zouden kunnen moeten aanbrengen. Bovendien kunnen we ons gegevenselement gebruiken!

6. Sla de wijzigingen op.

Analysevariabelen instellen en Paginaweergavebaken activeren

Momenteel worden de Pagina geladen regel output eenvoudig een consoleverklaring. Gebruik vervolgens de gegevenselementen en de extensie Analytics om de variabelen Analytics in te stellen als een action in de Pagina geladen regel. We stellen ook een extra actie in om de Paginaweergavekenmerk en de verzamelde gegevens naar Adobe Analytics verzenden.

1. In de regel Pagina geladen: remove de Core - Aangepaste code handeling (de consoleverklaringen):

   

2. Klik onder de subsectie Handelingen op Toevoegen om een nieuwe handeling toe te voegen.

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

   

4. Selecteer in het hoofdvenster een beschikbare eVar en instellen als de waarde van het gegevenselement Paginasjabloon. Het pictogram Gegevenselementen gebruiken om de Paginasjabloon element.

   

5. Omlaag schuiven, onder Aanvullende instellingen set Paginanaam aan het gegevenselement Paginanaam:

   

6. Sla de wijzigingen op.

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

   

8. Stel de Extensie tekst naar Adobe Analytics en stelt de Type handeling tot Bandbaken verzenden. Aangezien deze actie als een paginaweergave wordt beschouwd, laat u de standaardtracering ingesteld op s.t().

   

9. Sla de wijzigingen op. De Pagina geladen de regel zou nu de volgende configuratie moeten hebben:

   

   • 1. Luister naar de cmp:show gebeurtenis.
   • 2. Controleer of de gebeurtenis door een pagina is geactiveerd.
   • 3. Analysevariabelen instellen voor Paginanaam en Paginasjabloon
   • 4. Verzend het Beacon Analytics Page View

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

Valideer de oproep Beacon en Analytics voor paginaweergave

Nu Pagina geladen regel verzendt het baken van Analytics, zou u de Analytics volgende variabelen moeten kunnen zien gebruikend Foutopsporing van het Experience Platform.

1. Open de WKND-site in uw browser.

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

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

4. Open het menu Analytics en controleer of de rapportsuite is ingesteld op uw rapportsuite. De paginanaam moet ook worden ingevuld:

   

5. Omlaag schuiven en uitbreiden Netwerkverzoeken. U moet de vervagen voor de Paginasjabloon:

   

6. Ga terug naar de browser en open de ontwikkelaarsconsole. Klik door Carousel boven aan de pagina.

   

7. Neem in de browser console de consoleverklaring waar:

   

   De reden hiervoor is dat de Carousel wel een cmp:show event maar vanwege onze controle van de Type componentbron, er wordt geen gebeurtenis gestart.

   OPMERKING

   Als u geen consolelogboeken ziet, zorg ervoor dat Logboekregistratie voor console is gecontroleerd onder Experience Platform-tags in het Experience Platform Foutopsporing.

8. Naar een artikelpagina navigeren zoals Western Australia. Bekijk de paginanaam en het sjabloontype worden gewijzigd.

Gefeliciteerd!

U hebt zojuist de gebeurtenisgestuurde Adobe Clientgegevenslaag en -tags in Experience Platform gebruikt om gegevens over gegevenspagina's van een AEM Site te verzamelen en naar Adobe Analytics te verzenden.

Volgende stappen

Controle uit het volgende leerprogramma leren hoe te om de gebeurtenis-gedreven laag van de Gegevens van de Adobe van de Cliënt te gebruiken klikken van specifieke componenten op een Adobe Experience Manager-site bijhouden.