ドキュメントTargetTarget ガイド

シングルページアプリケーション（SPA）Visual Experience Composer

Last update: Mon Apr 24 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Adobe Target では、Visual Experience Composer（VEC）により、マーケティング担当者が自らアクティビティを作成して、エクスペリエンスをパーソナライズすることができます。その際、Adobe Target のグローバル mbox を介して、従来のマルチページアプリケーションで動的に配信することが可能です。ただし、以下の図に示すように、オファーを取得する際のページの読み込みや後続のサーバー呼び出しによっては、遅延が生じます。シングルページアプリケーション（SPA）の場合は、ユーザーエクスペリエンスとアプリケーションのパフォーマンスが低下することから、適切な手法とは言えません。

従来のライフサイクルと SPA のライフサイクルの比較

最新リリースでは、SPA 用の VEC が導入されました。SPA VEC を使用すると、開発部門に継続的に依存することなく、マーケティング担当者が自ら SPA でテストを作成したりコンテンツをパーソナライズしたりすることができます。VEC では、React や Angular などの人気あるフレームワークで A/B テストやエクスペリエンスターゲット設定（XT）アクティビティを作成することが可能です。

Adobe Target ビューとシングルページアプリケーション

SPA の Adobe Target VEC は、ビューと呼ばれる新しい概念を活用します。ビューとはビジュアル要素の論理的集合体で、全体として SPA のエクスペリエンスを形作ります。このため SPA は、URL ではなくユーザーのインタラクションによりビュー間を移行するものと考えられます。通常、ビューはサイト全体またはサイト内のグループ化されたビジュアル要素を表せます。

ビューとは何かをさらに説明するために、React で実装された架空のオンライン e コマースサイトを操作して、ビューの例を見てみましょう。 下のリンクをクリックして、このサイトを新しいブラウザータブで開きます。

リンク： ホームサイト

ホームサイト

ホームサイトに移動すると、イースターセールで使われるヒーローの画像と、サイトで販売されている最新製品を確認できます。この場合、ビューはホームサイト全体として定義できます。この点については、後述の「Adobe Target ビューの実装」セクションで詳しく説明します。

リンク： 製品サイト

製品サイト

製品への関心が増してきたところで、製品のリンクをクリックします。ホームサイトと同様、製品サイト全体をビューとして定義できます。このビューには https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products のパス名と同様に「products」という名前を付けられます。

製品サイト 2

このセクションの冒頭は、ビューをサイト全体またはサイト上の視覚要素のグループとして定義しました。上記のように、サイトに表示されている 4 つの製品をグループ化して、ビューとしても考えられます。このビューに名前を付ける場合は、「products」という名前を使用できます。

製品サイト 3

「Load More」ボタンをクリックすると、サイトに掲載されている他の製品を見ることができます。この場合、web サイトの URL は変化しません。ただし、ここにあるビューは、上に示されている製品の 2 列目のみを表示できます。例えば、表示名を「PRODUCT-PAGE-2」にします。

リンク： チェックアウト

チェックアウトページ

サイトに表示されている製品が気に入ったので、いくつかを購入することにしました。現在、チェックアウトサイトでは、通常配送または速達配送を選択できるようになっています。サイト上のどのような視覚要素グループもビューにすることができるので、このビューに「Delivery Preferences」と名前を付けることが可能です。

さらに、ビューの概念を大きく拡張することもできます。マーケティング担当者が、選択された配送設定に合わせてサイト上のコンテンツをパーソナライズする場合は、その配送設定ごとにビューを作成できます。例えば、通常配送を選択した場合、ビューに「Normal Delivery」と名前を付けることができます。速達配送を選択した場合には、ビューを「Express Delivery」という名前にすることができます。

これで、マーケティング担当者は A/B テストを実行し、速達配送が選択されたときにボタンの色を青から赤に変更することで、どちらの配送オプションでも青のままにする場合と比較してコンバージョンが促進されるかどうかを確認できます。

Adobe Target ビューの実装

