ドキュメント Journey Optimizer Journey Optimizer ガイド

シングルページアプリケーション（SPA）の実装 web-spa-implementation

最終更新日： 2026年9月16日

作成対象：

Intermediate
Developer

Adobe Experience Platform Web SDKは、シングルページアプリケーション（SPA）などの次世代のクライアントサイドテクノロジーでパーソナライゼーションを実現するための豊富な機能を提供します。

従来のweb サイトは、「ページからページへ」のナビゲーションモデル（マルチページアプリケーション）で動作します。このモデルでは、web サイトのデザインとURLを密接に関連付け、あるweb ページから別のweb ページへの移行にページ読み込む必要があります。

シングルページアプリケーション（SPA）などの最新のweb アプリケーションでは、ページのリロードに依存しないことが多いブラウザーUI レンダリングを迅速に使用できるモデルが採用されています。こうしたエクスペリエンスは、スクロール、クリック、カーソルの移動など、顧客とのやり取りによってトリガーできます。現代のwebのパラダイムが進化するにつれ、ページ読み込みなどの従来の一般的なイベントを利用して、パーソナライゼーションと実験を展開する関連性はもはや機能しません。

ページライフサイクル図。

SPAにWeb SDKを使用する利点 web-spa-benefits

ここでは、シングルページアプリケーションにWeb SDKを使用する利点をいくつか紹介します。

ページ読み込み時にすべてのオファーをキャッシュし、複数のサーバー呼び出しを単一のサーバー呼び出しに減らす機能。
オファーは従来のサーバー呼び出しによって遅延することなく、キャッシュ経由ですぐに表示されるため、サイトのユーザーエクスペリエンスが大幅に向上します。
開発者が1回限り設定すると、マーケターは、SPA上のAdobe Journey Optimizer Web ビジュアルエディターを使用して、パーソナライゼーションおよび実験アクティビティを作成および実行できます。

XDM ビューとシングルページアプリケーション web-spa-xdm

Journey Optimizer web エディターでは、viewsという概念を利用しています。

ビューは、SPA エクスペリエンスを構成するビジュアル要素の論理的なグループです。したがって、単一ページアプリケーションは、ユーザーのインタラクションに基づいて、URLではなくビューを介して移行と見なすことができます。ビューは通常、サイト全体、単一ページ、またはページ内のグループ化されたビジュアル要素を表します。

次の例では、ビューの詳細を説明するために、架空のオンライン e コマースサイトを使用しています。

ホームページに移動すると、季節のコレクションや、サイトで利用可能なさまざまな商品カタログがヒーロー画像で紹介されています。この場合、ホーム画面全体に対してビューを定義できます。このビューは単に「ホーム」と呼ぶことができます。
顧客が販売している商品に関心を持つようになると、男性リンクをクリックすることにしました。ホームページと同様に、Men ページ全体をビューとして定義できます。このビューには「men」という名前を付けることができます。
ビューは、サイト全体またはサイト上の視覚要素のグループとして定義できるので、製品サイトに表示される4つの製品をグループ化し、ビューとして考慮することができます。このビューには「products」という名前を付けることができます。
お客様がALL MEN’S PRODUCTS ボタンをクリックしてサイト上の他の製品を検索することを決定した場合、この場合、web サイトのURLは変更されませんが、表示される製品の2行目のみを表すビューをここで作成できます。ビュー名は「products-page-2」にすることができます。
顧客はサイトから商品を購入し、チェックアウト画面に進みます。買い物かご画面自体は、「買い物かご」という名前のビューに関連付けることができます。あるいは、チェックアウト画面の中に別のビューを表示して、以下のおすすめ商品を処理することもできます。

ビューの概念は、これよりはるかに拡張できます。サイトで定義できるビューの例をいくつか示します。

XDM ビューの実装 implement-xdm-views

XDM ビューをAdobe Journey Optimizerで活用すると、マーケターはJourney Optimizer web ビジュアルエディターを使用して、SPAでweb パーソナライゼーションおよび実験キャンペーンを実行できます。

1回限りの開発者セットアップを完了するには、次の手順を実行する必要があります。

Adobe Experience Platform Web SDKをインストールし、web チャネルの前提条件ページを確認します。
パーソナライズするシングルページアプリケーションのすべてのXDM ビューを決定します。
XDM ビューを定義した後、これらのビューにコンテンツを配信するには、renderDecisionsがtrueに設定されたsendEvent()関数と、対応するXDM ビューをシングルページアプリケーションに実装する必要があります。 XDM ビューはxdm.web.webPageDetails.viewNameで渡す必要があります。このステップでは、マーケターはJourney Optimizerのweb エディターでこれらのビューを見つけ出し、コンテンツの変更を適用できます。

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

NOTE

最初のsendEvent()呼び出しでは、エンドユーザーにレンダリングされるすべてのXDM ビューが取得され、キャッシュされます。 XDM ビューが渡された後のsendEvent()呼び出しは、キャッシュから読み取られ、サーバーコールなしでレンダリングされます。

`sendEvent()`関数の例

この節では、仮想e コマース SPAに対してReactでsendEvent()関数を呼び出す方法を示す2つの例の概要を説明します。

例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の商品をすべて表示するように、価格ラベルの色を赤に変更することで、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
            } > 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