ドキュメントJourney OptimizerJourney Optimizer ガイド

Web コンテンツの編集 edit-web-content

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • ユーザー

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

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

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

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

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

Web デザイナーの操作 work-with-web-designer

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

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

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

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

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

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

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

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

  5. 用途：

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

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

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

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

コンポーネントの使用 content-components

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

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

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

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

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

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

パーソナライゼーションの追加

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

Web デザイナー内での移動 navigate-web-designer

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

パンくずリストの使用 breadcrumbs

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

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

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

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

参照モードにスワップ browse-mode

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

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

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

参照 ​モードを使用すると、単一ページアプリケーションを作成する際に、web サイトのすべてのビューをナビゲートできます。詳細情報

デバイスサイズの変更 change-device-size

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

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

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

CAUTION
特定のデバイスサイズで web エクスペリエンスを編集できます。ただし、セレクターが同じである限り、これらの変更は作業中のデバイスサイズだけでなく、すべてのサイズとデバイスに適用されます。同様に、通常のデスクトップビューでのエクスペリエンスの編集は、そのデスクトップビューだけでなく、すべての画面サイズに適用されます。
現在、Journey Optimizer は、デバイスサイズに固有のページの変更をサポートしていません。例えば、個別のサイト構造を持つ別のモバイル web サイトがある場合は、別のキャンペーンでそのモバイルサイトに固有の変更を行う必要があります。

チュートリアルビデオ video

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

https://video.tv.adobe.com/v/3418803/?quality=12&learn=on

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76