Adobe Target ビューとは何かを説明したので、Target でこの概念を活用して、マーケティング担当者が VEC を介して SPA で A/B テストや XT テストを実行できるようにできます。これには開発者による 1 回限りの設定が必要です。次に、これを設定する手順を説明します。

  1. at.js 2.x をインストールします。

    まず、at.js 2.x をインストールする必要があります。このバージョンの at.js は、SPA を考慮して開発されました。at.js の以前のバージョンでは、Adobe Target ビューと SPA VEC はサポートされていません。

    実装の詳細ダイアログボックス

    Adobe Target UI で管理／実装を選択し、at.js 2.x をダウンロードします。at.js 2.x は、 Adobe Experience Platform. ただし、Adobe Target の拡張機能は現在最新ではなく、サポートされていません。

  2. at.js 2.x の最新の関数を実装します。 triggerView() 」を選択します。

    A/B テストまたは XT テストを実行するSPAのビューを定義したら、at.js 2.x の triggerView() 関数内で Views をパラメーターとして渡します。 これにより、マーケティング担当者は VEC を使用し、定義されたビューに対して A/B テストと XT テストを設計して実行できます。これらのビューに対して triggerView() 関数が定義されていない場合、VEC はビューを検出しません。そのため、マーケティング担当者は VEC を使用して A/B テストや XT テストを設計して実行できません。

    adobe.target.triggerView(viewName, options)

    table 0-row-5 1-row-5 2-row-5 3-row-5
    パラメーター タイプ 必須？ 検証 説明
    viewName 文字列 ○ 1. 末尾にスペースは入れられません。
    2.空にはできません。
    3.ビュー名はすべてのページに対して一意である必要があります。
    4.警告： ビュー名の先頭または末尾を「/」にしないでください。これは、顧客は URL パスから表示名を一般的に抽出するためです。「home」と「/home」は区別されます。
    5.警告： {page: true} オプションを使用して同じビューを連続してトリガーしないでください。    		 ビューを表す文字列型として任意の名前を渡します。このビュー名は、VEC の「変更」パネルに表示されます。マーケティング担当者はこれを使用してアクションを作成し、A/B および XT アクティビティを実行します。
    options オブジェクト ×
    options > page ブール値 × TRUE： ページのデフォルト値は true です。page=true の場合、インプレッション数を増分するために Edge サーバーに通知が送信されます。
    FALSE: page=false の場合、インプレッション数を増分するための通知は送信されません。オファーを含むページ上のコンポーネントを再レンダリングする場合にのみ使用します。

    次に、 triggerView() 関数を React で使用して、仮想的な e コマースSPAに対応させることができます。

    リンク： ホームサイト

    home-react-1

    マーケティング担当者がホームサイト全体で A/B テストを実行したい場合、URL から取り出せるビューに「home」と名前を付けることができます。

    code language-javascript 
    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} >

    リンク： 製品サイト

    さて、もう少し複雑な例を見てみましょう。 例えば、ユーザーが「Load More」ボタンをクリックした後で、価格ラベルの色を赤に変更して、2 行目の製品をパーソナライズしたいとします。

    React 製品

    code language-javascript 
    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);
  }
}

    リンク： チェックアウト

    React チェックアウト

    マーケティング担当者が、選択された配送設定に合わせてサイト上のコンテンツをパーソナライズする場合は、その配送設定ごとにビューを作成できます。例えば、通常配送を選択した場合、ビューに「Normal Delivery」と名前を付けることができます。速達配送を選択した場合には、ビューを「Express Delivery」という名前にすることができます。

    これで、マーケティング担当者は A/B テストを実行し、速達配送が選択されたときにボタンの色を青から赤に変更することで、どちらの配送オプションでも青のままにする場合と比較してコンバージョンが促進されるかどうかを確認できます。

    code language-javascript 
    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);
  }
}

  3. VEC 経由で A/B アクティビティまたは XT アクティビティを起動します。

    SPA で、adobe.target.triggerView() にビュー名をパラメーターとして指定して実装した場合、VEC でそれらのビューを検出でき、ユーザーがアクションを作成して A/B アクティビティや XT アクティビティを修正できるようになります。

    note note
    NOTE
    SPA VEC は、通常の web ページで使用する VEC と同じものですが、triggerView() の実装されたシングルページアプリケーションを開く際に利用できる機能がいくつか追加されています。

VEC が SPA で適切に動作できるように、VEC の変更パネルとアクションで、大きな改善が 2 点行われました。

変更パネル

以下に示すように、変更パネルでは、特定のビュー用に作成されたアクションが取り込まれます。ビューのすべてのアクションが、ビューの下にグループ化されています。

アクション

アクションをクリックすると、このアクションが適用されるサイトの要素がハイライトされます。ビューに作成された各 VEC アクションには、以下のように、情報、編集、複製、移動および削除のアイコンがあります。

変更

次の表で、各アクションについて説明します。

ページ
説明
情報
アクションの詳細を表示します。
編集
アクションのプロパティを直接編集できます。
複製
変更パネルに存在する 1 つ以上のビューまたは VEC で参照および移動した 1 つ以上のビューにアクションを複製します。アクションは、必ずしも 変更 パネル。
注意：複製操作を行ったら、参照を使用して VEC のビューに移動し、複製されたアクションが有効な操作かどうかを確認します。アクションがビューに適用できない場合、エラーが表示されます。
移動
変更パネルに既に存在するページの読み込みイベントまたはその他のビューにアクションを移動します。
ページの読み込みイベント – ページの読み込みイベントに対応するアクションが web アプリケーションの最初のページ読み込みに適用されます。
注意：移動操作を行ったら、参照を使用して VEC のビューに移動し、移動が有効な操作かどうかを確認します。アクションがビューに適用できない場合、エラーが表示されます。
削除
アクションを削除します。
NOTE
VEC でページが読み込まれる前や、ページを読み込めなかった場合には、様々なアクションを実行できます。サイト読み込み前に編集できないアクションは、UI では無効化されます。

例 1

ここでは、ホームビューを作成した上記の例を参照します。 このビューに対して 2 つの目標があります。

  1. 「買い物かごに追加」ボタンと「いいね」ボタンを薄い青色に変更します。ヘッダーのコンポーネントを変更するので、これは「ページ読み込み」に含まれる必要があります。
  2. テキストの色が紫に変更された状態で、「2019 年の最新製品」ラベルを「2019 年の人気製品」に変更します。

これらの変更を反映させるには、VEC で「構成」をクリックし、変更をホームビューに適用します。

例 1

例 2

ここでは、PRODUCTS-PAGE-2 ビューを作成した上記の例を参照します。 「価格」のラベルを赤い色の「セール価格」に変更することが目標です。

  1. 「参照」をクリックし、ヘッダーの「製品」リンクをクリックします。
  2. 2 行目の製品を表示するには、「Load More」を 1 回クリックします。
  3. 「構成」をクリックします。
  4. アクションを適用して、テキストラベルを「セール価格」に変更し、色を赤に変更します。

例 2

例 3

前述のように、ビューはより細かいレベルで定義できます。ラジオボタンの選択などの状態もビューとして定義することができます。ここまでで、「チェックアウト時に速達配送を選択」と「チェックアウト時に通常配送を選択」をビューとして作成しました。ここでは、「チェックアウト時に速達配送を選択」のボタンの色を赤に変更します。

  1. 「参照」をクリックします。
  2. 買い物かごに製品を数点追加します。
  3. 右上隅のカートアイコンをクリックします。
  4. 注文のチェックアウトをクリックします。
  5. 「速達配送」のラジオボタンをクリックします。
  6. 「構成」をクリックします。
  7. 「支払い」ボタンを「注文の完了」ボタンに変更し、色を赤に変えます。

例 3

NOTE
「チェックアウト時に速達配送を選択」ビューは、「速達配送」のラジオボタンをクリックするまで、変更パネルには表示されません。これは、triggerView() 関数がトリガーされるのは、「速達配送」のラジオボタンが選択され、変更パネルに表示されるビューがあることを VEC が認識したときのみであるためです。

at.js および SPA の詳細

SPA で、最初のページ読み込みの後に、アクションによって生じた最新のオーディエンスデータのビューを取得する方法を教えてください。

at.js 2.x の一般的なワークフローは、サイトが読み込まれる際に、すべてのビューとアクションがキャッシュされるので、サイトでの後続のユーザーアクションは、オファーを取得するためのサーバー呼び出しをトリガーしません。 後続のユーザーアクションによって更新された可能性のある最新のプロファイルデータに合わせてビューを取得するには、最新のオーディエンスユーザーまたは渡されたプロファイルデータで getOffers() および applyOffers() を呼び出します。

例えば、通信会社の SPA で at.js 2.x を使用しているとします。ビジネスとしての達成目標は、次のとおりです。

  • ログアウトしたユーザーや匿名のユーザーに対して、次の日付で「初月無料」のヒーローオファーなどの最新のプロモーションを表示する http://www.telecom.com/home.
  • ログインしたユーザーに対して、「無料で電話が手に入ります」など、契約が近づいているユーザーにアップグレードプロモーションのオファーを表示します。 （http://www.telecom.com/loggedIn/home）。

ここでは、デベロッパー名が表示された状態で、次のように triggerView() を呼び出します。

  • http://www.telecom.com/home の場合のビュー名は、「ログアウトホーム」です。
    • triggerView("Logged Out Home") が呼び出されます。
  • http://www.telecom.com/loggedIn/home の場合のビュー名は、「ログインホーム」です。
    • triggerView("Logged In Home") がルートの変更時に呼び出されます。

マーケティング担当者が VEC を通じて次の A/B アクティビティを実行します。

  • 「初月無料」のオファーを含む A/B アクティビティ、パラメーター「loggedIn= false」が http://www.telecom.com/home（ビュー名はログアウトホーム）。
  • 「無料で電話が手に入ります」と表示される A/B アクティビティ パラメーター「 」でオーディエンスにオファーloggedIn=true」が http://www.telecom.com/loggedIn/home（ビュー名はログインヒーローオファー）

次に、このときのユーザーフローについて考えてみましょう。

  1. 匿名のログアウトユーザーがページにアクセスします。
  2. at.js 2.x を使用しているので、次のパラメーターを渡します。loggedIn = false"ページ読み込み時に、オーディエンスにパラメーター"がある場合に適合する、アクティブなアクティビティに存在するすべてのビューを取得しますloggedIn = false".
  3. 次に at.js 2.x では、ログアウトホームのビューが取得され、「初月無料」のオファーを表示するアクションが実行され、それがキャッシュに保存されます。
  4. 条件 triggerView("Logged Out Home") が呼び出されると、「初月無料」のオファーがキャッシュから取得され、オファーはサーバー呼び出しなしで表示されます。
  5. ユーザーが「ログイン」をクリックし、資格情報を入力します。
  6. Web サイトは SPA なので、すべてのページは読み込まず、代わりにユーザーを http://www.telecom.com/loggedIn/home にルーティングします。

ここで問題が発生します。このコードをルート変更時に配置しているため、ユーザーがログインすると、triggerView("Logged In Home") が発生します。その結果、at.js 2.x ではキャッシュからビューとアクションが取得されますが、キャッシュに存在するビューはログアウトホームのみです。

その後、ログインビューを取得し、「無料で電話が手に入ります」と表示するには、どうすればよいでしょうか。 offer? サイト上でのすべての後続のアクションは、ログインユーザーの視点で行われます。つまり、すべてのアクションが最終的にログインユーザー用にパーソナライズされたオファーとなるようにするには、どうすればいいでしょうか。

at.js 2.x でサポートされている新しい getOffers() 関数と applyOffers() 関数を使用できます。

adobe.target.getOffers({
  request: {
  prefetch: {
    "views": [
      {
        "parameters": {
          "loggedIn": true
        },
      }
    ]
  },
});

応答を渡す getOffers() から applyOffers() 現在は、「loggedIn = true」に関連付けられているすべてのビューとアクションが at.js キャッシュを更新します。

つまり、at.js 2.x では、最新のオーディエンスデータを使用したビュー、アクション、オファーをオンデマンドで取得する方法がサポートされているわけです。

at.js 2.x はシングルページアプリケーション用に A4T をサポートしていますか。

はい。Adobe Analytics および Experience Cloud 訪問者 ID サービスを実装した場合、at.js 2.x では、triggerView() 関数を通じて SPA 用の A4T をサポートします。詳細については、以下の図を参照してください。

Target フロー

手順
説明
1
triggerView() が SPA で呼び出され、ビューがレンダリングされます。また、ビューに関連付けられたビジュアル要素を変更するためのアクションが適用されます。
2
ビューのターゲットコンテンツがキャッシュから読み取られます。
3
デフォルトコンテンツがちらつくことなく、可能な限り迅速にターゲットコンテンツが表示されます。
4
通知リクエストが Target プロファイルストアに送信され、アクティビティの訪問者がカウントされて、指標が増分されます。
5
Analytics データがデータ収集サーバーに送信されます。
6
Target データは、SDID を使用して Analytics データに適合され、Analytics レポートストレージへと処理されます。A4T レポートを使用して、Analytics データが Analytics for Target の両方に表示できるようになります。
NOTE
ビューがトリガーされるたびにインプレッションをカウントするための通知をAdobe Analyticsに送信しない場合は、 {page: false} から triggerView() 関数を使用することで、常に再レンダリングするコンポーネントに対してビューが複数回トリガーされた場合に、インプレッション数が水増しされないようにすることができます。 次に例を示します。
adobe.target.triggerView("PRODUCTS-PAGE-2", {page:false})

サポートされているアクティビティ

アクティビティのタイプ
対応?
A/B テスト
○
A/B テストおよびエクスペリエンスのターゲット設定（XT）アクティビティにおける オファーとしての Recommendations
○
自動配分
○
エクスペリエンスのターゲット設定
○
多変量分析テスト
×
自動ターゲット
×
Automated Personalization
×
レコメンデーション
×

at.js 2.x をインストールして triggerView() をサイトに実装した場合、SPA VEC は自動ターゲットをサポートしませんが、自動ターゲット A/B アクティビティはどのように実行すればよいですか。

自動ターゲット A/B アクティビティを使用する場合は、ページの読み込みイベントで実行されるすべてのアクションを VEC で移動できます。各アクションにマウスポインターを置いて、「ページの読み込みイベントに移動」ボタンをクリックします。その後、次の手順で、トラフィック配分方法に対応する自動ターゲットを選択できます。

サポートされる統合

統合
対応?
Analytics for Target（A4T）
○
Experience Cloud Audiences
○
顧客属性
○
AEM エクスペリエンスフラグメント
○

サポートされる機能 supported-features

機能
対応?
ワークスペースとプロパティ
○
QA リンク
○
フォームベースの Experience Composer
×
カスタムコード
○
VEC オプション
すべて
クリックの追跡
○
複数アクティビティ配信
○

SPA VEC のページ配信設定 page-delivery-settings

ページ配信設定を使用すると、オーディエンスに対していつ Target アクティビティが適合および実行されるかを決定するルールを設定できます。

VEC の 3 ステップのガイドによるアクティビティ作成ワークフローから「ページ配信」オプションにアクセスするには、エクスペリエンス ​ステップで、設定（歯車アイコン）／ページ配信 ​をクリックします。

ページ配信オプションダイアログボックス

例えば、上に示すページ配信設定で定義したように、訪問者が直接 https://www.adobe.com に到達するか、または ​訪問者が https://www.adobe.com/products を含む任意の URL に到達する場合に、Target アクティビティが適合および実行します。これは、ページとのすべてのやり取りでページを再読み込みする複数ページアプリケーションに対して完全に機能します。at.js が、ユーザーが移動する URL に対して適合するアクティビティを取得します。

ただし、SPA の動作は異なるので、ページ配信設定は、SPA VEC アクティビティで定義されたとおりに、すべてのアクションがビューに適用できるように設定する必要があります。

使用例

以下の使用例を検討します。

SPA VEC 変更パネル

以下の変更が加えられました。

上記の例を念頭に置いて、を設定すると、どうなりますか？ ページ配信 次のみを含める設定： https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/ を at.js 2.x を使用）

ページ配信ダイアログボックス

以下の図に、Target フロー - ページ読み込みリクエスト（at.js 2.x）を示します。

Target フロー - at.js 2.0 ページ読み込みリクエスト

ユーザージャーニー #1

結果：ユーザーのホームビューに緑の背景色が表示されます。ユーザーが https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/productsに設定すると、製品ビューの下でアクションがブラウザーにキャッシュされるので、ボタンの青い背景色が表示されます。

注意：移動先のユーザー https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products ページの読み込みをトリガーしませんでした。

ユーザージャーニー #2

結果:定義済みの triggerView() 製品ビューの場合、およびSPA VEC を使用して製品ビューに対してアクションを実行した場合、を含むルールを作成していないので、期待されたアクションは表示されません https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=ja#/products 」と入力します。

ベストプラクティス

ユーザーは SPA の任意の URL に到達したり他のページに移動したりする可能性があるので、管理するユーザージャーニーは非常に難しくなる可能性があります。このため、SPA 全体を含むことができるように、ベース URL を含むページ配信ルールを指定することが最適です。この方法では、A/B テストまたはエクスペリエンスターゲット設定 (XT) アクティビティを表示するページに到達する際に、ユーザーがたどる可能性のある様々なジャーニーやパスを考える必要はありません。

例えば、上記で直面した問題を解決するために、以下のようにページ配信設定にベース URL を指定できます。

ページ配信ダイアログボックス

これにより、訪問者が SPA のどこに到達し、ホームまたはページビューのどちらに移動しても、適用されたアクションが表示されます。

これで、SPA VEC のビューにいつアクションを追加しても、以下のポップアップメッセージが表示され、ページ配信ルールについて検討するように促します。

ページ配信設定メッセージ

このメッセージは、作成する新しい各アクティビティ用のビューに最初のアクションを追加すると表示されます。このメッセージは、お客様の組織の全員がこれらのページ配信ルールを正しく適用する方法を学習するのに役立ちます。

トレーニングビデオ：Adobe Target での SPA VEC の使用

https://video.tv.adobe.com/v/35062?captions=jpn

詳しくは、Adobe Target でのシングルページアプリケーション Visual Experience Composer（SPA VEC）の使用を参照してください。

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654