[統合]{class="badge positive"}
Visual Experience Composer を使用したパーソナライズ機能
[AEM Sites 6.5]{class="badge informative"}
この章では、Visual Experience Composer を使用することにより、Target 内から web ページのレイアウトとコンテンツをドラッグ&ドロップ、スワップ、変更してエクスペリエンスを作成する方法について説明します。
シナリオの概要
WKND サイトのホームページには、カードレイアウトの形式で、地域のアクティビティや市内のおすすめアクティビティが表示されます。マーケターとして、あなたはホームページを改修する仕事を任されました。カードレイアウトを再配置して、それがユーザーのエンゲージメントにどのように影響し、コンバージョンがどのように促進されるかを確認します。
関係するユーザー
この演習では、次のユーザーが関与し、管理者アクセスが必要なタスクを実行する必要があります。
- コンテンツプロデューザー/コンテンツ編集者(Adobe Experience Manager)
- マーケター(Adobe Target/最適化チーム)
WKND サイトのホームページ
前提条件
-
AEM
- 4503 で実行されている AEM パブリッシュインスタンス
- タグを使用して AEM を Adobe Target と統合
-
Experience Cloud
- 組織の Adobe Experience Cloud へのアクセス -
https://<yourcompany>.experiencecloud.adobe.com
- Adobe Target でプロビジョニングされた Experience Cloud
- 組織の Adobe Experience Cloud へのアクセス -
マーケターアクティビティ
-
マーケターが Adobe Target 内に A/B ターゲットアクティビティを作成します。
- Adobe Target ウィンドウから「アクティビティ」タブに移動します。
- 「アクティビティの作成」ボタンをクリックし、アクティビティの種類として A/B テスト を選択します。
- Web チャネルを選択し、Visual Experience Composer を選択します。
- アクティビティ URL を入力し、「次へ」をクリックして Visual Experience Composer を開きます。
- Visual Experience Composer を読み込むには、ブラウザーで「安全でないスクリプトの読み込みを許可する」を有効にして、ページをリロードします。
- WKND サイトのホームページが Visual Experience Composer エディターで開いていることに注意してください。
- エクスペリエンス A はデフォルトの WKND ホームページを提供します。エクスペリエンス B のコンテンツレイアウトを編集しましょう。
- カードレイアウトコンテナの 1 つ(最高のロースター)をクリックし、並べ替え オプションを選択します。
- 並べ替えたいコンテナをクリックし、目的の場所にドラッグ&ドロップします。最高のロースター コンテナを 1 行目の 1 列目から 1 行目の 3 列目に並べ替えましょう。現在、最高のロースター コンテナは 写真展 コンテナの隣にあります。
並べ替え後
- 同じように、他のカードコンテナの位置を並べ替えます。
- また、カルーセルコンポーネントの下とカードレイアウトの上に、ヘッダーテキストを追加してみましょう。
- カルーセルコンテナをクリックし、後に挿入/HTML オプションを選択して HTML を追加します。
code language-html <h1 style="text-align:center">Check Out the Hot Spots in Town</h1>
13. 「次へ」をクリックして、アクティビティを続行します。
14. トラフィックの割り当て方法 として手動を選択し、100%のトラフィックを エクスペリエンス B に割り当てます。
15. 「次へ」をクリックします。
16. アクティビティの 目標指標 を提供し、A/B テストを保存して閉じます。
17. アクティビティに名前(WKND ホームページ更新)を付けて、変更を保存します。
18. アクティビティの詳細画面から、アクティビティを アクティベート してください。
19. WKND ホームページ(http://localhost:4503/content/wknd/en.html)に移動すると、WKND ホームページ更新 A/B テストアクティビティに追加されたことがわかります。
20. ブラウザーコンソールを開き、「ネットワーク」タブを調べて、 WKND ホームページの更新 A/B テストアクティビティに対するターゲット応答を探します。
概要
この章では、テストを実行するコードを変更することなく、web ページのレイアウトとコンテンツをドラッグ&ドロップ、入れ替え、変更することで、Visual Experience Composer を使用してエクスペリエンスを作成できました。