3.6.1内容卡

通过转到Adobe Experience Cloud登录Adobe Journey Optimizer。 单击​ Journey Optimizer。

您将被重定向到Journey Optimizer中的​ 主页 ​视图。 首先，确保使用正确的沙盒。 要使用的沙盒名为--aepSandboxName--。 然后，您将进入沙盒​ 的 ​主页--aepSandboxName--视图。

3.6.1.1内容卡渠道配置

在左侧菜单中，转到​ 渠道，然后选择​ 渠道配置。 单击​ 创建渠道配置。

输入名称： --aepUserLdap--_Content_Cards_Web，选择频道​ 内容卡，然后启用平台​ Web。

向下滚动，并确保启用了​ 单页 ​选项。

输入以前作为​ 快速入门 ​模块的一部分创建的网站的URL，它类似于： https://dsn.adobe.com/web/--aepUserLdap---XXXX。 别忘了将​ XXXX ​更改为您网站的唯一代码。

将页面​ 上的字段 ​位置设置为CitiSignalContentCardContainer。

向上滚动并单击​ 提交。

您的渠道配置现已准备就绪，可供使用。

3.6.1.2为内容卡配置计划的营销活动

在左侧菜单中，转到​ 营销活动，然后单击​ 创建营销活动。

选择​ 计划 — 营销，然后单击​ 创建。

输入名称--aepUserLdap-- - CitiSignal Fiber Max Content Cards，然后单击​ 操作。

单击​ +添加操作，然后选择​ 内容卡。

选择您在上一步中创建的名为--aepUserLdap--_Content_Cards_Web的内容卡渠道配置。

接下来，单击​ 编辑规则。

单击​ X ​可删除当前规则。

单击​ +添加条件。

选择条件​ 将数据发送到Platform。 单击​ 完成

您应该会看到此内容。 单击​ 编辑内容。

您应该会看到此内容。

配置以下设置：

单击图标以通过从AEM Assets中选择资源来更改URL。

转到文件夹​ citisignal-imaes ​并选择文件​ neon_rabbit_banner.jpg。 单击​ 选择。

然后您应该拥有此项。 单击​ +添加按钮。

为按钮配置以下设置：

单击​ 查看以激活。

单击​ 激活。

您的营销活动随后将激活，这可能需要几分钟的时间。

几分钟后，您的营销活动将上线。

3.6.1.3更新您的DSN网站

要在网站上显示内容卡，您需要对CitiSignal演示网站的主页设计进行更改。

转到https://dsn.adobe.com/。 单击您网站上的​ 3点，然后单击​ 编辑。

单击以选择页面​ 主页。 单击​ 编辑内容。

将鼠标悬停在主页图像上，然后单击​ + ​按钮。

转到​ 常规，选择​ 横幅，然后单击​ 添加。

单击以选择新创建的横幅。 转到​ 样式 ​并在CitiSignalContentCardContainer自定义CSS类​ 字段中输入。

转到​ 对齐方式。 将字段​ Alignment ​设置为left并将字段​ Vertical Alignment ​设置为middle。

单击​ X ​图标以关闭对话框窗口。

您的网站设计现已更改。

如果您现在在新的浏览器窗口中打开网站，则它应当如下所示。 灰色区域是新创建的横幅，但它还没有任何内容。

要确保内容动态加载到新创建的横幅中，需要对数据收集标记属性进行更改。

3.6.1.4更新您的数据收集标记属性

转到https://experience.adobe.com/#/data-collection/，转到​ 标记。 作为快速入门模块的一部分，已创建数据收集标记属性。

您已在以前的模块中使用过这些数据收集标记属性。

单击以打开Web的数据收集属性。

在左侧菜单中，转到​ 规则，然后单击以打开规则​ 页面视图。

单击操作​ 发送“页面查看”体验事件。

作为​ 页面查看 ​规则的一部分，需要从Edge请求特定表面的个性化说明。 表面是您在上一步中配置的横幅。 为此，请向下滚动到​ Personalization ​并在web://dsn.adobe.com/web/--aepUserLdap---XXXX#CitiSignalContentCardContainerSurfaces 下输入。

单击​ 保留更改。

