添加 Adobe Target

扩展配置，用于管理核心库设置

规则操作，用于执行以下操作：

1. 加载 Target (at.js 2.x)
2. 向页面加载请求添加参数
3. 向所有请求添加参数
4. 触发页面加载请求

转到​ 扩展>目录

在筛选器中键入 target 以快速找到 Adobe Target 扩展。共有两个扩展 - Adobe Target 和 Adobe Target v2。本教程将使用 v2 版扩展，该扩展使用最新版 at.js（当前为 2.x），该版本既适用于传统网站，也适用于单页面应用程序 (SPA)。

单击​ 安装

添加扩展时，它将从 Target 界面中导入许多（但并不是所有）at.js 设置，如下图所示。其中有一项设置不会导入，那就是 Timeout，此设置在添加该扩展后始终为 3000 毫秒。在本教程中，请保留默认设置。请注意，左侧将显示扩展的当前版本附带的 at.js 版本。

单击​ 保存到库

转到左侧导航中的​ Rules，然后单击All Pages - Library Loaded以打开规则编辑器

在 Actions 下，单击 以添加新操作

选择​ 扩展> Adobe Target v2

选择​ 操作类型>加载Target

单击​ 保留更改

在 Actions 下，再次单击 以添加其他操作

选择​ 扩展> Adobe Target v2

选择​ 操作类型>触发页面加载请求

页面加载请求有一些配置，这些配置涉及是否隐藏页面以及用于预隐藏的 CSS 选择器。这些设置可与页面上硬编码的预隐藏代码片段结合使用。保留默认设置。

单击​ 保留更改

新操作将在 Load Target 操作后依次添加，这些操作将按此顺序执行。您可以拖放操作以重新排列顺序，但在此场景中，Load Target 需要先于 Fire Page Load Request 执行。

单击​ 保存到库并生成

重新加载示例页面。此时，页面应该不会再延迟 3 秒才显示。如果您使用 file:// 协议加载示例页面，则应该在 Firefox 或 Safari 浏览器中执行此步骤，因为使用 file:// 协议时，Chrome 不会触发 Target 请求。

打开 Luma 网站

如前面的课程中所述，确保Debugger将标记属性映射到​ 您的 ​开发环境

转到 Debugger 的“摘要”选项卡

在 Launch 部分中，确认 Target 显示在 Extensions 标题下

在 Target 部分中，确认显示您的 at.js 库版本

最后，转到 Target 选项卡，展开您的客户端代码，并确认显示您的页面加载请求：

Add Params to Page Load Request，可向页面加载请求添加参数（等效于 targetPageParams() 方法）

Add Params to All Requests，可在所有 Target 请求中添加参数，例如页面加载请求以及从 Custom Code 操作发出或在您的网站上硬编码的其他请求（等效于 targetPageParamsAll() 方法）

转到左侧导航中的​ Rules，然后单击All Pages - Library Loaded以打开规则编辑器。

在 Actions 下，单击 以添加新操作

选择​ 扩展> Adobe Target v2

选择​ Action Type > Add Params to Page Load Request

输入pageName作为​ Name

单击 以打开数据元素模式窗口

单击 Page Name 数据元素

单击​ 选择 ​按钮

单击​ 保留更改

单击并拖动 Add Params to Page Load Request 操作的左边缘，以重新排列该操作，使其位于 Fire Page Load Request 操作之前（可在 Load Target 之前或之后）

单击​ 保存到库并生成

打开 Luma 网站

如前面的课程中所述，确保Debugger将标记属性映射到​ 您的 ​开发环境

使用凭据 test@adobe.com/test 登录 Luma 网站

返回 Luma 主页

打开浏览器的开发人员工具

单击“网络”选项卡

使用 tt.omtrdc（或 Target 请求的 CNAME'd 域）筛选请求

展开 Headers > Request Payload > id.customerIds.0 部分以验证客户 ID 设置和值：

在单独的选项卡中，打开 Target 用户界面

转到​ 管理>属性

识别要使用的属性，然后单击​ </>（或创建新属性）

将<script></script>中的代码段复制到剪贴板

在标记选项卡中，转到左侧导航栏中的​ Rules，然后单击All Pages - Library Loaded以打开规则编辑器。

在 Actions 下，单击 Core - Custom Code 操作以打开 Action Configuration

打开代码编辑器并从包含targetPageParams()函数的Target界面粘贴代码

单击​ 保存 ​按钮

选中​ 全局执行 ​框，以便在全局范围中声明targetPageParams()

单击​ 保留更改

单击​ 保存到库并生成

打开 Luma 网站

如前面的课程中所述，确保Debugger将标记属性映射到​ 您的 ​开发环境

打开浏览器的开发人员工具

单击“网络”选项卡

使用 tt.omtrdc（或 Target 请求的 CNAME'd 域）筛选请求

展开 Headers > Request Payload > property.token 部分以验证值

单击​ 添加数据元素

将数据元素命名为 Cart SKUs (Target)

选择​ 数据元素类型>自定义代码

对于 Target，SKU 必须是一个逗号分隔列表。此自定义代码会将数据层数组重新设置为适当的格式。在自定义代码编辑器中，粘贴以下内容：

var targetProdSkus="";
for (var i=0; i<digitalData.cart.cartEntries.length; i++) {
  if(i>0) {
    targetProdSkus = targetProdSkus + ",";
  }
  targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku;
}
return targetProdSkus;

查看 Force lowercase value 选项

查看 Clean text 选项

单击​ 保存到库

单击左侧导航栏中的​ 规则

单击​ 添加规则

将规则命名为 Order Confirmation Page - Library Loaded - 60

单击​ 事件>添加

1. 选择​ Event Type > Library Loaded (Page Top)
2. 在​ 高级选项 ​下，将Order更改为60，以便它在Load Target操作（位于我们的All Pages - Library Loaded规则中，Order设置为50）之后触发
3. 单击​ 保留更改

单击​ 条件>添加

1. 选择​ 条件类型>路径（不含查询字符串）

2. 对于 Path equals，输入 thank-you.html

3. 打开正则表达式选项，将逻辑由 equals 更改为 contains（可使用 Test 功能确认在 URL https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html 中是否将通过测试）

   

4. 单击​ 保留更改

单击​ 操作>添加

1. 选择​ 操作类型>自定义代码

2. 单击​ 打开编辑器

3. 将以下代码粘贴到 Edit Code 模式窗口中

   code language-javascript

   adobe.target.getOffer({ "mbox": "orderConfirmPage", "params":{ "orderId": _satellite.getVar('Order Id'), "orderTotal": _satellite.getVar('Cart Amount'), "productPurchasedId": _satellite.getVar('Cart SKUs (Target)') }, "success": function(offer) { adobe.target.applyOffer({ "mbox": "orderConfirmPage", "offer": offer }); }, "error": function(status, error) { console.log('Error', status, error); } });

4. 单击​ 保存 ​以保存自定义代码

5. 单击​ 保留更改 ​以保留操作

单击​ 保存到库并生成

打开 Luma 网站

如前面的课程中所述，确保Debugger将标记属性映射到​ 您的 ​开发环境

浏览网站并向购物车中添加一些产品

继续操作直到进入结账流程

在结账过程中，必填字段仅包括 First Name 和 Last Name

在 Review Order 页面上，确保单击 Place Order 按钮

打开浏览器的开发人员工具

单击“网络”选项卡

使用 tt.omtrdc（或 Target 请求的 CNAME'd 域）筛选请求

单击第二个请求

展开 Headers > Request Payload > execute.mboxes.0 部分以验证请求名称和订单参数：