单页应用程序实施
创建对象:
- 开发人员
传统网站使用的是“页面到页面”导航模型,也称为多页应用程序,其中网站设计与 URL 紧密耦合,并且从一个网页转换到另一个网页时,需要页面加载。而现代 Web 应用程序(例如单页应用程序 (SPA))采用的模型可以提高使用浏览器 UI 渲染的速度,这种渲染通常与页面重新加载无关。这些体验通常通过客户交互触发,例如滚动、点击和光标移动。随着现代 Web 范例的不断发展,传统的通用事件(例如页面加载)与部署个性化和实验不再具有相关性。
at.js 2.x 提供了丰富的功能,使您的企业能够在下一代客户端技术上实现个性化。此版本着重改进了 at.js,以便与 SPA 进行和谐的交互。
以下是使用 at.js 2.x 的一些好处,这些好处在以前的版本中未提供:
- 能够在页面加载时缓存所有选件,将多次服务器调用减少至一次服务器调用。
- 由于选件是通过缓存立即显示的,不存在传统服务器调用引入的时间延迟,因此极大地提升了最终用户在您网站上的体验。
- 通过简单的单行代码和一次性开发人员设置,您的营销人员能够通过 VEC 在 SPA 上创建和运行 A/B 和体验定位 (XT) 活动。
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测试。 这将需要一次性开发人员设置。下面我们将完成这些步骤以进行此设置。
-
安装 at.js 2。x。
首先,我们需要安装at.js 2.x 使用跨域跟踪功能时。此版本的at.js在开发时考虑了SPA。 at.js的早期版本不支持Adobe Target视图和SPA的VEC。
下载at.js 2.通过位于 Administration > Implementation 中的Adobe Target UI x。 at.js 2.x 也可以通过Adobe Experience Platform中的标记进行部署。
-
实施at.js 2.x 函数,
[triggerView()](https://experienceleague.adobe.com/docs/target-dev/developer/client-side/at-js-implementation/functions-overview/adobe-target-triggerview-atjs-2.html?lang=zh-Hans)
。在定义要运行A/B或XT测试的SPA视图之后,实施at.js 2.x
triggerView()
函数以及作为参数传入的视图。 这允许营销人员使用 VEC 来针对所定义的那些视图设计和运行 A/B 和 XT 测试。如果没有为这些视图定义triggerView()
函数,则 VEC 将不会检测到视图,因此营销人员将无法使用 VEC 来设计和运行 A/B 和 XT 测试。NOTE
要获得at.js中的视图支持,viewsEnabled必须设置为true,否则将禁用所有视图功能。adobe.target.triggerView(viewName, options)
参数类型必需?验证描述viewName字符串是1. 无尾随空格。
2. 不能为空。
3. 所有页面的视图名称应该都是唯一的。
4. 警告:视图名称不应以/
开头或结尾。这是因为客户通常会从 URL 路径中提取视图名称。对于我们来说,“home”和“/home
”是不同的。
5. 警告:不应使用{page: true}
选项连续多次触发同一视图。将任何名称作为要显示视图的字符串类型传递。此视图名称显示在VEC的 Modifications 面板中,供营销人员创建操作并运行其A/B和XT活动。options对象否options > page布尔值否TRUE:page 的默认值为 true。当page=true
时,将向 Edge 服务器发送增加展示次数计数的通知。
FALSE:当page=false
时,将不会发送增加展示次数计数的通知。 当您只想在具有选件的页面上重新渲染组件时,才应该使用此选项。现在,我们来查看一些关于如何在React中为假定的电子商务SPA调用
triggerView()
函数的示例用例:链接:主站点
作为营销人员,如果我们想要在整个主页网站上运行 A/B 测试,那么可能需要将视图命名为“home”。
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} >
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。
客户属性会以批量过程发送到配置文件存储区。
当前页面上的目标内容会在默认内容不发生闪烁的情况下尽快显示。
视图中作为 SPA 用户操作结果显示的目标内容会缓存在浏览器中,因此当通过
triggerView()
触发视图时,可以立即应用它而无需额外的服务器调用。Analytics数据。
现在,无论在 SPA 上的什么位置实施 triggerView()
,都会从缓存中检索查看次数和操作,并在没有服务器调用的情况下显示给用户。triggerView()
还会向 Target 后端发出通知请求,以增加和记录展示次数计数。
triggerView()
以渲染视图并应用操作来修改可视化元素。单页应用程序可视化体验编辑器
完成安装 at.js 2.x 并将 triggerView()
添加到站点后,便可使用 VEC 来运行 A/B 和 XT 活动。有关更多信息,请参阅单页应用程序 (SPA) 可视化体验编辑器。
triggerView()
的单页应用程序时,还可以使用一些其他功能。使用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。
假设存在以下自定义事件:
at-view-start
- 当视图开始渲染时at-view-end
- 当视图完成渲染时
要确保结合使用 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();
});
at-view-start
和 at-view-end
事件。这些事件并不是 at.js 自定义事件的一部分。尽管这些示例使用的是JavaScript代码,但如果您正在使用标签管理器(例如Adobe Experience Platform中的标签),则可以简化所有这些代码。
如果遵循上述步骤,则应该针对 SPA 提供一个强大的 A4T 解决方案。
实施最佳实践
at.js 2.x API允许您通过多种方式自定义您的Target实施,但务必要在此过程中遵循正确的操作顺序。
以下信息描述了在浏览器中首次加载单页应用程序时必须遵循的操作的顺序,以及之后发生的任何视图更改。
初始页面加载的操作顺序
如果您拥有数据层,我们建议您在执行Target请求之前加载发送至Target所需的关键数据。 这允许您使用targetPageParams
包含要用于定位的任何数据。
当targetGlobalSettings中的pageLoadEnabled
和viewsEnabled
设置为true时,at.js会在步骤2中自动为您请求所有VEC Target选件。
请注意,页面加载后,getOffers
也可用于获取VEC选件。 为此,请确保请求在API调用中包含execute>pageLoad
和prefetch>views
。
triggerView()
triggerView()
,并完成将选件应用到缓存。 每个视图必须只执行此步骤一次。triggerView({"page": false})
SPA视图更改的操作顺序(无全页重新加载)
visitor.resetState()
getOffers()
API更新缓存triggerView()
triggerView()
triggerView({"page": false})
培训视频
以下视频包含更多信息:
了解 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)。