本节介绍如何使用AEM SPA编辑器(可由AEM的业务专业人士配置)嵌入使用REACT(或Angular)的交互式单页应用程序,以及如何将交互式应用程序与脱机Adobe Analytics集成。
请按照以下步骤使用AEM SPA编辑器:
克隆位于https://github.com/adobe/aem-spa-project-archetype的AEM SPA Editor repo。
此原型创建了最小的Adobe Experience Manager项目,作为您自己的SPA项目的起点。 使用此原型时必须提供的属性允许根据需要命名此项目的所有部分。
按照自述文件说明创建AEM SPA编辑器原型项目:
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 \
我们将GroupId用作com.adobe.aem.screens,将ArtifactId用作我的示例SPA(这是默认值)。 您可以根据需要选择自己的。
创建项目后,请使用您选择的IDE或编辑器并导入生成的Maven项目。
使用命令mvn clean install -PautoInstallPackage部署到本地AEM实例。
要编辑REACT应用程序中的内容:
https://localhost:4502/editor.html/content/mysamplespa/en/home.html
(如果适用,请替换主机名、端口和项目名称)。请按照以下步骤将交互式REACT应用程序添加到AEM Screens:
新建一个AEM Screens项目。 有关详细信息,请参阅创建和管理项目。
在您的Screens项目的渠道文件夹中创建渠道时,创建序列渠道。
有关详细信息,请参阅创建和管理渠道。
编辑任何序列渠道,并拖放嵌入式页面组件。
有关详细信息,请参阅将组件添加到渠道。
确保在向显示屏分配事件时添加用户交互渠道。
单击操作栏中的编辑以编辑序列渠道的属性。
拖放嵌入式页面组件并选择mysamplespa应用程序下的主页,例如/content/mysamplespa/en/home。
根据此项目注册一个播放器,您现在应能看到交互式应用程序在AEM Screens运行。
请参阅设备注册以详细了解设备注册。
请按照以下步骤通过AEM Screens将SPA与Adobe Analytics集成,并提供离线功能:
在AEM Screens配置Adobe Analytics。
请参阅将Adobe Analytics配置为AEM Screens,了解如何在Adobe Analytics与AEM Screens一起执行排序,以及使用脱机Adobe Analytics发送自定义事件。
在您选择的IDE/编辑器中编辑您的反应应用程序(尤其是文本组件或您希望开始发射事件的其他组件)。
在单击要为组件捕获的事件或其他事件上,使用标准数据模型添加分析信息。
有关更多详细信息,请参阅将Adobe Analytics配置为AEM Screens。
调用AEM Screens分析API脱机保存事件并将其连发发送到Adobe Analytics。
例如,
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);
}
}
播放器固件会自动将有关播放器及其运行时环境的更多详细信息添加到您发送的自定义分析数据中。 因此,除非绝对必要,否则您可能无需捕获低级操作系统/设备详细信息。 您只需关注业务分析数据。