单击​ 保存 ​或​ 保存到库。

在左侧菜单中，转到​ 规则 ​并单击​ 添加规则。

输入名称： Display AJO Content Cards。 单击“+添加”以添加新事件。

选择​ 扩展： Adobe Experience Platform Web SDK，然后选择​ 事件类型： 订阅规则集项。

在​ 架构 ​下，选择​ 内容卡。

在​ 表面 ​下，输入web://dsn.adobe.com/web/--aepUserLdap---XXXX#CitiSignalContentCardContainer

单击​ 保留更改。

您应该会看到此内容。 单击​ +添加 ​以添加新操作。

选择​ 扩展： 核心，然后选择​ 操作类型： 自定义代码。

启用​ 语言： JavaScript ​的复选框，然后单击​ 打开编辑器。

此时，您应该会看到一个空的编辑器窗口。

将以下代码粘贴到编辑器中，然后单击​ 保存。

if (!Array.isArray(event.propositions)) {
  console.log("No personalization content");
  return;
}

console.log(">>> Content Card response from Edge: ", event.propositions);

event.propositions.forEach(function (payload) {
  payload.items.forEach(function (item) {
    if (!item.data || !item.data.content || item.data.content === "undefined") {
      return;
    }
    console.log(">>> Content Card response from Edge: ", item);
    const { content } = item.data;
    const { title, body, image, buttons } = content;
    const titleValue = title.content;
    const description = body.content;
    const imageUrl = image.url;
    const buttonLabel = buttons[0]?.text.content;
    const buttonLink = buttons[0]?.actionUrl;
    const html = `<div  class="Banner Banner--alignment-left Banner--verticalAlignment-left hero-banner ContentCardContainer"  oxygen-component-id="cmp-0"  oxygen-component="Banner"  role="presentation"  style="color: rgb(255, 255, 255); height: 60%;">  <div class="Image" role="presentation">    <img src="${imageUrl}" style="object-fit: cover; height: 100%"    />  </div>  <div class="Banner__content">    <div class="Title Title--alignment-left Title--textAlignment-left">      <div class="Title__content" role="presentation">        <strong class="Title__pretitle">${titleValue}</strong>        <h2>${description}</h2>      </div>    </div>    <div class="Button Button--alignment-left Button--variant-cta">              <button          class="Dniwja_spectrum-Button Dniwja_spectrum-BaseButton Dniwja_i18nFontFamily Dniwja_spectrum-FocusRing Dniwja_spectrum-FocusRing-ring"          type="button"          data-variant="accent"          data-style="fill"          onclick="window.open('${buttonLink}')"       style="color:#FFFFFF;padding: 12px 28px;font-size: 24px;font-family: adobe-clean;font-weight: bolder;" >          <span            id="react-aria5848951631-49"            class="Dniwja_spectrum-Button-label"            >${buttonLabel}</span          >        </button>            </div>  </div></div>`;
    if (document.querySelector(".CitiSignalContentCardContainer")) {
      const contentCardContainer = document.querySelector(
        ".CitiSignalContentCardContainer"
      );
      contentCardContainer.innerHTML = html;
      contentCardContainer.style.height = "60%";
    }
  });
});

单击​ 保留更改。

单击​ 保存 ​或​ 保存到库。

在左侧菜单中，转到​ 发布流，然后单击以打开​ Main ​库。

单击​ 添加所有更改的资源，然后单击​ 保存并生成到开发。

3.6.1.5在您的网站上测试您的内容卡

转到https://dsn.adobe.com。 使用Adobe ID登录后，您将看到此内容。 单击网站项目上的3个点​ …，然后单击​ 运行 ​以将其打开。

随后您将看到您的演示网站已打开。 选择URL并将其复制到剪贴板。

打开一个新的无痕浏览器窗口。

粘贴您在上一步中复制的演示网站的URL。 然后，系统将要求您使用Adobe ID登录。

选择您的帐户类型并完成登录过程。

您现在应该加载CitiSignal网站，并且现在应显示您配置的内容卡，而不是您之前所处的空白灰色区域。

后续步骤

转到3.6.2登陆页面

返回Adobe Journey Optimizer：内容管理

返回所有模块