单页应用程序实施

Adobe Experience Platform Web SDK提供了丰富的功能，使您的企业能够在下一代客户端技术(如单页应用程序(SPA))上实现个性化。

传统网站使用“页面到页面”导航模型，也称为多页面应用程序。 在这些网站中，设计与URL紧密关联，在页面之间移动需要完整页面加载。

而现代Web应用程序（如单页应用程序）采用的模型可以提高浏览器UI渲染的速度，这种渲染通常与页面重新加载无关。 这些体验由客户交互触发，例如滚动、点击和光标移动。 随着现代Web范例的不断发展，传统的通用事件（如页面加载）与部署个性化和实验不再具有相关性。

SPA的Experience Platform Web SDK的优势

以下是为单页应用程序使用Adobe Experience Platform Web SDK的一些好处：

XDM视图和单页应用程序

SPA Adobe Target VEC利用了名为Views的概念：视觉元素的逻辑组，这些元素共同构成了SPA体验。 因此，单页应用程序可以被视为基于用户交互通过视图（而不是URL）进行转换。 View通常可以表示整个站点或站点中分组的可视化元素。

为了进一步说明什么是视图，以下示例使用在React中实现的假想在线电子商务网站来探索示例Views。

导航到主页后，主页图像会宣传复活节促销活动以及网站上提供的最新产品。 在这种情况下，可以为整个主屏幕定义View。 此View可以简单地称为“home”。

随着客户对该企业销售的产品越来越感兴趣，他们决定单击​ 产品 ​链接。 与主页网站类似，可以将整个产品网站定义为View。 此View可以命名为“products-all”。

因为View可以定义为整个网站或网站上的一组可视化元素。 产品网站上显示的四个产品可分组并视为View。 此视图可命名为“products”。

当客户决定单击​ Load More ​按钮浏览站点上的更多产品时，在此情况下网站URL不会更改。 但是，可在此处创建View以仅表示所显示的第二行产品。 View名称可以是“products-page-2”。

客户决定从站点购买一些产品并进入结账屏幕。 在结账站点上，客户可以选择正常递送或快递。 View可以是网站上的任意一组可视化元素，因此可以为递送首选项创建View并称为“递送首选项”。

Views的概念可以进一步扩展。 这些方案只是可在网站上定义的Views的几个示例。

正在实施XDM Views

XDM Views可在Target中使用，以使营销人员能够通过Visual Experience Composer在SPA上运行A/B和XT测试。 要执行此操作，需要执行以下步骤以完成一次性开发人员设置：

sendEvent()函数示例

本节概述了三个示例，说明如何在React中为假定的电子商务SPA调用sendEvent()函数。

示例1：A/B测试主页

营销团队想要在整个主页上运行A/B测试。

要在整个主页网站上运行A/B测试，必须在将XDM sendEvent()设置为viewName的情况下调用home：

function onViewChange() {

  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);
  }

  alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName":"home"
        }
      }
    }
  });
}

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

示例2：个性化产品

营销团队想要在用户单击​ 加载更多 ​后将价格标签颜色更改为红色，以对第二行产品进行个性化。

function onViewChange(viewName) {

  alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName": 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});
    onViewChange('PRODUCTS-PAGE-' + page);
  }

}

示例3：A/B测试投放首选项

营销团队想要运行A/B测试，以查看在选择​ 快递 ​时，按钮的颜色是否从蓝色更改为红色。 团队认为此更改可以提高转化率（与将两个交付选项的按钮颜色保持为蓝色相反）。

要根据所选的投放首选项对网站上的内容进行个性化，可以为每个投放首选项创建View。 选择​ 正常投放 ​后，可以将View命名为“checkout-normal”。 如果选择​ Express Delivery，则可以将View命名为“checkout-express”。

function onViewChange(viewName) {
  alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName": 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;
    onViewChange(selectedPreferenceValue);
  }

}

将Visual Experience Composer用于SPA

当您完成定义XDM Views并在传入的sendEvent()中实施XDM Views后，VEC将能够检测到这些Views，并允许用户为A/B或XT活动创建操作和修改。

Modifications面板

Modifications面板捕获为特定View创建的操作。 View的所有操作都分组在该View下。

操作

单击某个操作会突出显示应用此操作的网站上的元素。 在View下创建的每个VEC操作都有以下图标： 信息、编辑、克隆、移动 ​和​ 删除。 下表将更详细地解释这些图标。

使用SPA VEC示例

本节概述了使用Visual Experience Composer为A/B或XT活动创建操作和修改的三个示例。

示例1：更新“主页”视图

本文前面为整个home站点定义了名为“home”的View。 现在，营销团队想要通过以下方式更新“主页”视图：

要在VEC中进行这些更新，请选择​ 撰写 ​并将这些更改应用于“主页”视图。

示例2：更改产品标签

对于“products-page-2”View，营销团队希望将​ Price ​标签更改为​ Sale Price，并将标签颜色更改为红色。

要在VEC中进行这些更新，需要执行以下步骤：

示例3：个性化投放偏好设置样式

可在粒度级别定义Views，例如单选按钮中的状态或选项。 本文前面针对投放首选项“checkout-normal”和“checkout-express”定义了Views。 营销团队想要将“checkout-express”视图的按钮颜色更改为红色。

要在VEC中进行这些更新，需要执行以下步骤：