文档 Journey Optimizer Journey Optimizer 指南

实施单页应用程序(SPA) web-spa-implementation

最近更新： 2026年9月9日

创建对象：

Intermediate
Developer

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

传统网站使用的是“页面到页面”导航模型，也称为多页面应用程序，其中网站设计与URL紧密耦合，并且从一个网页转换到另一个网页时，需要页面加载。

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

页面生命周期图表。

为SPA使用Web SDK的好处 web-spa-benefits

以下是将Web SDK用于单页应用程序的一些好处：

能够在页面加载时缓存所有产品建议，将多次服务器调用减少至一次服务器调用。
由于选件是通过缓存立即显示的，不存在传统服务器调用引入的时间延迟，因此极大地提升了网站上的用户体验。
通过一次性开发人员设置，营销人员可通过Adobe Journey Optimizer Web可视化编辑器在您的SPA上创建并运行个性化和试验活动。

XDM视图和单页应用程序 web-spa-xdm

Journey Optimizer Web编辑器利用了名为视图的概念。

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

为了进一步说明视图是什么，以下示例使用了一个假定的在线电子商务网站。

导航到主页后，主页图像会宣传季节性系列以及网站上提供的不同产品目录。在这种情况下，可以为整个主屏幕定义视图。这种观点可以简单地称为“家”。
随着客户对该企业销售的产品越来越感兴趣，他们决定单击 Men 链接。与主页类似，可以将 Men 页面的整个定义为视图。这个观点可以命名为“men”。
由于视图可以定义为整个站点或站点上的一组可视化元素，因此产品站点上显示的四个产品可以分组并视为一个视图。此视图可命名为“products”。
当客户决定单击 ALL MEN’S PRODUCTS 按钮以浏览站点上的更多产品时，在此情况下，网站URL不会更改，但可以在此处创建视图以仅表示显示的第二行产品。视图名称可以是“products-page-2”。
客户决定从站点购买一些产品并进入结账屏幕。购物车屏幕本身可以与名为“cart”的视图关联。或者，您可以在签出屏幕内部使用不同的视图来处理以下推荐的产品。

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

实施XDM视图 implement-xdm-views

可在Adobe Journey Optimizer中利用XDM视图，使营销人员能够通过Journey Optimizer Web可视化编辑器在SPA上运行Web个性化和实验营销活动。

这需要执行以下步骤以完成一次性开发人员设置：

安装Adobe Experience Platform Web SDK并检查Web渠道先决条件页面。
确定单页应用程序中要个性化的所有XDM视图。
在定义XDM视图后，为了向这些视图交付内容，您需要在单页应用程序中实施sendEvent()函数并将renderDecisions设置为true以及相应的XDM视图。必须在xdm.web.webPageDetails.viewName中传递XDM视图。此步骤允许营销人员在Journey Optimizer Web编辑器中发现这些视图，并为这些视图应用内容修改：

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

NOTE

在第一个sendEvent()调用中，将获取并缓存所有应该呈现给最终用户的XDM视图。将从缓存中读取后续的sendEvent()调用（已传入XDM视图），并在不进行服务器调用的情况下进行渲染。

`sendEvent()`函数示例

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

示例1：A/B测试主页 web-spa-sample-1

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

单页应用程序示例页面。

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

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：个性化产品 web-spa-sample-2

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

包含个性化产品的单页应用程序示例页面。

function onViewChange(viewName) {

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

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</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);
    }
}

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page explains how developers implement XDM views in single-page applications (SPAs) using the Adobe Experience Platform Web SDK so marketers can run personalization and experimentation on those views through the Journey Optimizer web visual editor.

Intents:

Understand how XDM views represent SPA experiences instead of URLs
Perform the one-time developer setup to implement XDM views
Deliver content to views using sendEvent() with renderDecisions set to true
Pass the XDM view name in xdm.web.webPageDetails.viewName
Invoke sendEvent() in React for view changes in an SPA

Glossary:

Single-page application (SPA): A modern web application that uses browser UI rendering often independent of page reloads, triggered by interactions such as scrolls, clicks, and cursor movements (product-specific)
View: A logical group of visual elements which together make up an SPA experience; can represent a whole site, a single page, or grouped visual elements within a page (product-specific)
XDM view: A view that can be leveraged in Adobe Journey Optimizer to run web personalization and experimentation campaigns on SPAs via the web visual editor (product-specific)
viewName: The XDM field (xdm.web.webPageDetails.viewName) that carries the view being rendered (product-specific)

Guardrails:

Implementing XDM views requires a one-time developer setup performed in order: install the Adobe Experience Platform Web SDK, check the web channel prerequisites, determine all XDM views to personalize, and implement sendEvent() with renderDecisions set to true and the corresponding XDM view.
The XDM view must be passed in xdm.web.webPageDetails.viewName.
A view name cannot be empty.
On the first sendEvent() call, all XDM views that should be rendered are fetched and cached; subsequent sendEvent() calls with XDM views passed in are read from the cache and rendered without a server call.

Terminology:

Canonical name: XDM view — Acronym: n/a — variants: view, viewName
Synonyms: “single-page application” = “SPA”
Do not confuse: “multi-page application” (page-to-page navigation requiring a page load) ≠ “single-page application” (browser UI rendering independent of page reloads)

FAQ:

Q: What is a view in the context of SPAs? — A logical group of visual elements that make up an SPA experience; it can be a whole site, a single page, or grouped elements within a page.
Q: Where is the view name passed? — In xdm.web.webPageDetails.viewName within the sendEvent() call.
Q: Does every view change trigger a server call? — No; the first sendEvent() call fetches and caches all views to be rendered, and subsequent calls with views passed in are served from the cache without a server call.
Q: What enables marketers to discover views in the web editor? — Implementing sendEvent() with renderDecisions set to true and the corresponding XDM view allows marketers to discover the views inside the Journey Optimizer web editor.

recommendation-more-help

journey-optimizer-help