Een REACT-toepassing insluiten met de AEM SPA Editor en integreren met AEM Screens Analytics embedding-a-react-application-using-the-aem-spa-editor-and-integrating-with-aem-screens-analytics

Kloon de AEM SPA Reactie van de Redacteur in ​ https://github.com/adobe/aem-spa-project-archetype.

Als u een archetype-project voor een AEM SPA editor wilt maken, volgt u de leesmij-instructies:

mvn clean install archetype:update-local-catalog
mvn archetype:crawl

mvn archetype:generate \
-DarchetypeCatalog=internal \
-DarchetypeGroupId=com.adobe.cq.spa.archetypes \
-DarchetypeArtifactId=aem-spa-project-archetype \
-DarchetypeVersion=1.0.3-SNAPSHOT \

Nadat het project wordt gecreeerd, of gebruik winde of redacteur van uw keus en voer het geproduceerde Maven project in.

Stel aan uw lokale AEM instantie op gebruikend bevel mvn schone installatie -PautoInstallPackage.

Maak een AEM Screens-project. Zie ​ Creërend en het Leiden Projecten ​ voor meer details.

Creeer een Kanaal van de Toepassing (bij voorkeur) (of 1x1 malplaatje, of multi-zone kanaal) in de omslag van Kanalen van uw project van AEM Screens.

Bewerk een willekeurig volgnummer en sleep en zet een ingesloten pagina-component neer.

Zie ​ Toevoegend Componenten aan een Kanaal ​ voor meer details.

Klik uitgeven van de actiebar zodat kunt u de eigenschappen van het kanaal uitgeven.

Sleep en laat vallen de Ingebedde component van de Pagina, of hergebruik de bestaande component in een toepassingskanaal, en klik de homepage onder de mysamplespa toepassing, bijvoorbeeld, /content/mysamplespa/nl/home.

Wijs het kanaal toe aan een weergave.

Registreer een speler tegen dit project en wijs het aan de vertoning toe. Uw interactieve toepassing wordt nu uitgevoerd op AEM Screens.

Zie ​ Registratie van het Apparaat ​ voor meer informatie over het registreren van een apparaat.

Adobe Analytics configureren in AEM Screens.

Zie ​ Vormend Adobe Analytics met AEM Screens ​ voor meer informatie over hoe te het rangschikken in Adobe Analytics met AEM Screens uitvoeren en douanegebeurtenissen verzenden gebruikend off-line Adobe Analytics.

Bewerk uw reactie-app in de IDE/editor van uw keuze (met name de tekstcomponent of andere component waarmee u gebeurtenissen wilt gaan uitzenden).

Voeg bij de klikgebeurtenis of andere gebeurtenis die u voor de component wilt vastleggen de analysegegevens toe met behulp van het standaardgegevensmodel.

Zie ​ Vormend Adobe Analytics met AEM Screens ​ voor meer details.

Roep de AEM Screens Analytics API aan, zodat u de gebeurtenis offline kunt opslaan en in bursts naar Adobe Analytics kunt verzenden.

Bijvoorbeeld:

handleClick() {
    if ((window.parent) && (window.parent.CQ) && (window.parent.CQ.screens) && (window.parent.CQ.screens.analytics))
    {
        var analyticsEvent = {};
        analyticsEvent['event.type'] = 'play'; // Type of event
 analyticsEvent['event.coll_dts'] = new Date().toISOString(); // Start of collecting the event
 analyticsEvent['event.dts_start'] = new Date().toISOString(); // Event start
 analyticsEvent['content.type'] = 'Washing machine'; // Mime Type or product category
 analyticsEvent['content.action'] = 'Path to the washing machine asset in AEM'; // Path in AEM to relevant asset
 analyticsEvent['trn.product'] = 'Washing machine Model number'; // Product being explored
 analyticsEvent['trn.amount'] = 1000; // Product pricing or other numeric value or weight
 analyticsEvent['event.dts_end'] = new Date().toISOString(); // Event end
 analyticsEvent['event.count'] = 100; // Numeric value that may count a number of clicks or keystrokes or wait time in seconds for example
 analyticsEvent['event.value'] = 'My favorite analytics event';
        analyticsEvent['trn.quantity'] = 10; // Quantity of product selection
 analyticsEvent['event.subtype'] = 'end'; // Event subtype if applicable
 window.parent.CQ.screens.analytics.sendTrackingEvent(analyticsEvent);
    }
}