シングルページアプリケーションの作成 web-author-spas

このページ: Web SDKの実装でビューを定義し、参照モードでweb デザイナーで見つけ、選択したビューに変更を適用することで、Adobe Journey Optimizerでシングルページアプリケーションを作成する方法を説明します。

ビューについて about-views

シングルページアプリケーション(SPA)を web designer のビジュアルエディターで作成できるようになりました。 これにより、web ページの変更を適用する特定の​ ビュー ​を選択できます。

このビデオでシングルページアプリケーションの作成方法を学ぶ

ビューは、サイト全体またはサイト上のビジュアル要素のグループ(ホームページ、製品サイト全体、すべてのチェックアウトページの配信設定フレームなど)として定義できます。

Adobe Experience Platform Web SDK 実装でビューを定義するには、1 回限りの開発者設定が必要です。 これにより、SPA 上で Adobe Journey Optimizer web キャンペーンを作成し、実行できます。

Web SDK 実装でのビューの定義 define-views

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

Journey Optimizer ユーザーインターフェイスでビューへのアクセスやビューを作成するには、こちらの節に記載されている手順に従うようにしてください。

Web designer でビューの確認 discover-views

Adobe Experience Platform Web SDK の実装で SPA の設定が完了したら、変更を適用する web サイトのすべてのビューに移動する必要があります。 次の手順に従います。

  1. Web ジャーニーまたはキャンペーンを作成して、web designer にアクセスします。

    現在表示中のビューは左上に表示されます。

  2. 参照​モードにスワップします。 詳細情報

  3. Web サイトの様々なページ間を移動し、それらすべてを確認します。 上部に表示されるビュー名は、別のページを閲覧する際に変更されます。

他のビューへの変更の適用 apply-modifications-views

特定のビューで変更を追加した後は、選択した他のビューに適用できます。 次の手順に従います。

CAUTION
参照​モードを使用してビューが見つからない場合は、変更を適用するために選択することはできません。 詳細情報
  1. 変更​アイコンを選択して、対応するパネルを左側に表示します。

  2. 変更を選択し、その横にある「その他のアクション」ボタンをクリックします。 「他のビューに適用」を選択します。

  3. 変更を適用するビューを選択します。

  4. 適用」をクリックします。

  5. 参照​モードにスワップして、目的のページに変更が適用されていることを確認します。

チュートリアルビデオ video

このビデオでは、次の方法を説明します。

  • 参照​モードを使用して SPA ビューを見つける
  • 現在のビューでオーサリングを実行
  • 複数のビューまたは検出されたすべてのビューに web サイトの変更を適用
  • 変更に対する一括アクションを実行
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 to author single-page applications in the Journey Optimizer web designer by defining views in the Web SDK implementation, discovering them with Browse mode, and applying modifications to selected views.

Intents:

  • Author single-page applications (SPAs) in the web designer visual editor
  • Define views in the Adobe Experience Platform Web SDK implementation
  • Discover views in the web designer using Browse mode
  • Apply a modification made in one view to other selected views
  • Perform bulk actions on modifications across views

Glossary:

  • View: A whole site or a group of visual elements on a site, such as the home page, the entirety of the products site, or the delivery preferences frame on all the checkout pages (product-specific)
  • Browse mode: A web designer mode used to navigate through the pages of a website to discover its views (product-specific)
  • Apply to more views: A More actions option that applies a selected modification to other selected views (product-specific)
  • Modifications pane: The left-side pane displaying modifications, from which more actions can be taken on each modification (product-specific)

Guardrails:

  • A one-time developer setup is needed to define the views in the Adobe Experience Platform Web SDK implementation before views can be authored.
  • If you have not discovered views using Browse mode, you will not be able to select them for applying your modifications.
  • Applying a modification to other views requires first adding a modification while in a specific view.

Terminology:

  • Canonical name: View — Acronym: n/a — variants: SPA view
  • Synonyms: “single-page application” = “SPA”
  • Do not confuse: “Browse mode” (used to discover and navigate to views) ≠ “Apply to more views” (action that applies a modification to other selected views)

FAQ:

  • Q: How do I discover the views of my website? — Access the web designer, swap to Browse mode, and navigate between the different pages; the view name displayed on top changes as you go through each page.
  • Q: Why can I not select views to apply my modifications to? — You must first discover the views using Browse mode; otherwise you cannot select them.
  • Q: How do I apply a modification to other views? — In the Modifications pane, select the modification, click More actions, choose Apply to more views, select the target views, and click Apply.
  • Q: What is the prerequisite for authoring SPAs? — A one-time developer setup to define the views in the Adobe Experience Platform Web SDK implementation.
recommendation-more-help
journey-optimizer-help