Visual Experience Composer ヘルパー拡張機能

この Adobe Target Visual Experience Composer (VEC)Google Chrome 用ヘルパーブラウザー拡張機能を使用すると、VEC 内で確実に Web サイトを読み込み、作成と QA Web エクスペリエンスをすばやくできます。

メモ

VEC ヘルパーブラウザーは、Chrome 拡張機能です。 Mozilla Firefox を使用する場合、この拡張機能は不要です。

VEC で一部の Web サイトを確実に開けない理由

  • Web サイトには厳格なセキュリティポリシーがあります。
  • Web サイトで iframe が使用されています。
  • Web サイトに at.js ライブラリがまだ実装されていません。
  • お客様の QA またはステージサイトは、外部では利用できません(サイトは内部)。
  • 現在、Service Workers (SW)を使用している web サイトを VEC で開こうとすると、いくつかの制限があります。

SW は、web ページによってインストールされているドメインのリクエストをインターセプトするために使用できる web テクノロジーです。SW はページの訪問中は存続し、以降の訪問時にはアクティブになります。SW は、どのリクエストを通過させ、どのリクエストをインターセプトし、代わりにキャッシュからサービスを提供するかを決定します。

SW はキャッシュを制御できます。Web ページ自体、JS、CSS、IMG、AJAXリクエストなどの静的リソース、コンテンツおよび応答ヘッダーをキャッシュできます。これには、SAMEORIGIN、CSP(Content-Security-Policy)、Set-Cookie など、X-Frame-Options のような Target VEC ヘルパー拡張機能が削除しようとするものを含みます。

残念ながら、web リクエストをインターセプトする Chrome 拡張機能 API は、SW によってインターセプトおよび処理されたリクエストを受信しません。したがって、web ページリクエストが SW によってキャッシュから提供された場合、X-Frame-Options ヘッダーまたは CSP ヘッダーもキャッシュされたため、web ページが VEC 内に読み込まれないので、拡張機能ではヘッダーと Cookie を修正できません。

考えられる回避策として、Chrome 開発者ツール/アプリケーションタブで「Service Workers」を無効にし、「Service Workers」セクションの下にある「Bypass for network」チェックボックスを有効にします。

Chrome 用の VEC ヘルパーブラウザー拡張機能は、お客様が現在 Target 拡張 Experience Composer または Requestly などのサードパーティの拡張機能を使用できます。

VEC ヘルパー拡張機能を使用するメリット

  • すべての iframe バスティングヘッダー(X-Frame-Options や Content-Security-Policy など)は、Web サイトから暗黙的に削除されます。複雑な Requestly ルールを作成する必要はありません。

  • Web ページに Targetat.js JavaScript ライブラリがまだ含まれていない場合は、拡張機能を使用してライブラリを挿入することにより、Web サイトのエクスペリエンスを作成できます。その後に、プレビューリンクを使用してアクティビティを作成し、QA を実行できます。

    拡張 Experience Composer(EEC) を使用すると、拡張機能は at.js を挿入しませんが、SameSite Cookie 機能は引き続き存在します。 Web ページに at.js を挿入するには、EEC をオフにします。

  • モバイルビューポート が 拡張 Experience Composer (EEC)。

  • Targetが初めてのお客様は、自社の IT 開発者がまだ Web サイトにTargetを実装していない場合でも、拡張機能を使用してTargetを試すことができます。

  • 複数のお客様の Web サイトおよびTargetアカウントにサービスを提供するパートナーは、サードパーティツールで複数のルールを管理するのではなく、VEC 読み込みをサポートする 1 つのシンプルなメカニズムを利用できるようになりました。

VEC ヘルパーブラウザー拡張の取得とインストール

  1. 次に移動: Chrome Web Store のAdobe Target VEC ヘルパーブラウザー拡張機能.

  2. Chrome に追加 / 拡張機能を追加​をクリックします。

  3. で VEC を開きます。 Target.

  4. 拡張機能を使用するには、VEC または QA モードで、Chrome ブラウザーのツールバーにある「VEC ヘルパーブラウザー拡張」アイコン( 「VEC ヘルパー」アイコン )をクリックします。

  5. (条件付き) Target ライブラリを挿入 ウェブページにまだ Target at.js JavaScript ライブラリ。

    「Target ライブラリを挿入」設定が有効になっている VEC ヘルパーを次の図に示します。

    VEC ヘルパー 1

    オーサリングを有効にするためにページにTargetライブラリを挿入するかどうかを VEC ヘルパーが確認している様子を次の図に示します。

    VEC ヘルパー 2

  6. (条件付き) Cookie 自動的に SameSite=None 属性ブラウザの修正。

    VEC ヘルパー拡張機能での cookie の切り替え

    詳しくは、 SameSite=None 属性ブラウザーの修正については、「最近発表されたGoogle Chrome SameSite cookie の実施ポリシーが VEC および EEC に与える影響」を参照してください。 Visual Experience Composer と拡張 Experience Composer に関連する問題のトラブルシューティング

メモ

  • デフォルトでは、拡張機能の「 Target ライブラリを挿入 」フラグがオフになっています。Target向けにまだ実装されていないサイトで VEC を使用する場合は、このフラグを有効にすることができます。

    このフラグはグローバル設定です。 このフラグは、VEC で開かれているすべての Web サイトに対して有効または無効になります。例えば、このフラグを「on」に設定し、at.js で既に実装されている Web サイトを開くと、at.js が既に読み込まれていることを示すメッセージが表示されます。 Adobeでは、ほとんどのお客様は既にページに at.js が実装されており、デフォルト設定の「off」を使用していると予想されます。

  • 拡張機能は、 Target UI in 管理/実装.

  • 拡張機能を使用して QA モードで at.js を挿入する場合は、別の Chrome タブを開く必要があります。この Chrome タブは、アクティビティを作成したのと同じAdobe Experience Cloud組織に対して認証される必要があります。

  • 次のメッセージにより、さらに情報が提供されます。

    • VEC を使用した Web サイトの読み込みに失敗した場合、VEC ヘルパーブラウザー拡張機能のインストールを勧めるメッセージが表示されます。
    • at.js が Web サイトにまだ実装されていない場合、拡張機能のインストールを勧めるメッセージが VEC に表示されます。
    • 拡張機能を有効にして読み込みを実行している場合は、拡張機能により at.js ライブラリが挿入(必要に応じて)されるか、または VEC 内で Web サイトが確実に開かれることを示すメッセージが表示されます。

このページ