Visual Experience Composer を使用したパーソナライズ機能

この章では、Visual Experience Composer を使用することにより、Target 内から web ページのレイアウトとコンテンツをドラッグ＆ドロップ、スワップ、変更してエクスペリエンスを作成する方法について説明します。

シナリオの概要

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. カードレイアウトコンテナの 1 つ（最高のロースター）をクリックし、並べ替えオプションを選択します。
      コンテナの選択

    9. 並べ替えたいコンテナをクリックし、目的の場所にドラッグ＆ドロップします。最高のロースター​コンテナを 1 行目の 1 列目から 1 行目の 3 列目に並べ替えましょう。現在、最高のロースター​コンテナは​写真展コンテナの隣にあります。
      コンテナの入れ替え

      並べ替え後
      入れ替えられたコンテナ

    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 ホームページ更新）を付けて、変更を保存します。
    18. アクティビティの詳細画面から、アクティビティを​アクティベートしてください。
    アクティビティをアクティベート
    19. WKND ホームページ（http://localhost:4503/content/wknd/en.html）に移動すると、WKND ホームページ更新 A/B テストアクティビティに追加されたことがわかります。
    WKND ホームページが更新されました
    20. ブラウザーコンソールを開き、「ネットワーク」タブを調べて、 WKND ホームページの更新 A/B テストアクティビティに対するターゲット応答を探します。
    ネットワークアクティビティ

概要

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

このページ