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

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

最終更新日： 2026年10月17日

作成対象：

中級
開発者

Adobe Experience Platform Web SDK には、シングルページアプリケーション（SPA）などの次世代のクライアントサイドテクノロジーでパーソナライゼーションをビジネスで実行するためのリッチな機能が用意されています。

従来の web サイトは、「ページ間」ナビゲーションモデル（別名マルチページアプリケーション）を使用しています。このモデルでは、web サイトデザインは URL と密接に結合され、ある web ページから別のページへのトランジションにはページ読み込みが必要になります。

シングルページアプリケーション（SPA）などの最新型 web アプリケーションは、代わりにブラウザーの UI レンダリングの迅速な使用を推進するモデルを採用しています。多くの場合、ブラウザーの UI レンダリングは、ページの再読み込みとは独立しています。これらのエクスペリエンスは、スクロール、クリック、カーソル移動などの顧客のインタラクションによってトリガーされる場合があります。最新の web の枠組みが進化するにつれて、パーソナライゼーションと実験をデプロイするためのページ読み込みなどの従来の汎用イベントは機能しなくなりました。

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

SPA に Web SDK を使用するメリット web-spa-benefits

シングルページアプリケーション（SPA）に Web SDK を使用するメリットは次のとおりです。

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

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

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

ビューは、SPA エクスペリエンスを構成する視覚要素の論理的なグループです。このため、シングルページアプリケーションは、URL ではなくユーザーのインタラクションによりビュー間を移行するものと考えられます。通常、ビューはサイト全体、シングルページまたはページ内のグループ化された視覚要素を表せます。

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

ホームページに移動すると、季節のコレクションや、サイトで使用可能な様々な製品カタログがヒーロー画像で宣伝されています。この場合、ホーム画面全体に対してビューを定義できます。このビューは、シンプルに「ホーム」と呼ぶことができます。
顧客が販売されている製品に興味を引かれたため、「男性」リンクをクリックすることにします。ホームページと同様、男性ページ全体をビューとして定義できます。このビューには「men」という名前を付けることができます。
ビューは、サイト全体またはサイト上の視覚要素のグループとして定義できるので、製品サイトに表示される 4 つの製品をグループ化し、ビューとして考慮できます。このビューには「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

マーケティングチームは、ユーザーがクリックして、すべての男性用の製品を表示した後、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.

Personas:

developer: Can install the Adobe Experience Platform Web SDK and check the web channel prerequisites. Can determine all XDM views in the single-page application and implement the sendEvent() function with renderDecisions set to true, passing the view in xdm.web.webPageDetails.viewName. The page states that a view name cannot be empty. Where: “Implementing XDM views”.

Onboarding:

Level: Intermediate
First minimal step: Install the Adobe Experience Platform Web SDK and check the web channel prerequisites.
Success check: Marketers can discover the XDM views inside the Journey Optimizer web editor and apply content modifications to them.
Previous: Check the web channel prerequisites before implementing XDM views: Web channel prerequisites (web/web-prerequisites.md)

recommendation-more-help

journey-optimizer-help