Show Menu
主题×

使用Adobe客户端数据层集成核心组件和Adobe启动

核心组件可以通过使用Adobe客户端数据层与Adobe启动集成。 此文档描述了如何配置Adobe启动以跟踪图像组件的单击事件。
配置后,当单击核心图像组件时,Launch将在浏览器控制台中生成以下输出。

启动与AEM的集成

首次Adobe启动必须与AEM站点集成。

步骤1 —— 在AdobeI/O中创建集成

首先登录AdobeI/O以开始配置集成。
  1. 转到
    https://console.adobe.io
    .
  2. 使用您的Adobe ID登录。
  3. 在“快速开始”部分,单击“
    创建集成
    ”。
  4. Select
    Access an API
    and click
    Continue
    .
  5. 选择
    Adobe Experience Platform下
    的Experience Platform LaunchAPI,然后单
    击继续

步骤2 —— 在AEM中创建IMS配置

在AEM中,您需要定义在AdobeI/O中开始配置的集成。
  1. 转到AEM主页,单击“工
    具”->“安全”->“AdobeIMS配置”
  2. 单击​
    创建
  3. 作为
    云解决方案
    ,选择
    Adobe启动
  4. Check
    Create new certificate
    .
  5. 输入证书的别名,
    如aem-launch-certificate
  6. 击“Create
    certificate
    (创建证书)” ,然后在弹出
    窗口中单击“OK(确定)”以创建证书。
  7. 击“下载公钥
    ”,然后在弹出窗口中单击“
    下载”

步骤3 —— 完成AdobeI/O配置

使用在AEM IMS配置中创建的证书和密钥,您可以完成AdobeI/O配置。
  1. 按步骤1返回AdobeI/O控 制台。
  2. 在创
    建新集成窗口
    ,输入名称和说明,如
    AEM Launch数据层
  3. 在“
    公钥证书
    ”下,上传您在步骤2中创建 的证书。
  4. 选择“
    启动——产品”用户档案
  5. Click
    Create integration
    .
  6. 单击“
    继续”以查看集成详细信息
    。 您以后需要这些详细信息才能在AEM实例中完成IMS配置。

第4步——完成IMS配置

通过AdobeI/O集成详细信息,您可以完成AEM IMS配置。
  1. 在AEM选项卡的步骤2
    的AdobeIMS技术帐户配
    置选项卡 步骤2 —— 在AEM中创建IMS配置 中,单击
    下一
    ​步。
  2. 输入标题,如
    Adobe启动的IMS配置
  3. 在AdobeI/O选项卡中,复制
    API密钥(客户端ID)
  4. 在AEM选项卡中,将前一个复制的密钥粘贴到
    API密钥字段中
  5. 在AdobeI/O中,单击“检
    索客户端机密
    ”并复制它。
  6. 在AEM选项卡中,将其粘贴到“客户
    端机密
    ”字段。
  7. 在AdobeI/O选项卡中,选择
    JWT
    选项卡并复制URL,如
    https://ims-na1.adobelogin.com
  8. 在AEM选项卡中,将URL粘贴到“授权服
    务器”字段
  9. 在“AdobeI/O”选项卡中,复制JWT有效负荷(大括号之间的代码)。
  10. 在AEM选项卡中,将其粘贴到“有效
    负荷
    ”字段。
  11. 单击
    创建
    ,在AEM中创建IMS配置。

第5a步——在Adobe启动中创建属性

属性定义Launch可以注入到您的站点的功能。
  1. 转到Adobe启动
    https://launch.adobe.com
  2. 使用您的Adobe ID登录。
  3. 单击
    新建属性
  4. 输入名称,如
    启动AEM Data Layer
  5. 输入您的域。
  6. 单击​
    保存

第5b步——在启动项中创建规则

使用您创建的属性,您可以定义规则,该规则指定在发生操作时应发生的情况。
  1. 单击步骤5启动AEM数 据层
    ​中新添加的属性
  2. 选择“规
    ”选项卡,然
    后单击“创建新规则”
  3. 输入名称,如
    按住图像单击
  4. 单击
    事件
    下的+
    按钮
  5. 选择
    核心
    ,作
    为扩展
    ,
    单击即
    事件类型和进
    ​入和。cmp-image选择器。
  6. 单击
    保留更改
  7. 单击“
    操作
    ”下的
    +按钮
  8. 选择
    核心
    ,作
    为扩展
    ,自定
    义代码,作
    为操作类型和
    ​点击Open Editor。
  9. 在编辑器中,输入以下代码:
    console.log("DOM click event tracked by Launch for image: ", event.target.src);
  10. 单击​
    保存
  11. 单击
    保留更改
  12. 单击
    保存
    ,以创建新规则。

