单页应用程序实施

传统网站使用的是“页面到页面”导航模型，也称为多页应用程序，其中网站设计与 URL 紧密耦合，并且从一个网页转换到另一个网页时，需要页面加载。而现代 Web 应用程序（例如单页应用程序 (SPA)）采用的模型可以提高使用浏览器 UI 渲染的速度，这种渲染通常与页面重新加载无关。这些体验通常通过客户交互触发，例如滚动、点击和光标移动。随着现代 Web 范例的不断发展，传统的通用事件（例如页面加载）与部署个性化和实验不再具有相关性。

at.js 2.x 提供了丰富的功能，使您的企业能够在下一代客户端技术上实现个性化。此版本着重改进了 at.js，以便与 SPA 进行和谐的交互。

以下是使用 at.js 2.x 的一些好处，这些好处在以前的版本中未提供：

Adobe Target查看次数和单页应用程序

Adobe Target VEC for SPA利用了称为“视图”的新概念：视觉元素的逻辑组，这些元素共同构成了SPA体验。 因此，SPA 可以被认为是通过基于用户交互的视图（而不是 URL）进行的转换。“视图”通常可显示整个站点或某个站点中分组的可视化元素。

为进一步说明视图的概念，让我们浏览一下这个在React中实施的假定的在线电子商务网站，并探索一些视图示例。 单击下面的链接可在新浏览器选项卡中打开此站点。

链接：主站点

导航到主页时，我们可以立即看到展示复活节促销活动的主页横幅，以及网站上销售的最新产品。在这种情况下，可以将“视图”定义为整个 home 站点。请注意，这很容易做到，我们将在下面的“实现Adobe Target视图”部分中对此进行详细介绍。

链接：产品站点

当我们对企业销售的产品产生浓厚的兴趣时，我们将决定单击“Products”（产品）链接。与主页网站类似，可将整个产品站点定义为一个“视图”。我们可以将此视图命名为“products”（产品），就像 https://target.enablementadobe.com/react/demo/#/products) 中的路径名称一样。

在本节的开始位置，我们将“视图”定义为整个站点，甚至是站点上的一组可视化元素。如上所示，可以将站点上显示的四个产品划归一组并将它们视为一个视图。如果想要命名此视图，则可以将其命名为“products”（产品）。

我们决定单击“Load More”（了解更多）按钮，以浏览站点上的更多产品。在这种情况下，网站 URL 不会发生更改。但是，这里的视图只能呈现上面显示的第二行产品。此视图名称可称为“PRODUCTS-PAGE-2”。

链接： 结帐

因为喜欢网站上显示的一些产品，因此我们决定购买几个产品。现在，在结帐站点上，我们可以选择正常递送或快递。由于视图可以是网站上的任意一组可视化元素，因此我们可以将其命名为“View Delivery Preferences”（查看递送首选项）。

此外，视图的概念可以进一步扩展。如果营销人员想要根据所选择的递送首选项来对网站上的内容进行个性化，则可以为每个递送首选项创建一个视图。在这种情况下，当我们选择“Normal Delivery”（普通递送）时，可以将视图命名为“Normal Delivery”（普通递送）。如果选择了“Express Delivery”（快递），则可以将视图命名为“Express Delivery”（快递）。

现在，营销人员可能想要运行 A/B 测试，以查看与将两个交付选项的按钮颜色保持为蓝色相比，在选择“Express Delivery”（快递）后将按钮颜色从蓝色更改为红色是否可以提高转化率。

实施Adobe Target视图

既然我们介绍了Adobe Target查看的内容，我们可以在Target中利用此概念，使营销人员能够通过VEC在SPA上运行A/B和XT测试。 这将需要一次性开发人员设置。下面我们将完成这些步骤以进行此设置。

 function targetView() {
   var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash

   viewName = viewName || 'home'; // view name cannot be empty

   // Sanitize viewName to get rid of any trailing symbols derived from URL
   if (viewName.startsWith('#') || viewName.startsWith('/')) {
     viewName = viewName.substr(1);
   }

   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(viewName);
   }
 }

 // react router v4
 const history = syncHistoryWithStore(createBrowserHistory(), store);
 history.listen(targetView);

 // react router v3
 <Router history={hashHistory} onUpdate={targetView} >

链接：产品站点

