Web コンテンツを編集

キャンペーンに web アクションを追加すると、Web デザイナーでサイトのコンテンツを編集できるようになります。

こちらのビデオで web キャンペーンの作成方法について学ぶ

Journey Optimizer の web オーサリングには、Adobe Experience Cloud Visual Helper の Chrome ブラウザー拡張機能が利用されています。詳細情報

注意

Journey Optimizer ユーザーインターフェイスで web ページへのアクセスや web ページを作成するには、こちらのセクションに記載されている前提条件を必ず満たすようにしてください。

各トピックの詳細については、次のセクションにアクセスしてください。

Web デザイナーの操作

Web キャンペーンのオーサリングを開始するには、次の手順に従います。

  1. キャンペーンの「アクション」タブで「コンテンツを編集」を選択します。

  2. ルールに一致するページを作成した場合は、このルールに一致する URL を入力する必要があります。変更は、ルールに一致するすべてのページに適用されます。ページのコンテンツが表示されます。

    メモ

    Web サーフェスに 1 つの URL を入力した場合、パーソナライズする URL は既に入力されています。

    注意

    Web ページには、Adobe Experience Platform Web SDK を含める必要があります。詳細情報

  3. 「Web ページを編集」をクリックしてオーサリングを開始します。Web デザイナーが表示されます。

    メモ

    読み込みに失敗した web サイトを読み込もうとすると、Visual Editing Helper のブラウザー拡張機能のインストールを勧めるメッセージが表示されます。トラブルシューティングのヒントについては、こちらのセクションをご覧ください。

  4. キャンバスから要素（画像、ボタン、段落、テキスト、コンテナ、見出し、リンクなど）を選択します。詳細情報

  5. 用途：

    • コンテンツ、レイアウト、リンクの挿入、パーソナライゼーションなどを編集するためのコンテキストメニュー。

    • 各要素を編集、複製、削除または非表示にするための、右側パネルの上部にあるアイコン。

    • 選択した要素に応じて動的に変化する右側のパネル。 例えば、要素の背景、テキスト編集、境界線、サイズ、位置、間隔、エフェクトまたはインラインスタイルを編集できます。

メモ

Web のコンテンツデザイナーは、E メールデザイナーと非常に似ています。詳細は Journey Optimizer でのコンテンツのデザインを参照してください。

コンポーネントの使用

  1. 左側の​コンポーネント​パネルで、項目を選択します。Web ページに以下のコンポーネントを追加し、必要に応じて編集できます。

    • ディバイダー
    • HTML
    • 画像
    • 見出し - このコンポーネントを使用することは、E メールデザイナーで​テキスト​コンポーネントを使用することに似ています。詳細情報
    • 段落 - このコンポーネントを使用することは、E メールデザイナーで​テキスト​コンポーネントを使用することに似ています。詳細情報
    • リンク
    • オファーの決定

  2. ページにポインタを置いて、「前に挿入」または「後ろに挿入」ボタンをクリックして、コンポーネントをページ上の既存の要素に追加します。

    メモ

    コンポーネントの選択を解除するには、キャンバス上部の青いコンテキストバナーにある ESC ボタンをクリックします。

  3. 必要に応じて、ページのコンテンツでコンポーネントを直接編集できます。

  4. 右側のコンテキストパネルに表示されるスタイル（背景、テキストカラー、境界線、サイズ、位置など）を調整します。- 選択したコンポーネントによって異なります。

パーソナライゼーションとオファーの追加

パーソナライゼーションを追加するには、コンテナを選択し、表示されるコンテキストメニューバーからパーソナライゼーションアイコンを選択します。 式エディターを使用して、変更を追加します。詳細情報

オファーの決定​コンポーネントを使用し、web ページにオファーを挿入します。プロセスは、メールへのオファーの追加の場合と同じです。意思決定管理を活用して、顧客に提供する最適なオファーを選択します。

この節では、Web デザイナーでの様々なナビゲーション方法について説明します。 Web エクスペリエンスに追加された変更を表示および管理するには、 この節.

  1. キャンバスから任意の要素を選択します。

  2. 画面の左下に表示される「パンくずリストを展開／折りたたむ」ボタンをクリックすると、選択した要素に関する情報をすばやく表示します。

  3. パンくずリストにポインタを合わせると、エディターで対応する要素がハイライト表示されます。

  4. これを使用すると、ビジュアルエディター内で任意の親要素、兄弟要素または子要素に簡単に移動できます。

参照モードにスワップ

専用ボタンを使用して、デフォルトの​デザイン​モードから​参照​モードにスワップします。

参照​モードでは、パーソナライズする選択したサーフェスから該当するページに移動できます。

これは、認証の後のページや、特定の URL で最初から使用できないページを処理する場合に特に便利です。例えば、認証を行い、アカウントページや買い物かごページに移動して、デザイン​モードに戻り、目的のページで変更を実行できます。

デバイスサイズの変更

Web デザイナーのディスプレイのデバイスサイズは、タブレット​または​モバイル横置き​などの事前定義済みのサイズに変更したり、必要なピクセル数を入力してカスタムのサイズを定義したりできます。

また、ズームフォーカスを 25％から 400％に変更することもできます。

デバイスサイズを変更する機能は、様々なデバイス、ウィンドウ、画面のサイズに適切にレンダリングされるレスポンシブサイト用に設計されています。レスポンシブサイトは、デスクトップ、ノートパソコン、タブレット、携帯電話を含む、あらゆる画面サイズに自動的に調整および適応します。

注意

特定のデバイスサイズで web エクスペリエンスを編集できます。ただし、セレクターが同じである限り、これらの変更は作業中のデバイスサイズだけでなく、すべてのサイズとデバイスに適用されます。同様に、通常のデスクトップビューでのエクスペリエンスの編集は、そのデスクトップビューだけでなく、すべての画面サイズに適用されます。

現在、Journey Optimizer は、デバイスサイズに固有のページの変更をサポートしていません。例えば、個別のサイト構造を持つ別のモバイル web サイトがある場合は、別のキャンペーンでそのモバイルサイトに固有の変更を行う必要があります。

チュートリアルビデオ

次のビデオでは、Journey Optimizer キャンペーンで Web デザイナーを使用して web エクスペリエンスを作成する方法を確認できます。

このページ