添加 Adobe Target

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

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

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

转到 Extensions > Catalog

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

单击 Install

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

单击 Save to Library

转到 规则 ，然后单击 All Pages - Library Loaded 以打开规则编辑器

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

选择 Extension > Adobe Target v2

选择 Action Type > Load Target

单击 Keep Changes

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

选择 Extension > Adobe Target v2

选择 Action Type > Fire Page Load Request

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

单击 Keep Changes

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

单击 Save to Library and Build

重新加载示例页面。此时，页面应该不会再延迟 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() 方法）

转到 规则 ，然后单击 All Pages - Library Loaded 以打开规则编辑器。

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

选择 Extension > Adobe Target v2

选择 Action Type > Add Params to Page Load Request

输入 pageName 作为 Name

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

单击 Page Name 数据元素

单击 Select 按钮

单击 Keep Changes

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

单击 Save to Library and Build

打开 Luma 网站

确保Debugger将标记属性映射到 您的 开发环境，如 早先的教训

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

返回 Luma 主页

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

单击“网络”选项卡

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

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

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

转到 管理>属性

标识要使用的资产，然后单击 </> （或创建新资产）

将相应的代码段复制到 <script></script> 到您的剪贴板

在标记选项卡中，转到 规则 ，然后单击 All Pages - Library Loaded 以打开规则编辑器。

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

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

单击 保存 按钮

查看 全局执行 框so targetPageParams() 在全局范围内声明

单击 Keep Changes

单击 Save to Library and Build

打开 Luma 网站

确保Debugger将标记属性映射到 您的 开发环境，如 早先的教训

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

单击“网络”选项卡

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

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

单击 Add Data Element

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

选择 Data Element Type > Custom Code

对于 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 选项

单击 Save to Library

单击 规则 在左侧导航中

单击 Add Rule

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

单击 Events > Add

1. 选择 Event Type > Library Loaded (Page Top)
2. 下 高级选项，更改 Order 到 60 这样它就会在 Load Target 操作(位于我们的 All Pages - Library Loaded 规则，其中 Order 设置为 50)
3. 单击 Keep Changes

单击 Conditions > Add

1. 选择 Condition Type > Path Without Query String

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. 单击 Keep Changes

单击 Actions > Add

1. 选择 Action Type > Custom Code

2. 单击 Open Editor

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. 单击 Save 以保存自定义代码

5. 单击 Keep Changes 以保留操作

单击 Save to Library and Build

打开 Luma 网站

确保Debugger将标记属性映射到 您的 开发环境，如 早先的教训

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

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

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

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

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

单击“网络”选项卡

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

单击第二个请求

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