现在，让我们来看一个比较复杂的示例。 假设我们是营销人员，想要在用户单击“Load More”（加载更多）按钮后将“Price”（价格）标签颜色更改为红色，以对第二行的产品进行个性化。

 function targetView(viewName) {
   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(viewName);
   }
 }

 class Products extends Component {
   render() {
     return (
       <button type="button" onClick={this.handleLoadMoreClicked}>Load more</button>
     );
   }

   handleLoadMoreClicked() {
     var page = this.state.page + 1; // assuming page number is derived from component's state
     this.setState({page: page});
     targetView('PRODUCTS-PAGE-' + page);
   }
 }

链接： 结帐

如果营销人员想要根据所选择的递送首选项来对网站上的内容进行个性化，则可以为每个递送首选项创建一个视图。在这种情况下，当我们选择“Normal Delivery”（普通递送）时，可以将视图命名为“Normal Delivery”（普通递送）。如果选择了“Express Delivery”（快递），则可以将视图命名为“Express Delivery”（快递）。

现在，营销人员可能想要运行 A/B 测试，以查看与将两个交付选项的按钮颜色保持为蓝色相比，在选择“Express Delivery”（快递）后将按钮颜色从蓝色更改为红色是否可以提高转化率。

 function targetView(viewName) {
   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(viewName);
   }
 }

 class Checkout extends Component {
   render() {
     return (
       <div onChange={this.onDeliveryPreferenceChanged}>
         <label>
           <input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
           <span> Normal Delivery (7-10 business days)</span>
         </label>

         <label>
           <input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
           <span> Express Delivery* (2-3 business days)</span>
         </label>
       </div>
     );
   }
   onDeliveryPreferenceChanged(evt) {
     var selectedPreferenceValue = evt.target.value;
     targetView(selectedPreferenceValue);
   }
 }

at.js 2.x 系统图

下图可帮助您了解含有视图的 at.js 2.x 工作流程以及其如何增强 SPA 集成。要更好地了解 at.js 2.x 中使用的概念，请参阅单页应用程序实施。

现在，无论在 SPA 上的什么位置实施 triggerView()，都会从缓存中检索查看次数和操作，并在没有服务器调用的情况下显示给用户。triggerView() 还会向 Target 后端发出通知请求，以增加和记录展示次数计数。

单页应用程序可视化体验编辑器

完成安装 at.js 2.x 并将 triggerView() 添加到站点后，便可使用 VEC 来运行 A/B 和 XT 活动。有关更多信息，请参阅单页应用程序 (SPA) 可视化体验编辑器。

使用TriggerView确保A4T与at.js 2.x和SPA一起正常工作

要确保Analytics for Target (A4T)与at.js 2.x一起正常工作，请务必在Target请求和Analytics请求中发送相同的SDID。

与 SPA 相关的最佳实践：

at.js 2.x 添加了一个新的 API triggerView() 函数。您应该使用 triggerView() 来通知 at.js 视图将开始渲染。

要了解如何组合自定义事件、at.js 2.x 和 Analytics，请参阅一个示例。此示例假设 HTML 页面包含访客 API，其后依次是 at.js 2.x 和 AppMeasurement。

假设存在以下自定义事件：

要确保结合使用 A4T 与 at.js 2.x，

视图开始处理程序应当如下：

document.addEventListener("at-view-start", function(e) {
  var visitor = Visitor.getInstance("<your Adobe Org ID>");

  visitor.resetState();
  adobe.target.triggerView("<view name>");
});

视图结束处理程序应当如下：

document.addEventListener("at-view-end", function(e) {
  // s - is the AppMeasurement tracker object
  s.t();
});

尽管这些示例使用的是JavaScript代码，但如果您正在使用标签管理器(例如Adobe Experience Platform中的标签)，则可以简化所有这些代码。

如果遵循上述步骤，则应该针对 SPA 提供一个强大的 A4T 解决方案。

实施最佳实践

at.js 2.x API允许您通过多种方式自定义您的Target实施，但务必要在此过程中遵循正确的操作顺序。

以下信息描述了在浏览器中首次加载单页应用程序时必须遵循的操作的顺序，以及之后发生的任何视图更改。

初始页面加载的操作顺序 order

SPA视图更改的操作顺序（无全页重新加载）

培训视频

以下视频包含更多信息：

了解 at.js 2.x 的工作原理

有关更多信息，请参阅了解 at.js 2.x 的工作方式。

在 SPA 中实施 at.js 2.x

有关详细信息，请参阅在单页应用程序(SPA)中实施Adobe Target的at.js 2.x}。

在Adobe Target中使用SPA的VEC

有关详细信息，请参阅在Adobe Target中使用单页应用程序的可视化体验编辑器(SPA VEC)。