第6步——发布启动规则

要使新规则可用于AEM站点,您需要发布它。
  1. 在“Adobe
    启动项
    ”选项卡中,选
    择“发布
    ”选项卡。
  2. 单击“
    添加新库”
  3. 根据需要
    输入
    “名称”,
    如demo-1
  4. 对于
    环境
    ,根据需要选择,
    如开发(开发)
  5. 单击
    添加资源
  6. 选择
    规则->图像——单击->最新
    ,然
    后单击选择并创建新修订
  7. 单击​
    保存并构建用于开发
  8. 在弹出窗口中,单击“
    应用更新”并继续
  9. 构建库时,单击省略号图标,然后选择“
    提交以供审批
    ”。
  10. 在弹出窗口中单击
    提交
  11. 单击省略号图标,然后选
    择“构建以进行升级
    ”。
  12. 生成完成后,单击省略号图标,然后选择“
    批准发布”
  13. 在弹出窗口中单击
    批准
  14. 单击省略号图标,然后选
    择构建并发布到生产
  15. 在弹出窗口中单击
    发布

第7步——为您的站点启用云配置

要使用集成,需要在AEM中将其指定为云配置。
  1. 在AEM控制台中,单
    击工具->常规->配置浏览器
  2. 检查核心
    组件示例
    ,然后单
    击属性
  3. 检查云
    配置
    ,然后单
    击保存并关闭

第8步——创建与AEM站点的Launch集成

AEM与Launch结合使用时,必须集成Launch
  1. 在AEM控制台中,单
    击工具->Cloud Services->Adobe启动配置
  2. 选择
    核心组件示例
    ,然后单
    击创建
  3. 输入标
    ,如
    启动配置
  4. 选择您在步骤4中创建的 IMS配置。
  5. 根据
    公司
    ,根据需要进行选择。
  6. 作为
    属性
    ,选择在步骤5中创建的新添 加的启动属性。
  7. 将“作
    者上的包含生产代码
    ”滑块移到右侧,然后单击“下
    一步”
  8. 单击​
    下一步
  9. 单击​
    下一步
  10. 单击​
    创建

第9步——将AEM站点连接到启动集成

要使AEM使用Launch集成,需要将其分配为云配置。
  1. 在AEM控制台中,单击“
    站点
    ”并检查
    核心
    ​组件站点。
  2. 单击​
    属性
    .
  3. Select the
    Advanced
    tab.
  4. 在云
    配置中
    ,选择核
    心组件示例
    ,然后单
    击选择
  5. 单击​
    保存并关闭

第10步——验证启动逻辑是否应用于页面

测试到目前为止的步骤是否成功。
  1. 在预览模式下打开核心组件库的图像页面:
    http://<lhost&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. 单击图像并验证消息是
    A Core Image was clicked
    否显示在浏览器控制台中。

启动与AEM和数据层的集成

现在AEM和Launch之间的集成已设置完毕,我们可以与数据层集成。

第1步——在Adobe启动中创建规则

重复第5步中 的步骤 ,使用以下值在Adobe启动中添加新规则。
  • 名称:
    image-click-data-layer
  • 事件:
    • 扩展: 核心
    • 事件类型: DOM就绪
  • 操作:
    • 扩展: 核心
    • 操作类型: 自定义代码
    • 代码:
      function onImageClick(event) { console.log("Data layer click event tracked by Launch for image: " + event.info.path); console.log("dataLayer.getState(): ", adobeDataLayer.getState()); } adobeDataLayer.addEventListener('image clicked', onImageClick);

第2步——发布启动规则,使其可用于AEM站点

重复第6步 中的步骤 ,发布新规则。

第3步——验证启动逻辑是否已应用于页面

  1. 在预览模式下打开核心组件库的图像页面:
    http://<host&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. 单击图像并验证以下消息是否显示在浏览器控制台中: