Visual Experience Composerを使用したパーソナライゼーション

この章では、Target内からWebページのレイアウトとコンテンツをドラッグ&ドロップ、入れ替え、変更することで、Visual Experience Composer​を使用したエクスペリエンスの作成について説明します。

シナリオの概要

WKNDサイトのホームページには、ローカルのアクティビティや、カードレイアウトの形で都市の周りを取り巻く最善の方法が表示されます。 マーケターは、カードのレイアウトを変更して、ユーザーエンゲージメントへの影響やコンバージョンの促進を確認することで、ホームページを変更するタスクを割り当てられています。

関係するユーザー

この演習では、次のユーザーが関与し、管理アクセスが必要になる可能性のあるタスクを実行する必要があります。

  • コンテンツ作成者/コンテンツエディター (Adobe Experience Manager)
  • マーケター (Adobe Target/最適化チーム)

WKNDサイトのホームページ

AEM Targetシナリオ1

前提条件

マーケターアクティビティ

  1. マーケターは、Adobe Target内にA/Bターゲットアクティビティを作成します。

    1. Adobe Targetウィンドウで、「アクティビティ」タブに移動します。

    2. アクティビティを作成」ボタンをクリックし、アクティビティのタイプを「A/Bテスト」と選択します。

      Adobe Target — アクティビティを作成

    3. Web​チャネルを選択し、Visual Experience Composer​を選択します。

    4. アクティビティURL​を入力し、「次へ」をクリックしてVisual Experience Composerを開きます。

      Adobe Target — アクティビティを作成

    5. Visual Experience Composer​を読み込むには、ブラウザーで「安全でないスクリプトを読み込む​を許可」を有効にして、ページを再読み込みします。

      エクスペリエンスのターゲット設定アクティビティ

    6. WKNDサイトのホームページがVisual Experience Composerエディターで開いていることに注意してください。

      VEC

    7. エクスペ リエンスAは、デフォルトのWKNDホームページを提供し、エクスペリエンスBのコンテンツレイアウ トを編集します

      エクスペリエンス B

    8. カードレイアウトコンテナ(Best Roasters)の1つをクリックし、「並べ替え」オプションを選択します。

      コンテナの選択

    9. 並べ替えたいコンテナをクリックし、目的の場所にドラッグ&ドロップします。 1行目の1列目から1行目の3列目まで、Best Roasters​コンテナを並べ替えます。 Best Roasters​コンテナが​Photography Exhibitionsコンテナの隣に配置されます。

      コンテナの入れ替え

      スワップ後
      コンテナの入れ替え

    10. 同様に、他のカードコンテナの位置を並べ替えます。

    コンテナの入れ替え
    11. また、カルーセルコンポーネントの下とカードレイアウトの上にヘッダーテキストを追加します。
    12. カルーセルコンテナをクリックし、「後に挿入/HTML」オプションを選択してHTMLを追加します。

    テキストを追加

    <h1 style="text-align:center">Check Out the Hot Spots in Town</h1>
    

    テキストを追加
    13. 「次へ」をクリックして、アクティビティを続行します。
    14. 「トラフィック配分方法」を手動で選択し、100%のトラフィックを​エクスペリエンスB​に割り当てます。

    エクスペリエンスBトラフィック
    15. 「次へ」をクリックします。
    16. アクティビティに​目標指標​を指定し、A/Bテストを保存して閉じます。

    A/Bテストの目標指標
    17. アクティビティの名前(WKND Home Page Refresh)を指定し、変更を保存します。
    18. アクティビティの詳細画面で、「アクティビティをアクティブ化」を必ず選択します。

    アクティビティを有効化
    19. WKNDホームページ(http://localhost:4503/content/wknd/en.html)に移動すると、 WKNDホームページの更新A/Bテストアクティビティに追加した変更に気がつきます。

    WKNDホームページが更新されました
    20. ブラウザーコンソールを開き、「ネットワーク」タブを調べて、 WKNDホームページの更新A/Bテストアクティビティのターゲット応答を探します。

    ネットワークアクティビティ

概要

この章では、テストを実行するコードを変更することなく、Webページのレイアウトとコンテンツをドラッグ&ドロップ、入れ替え、変更することで、Visual Experience Composerを使用したエクスペリエンスを作成できました。

このページ