Visual Experience Composer ヘルパー拡張機能

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

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

重要

現在の Target この記事に記載されている VEC ヘルパー拡張機能は、Manifest v2 を使用して作成されました。 Googleは最近、Manifest v2 を使用して作成された新しい拡張機能を許可しなくなると発表しました。

既存の拡張機能は、Google Chrome で引き続き機能します。 将来、 Adobe このトピックに記載されているヘルパー拡張機能は非推奨となり、お客様は新しい Visual Editing Helper 拡張機能. この拡張機能が機能しなくなると、この記事のリリースノートおよびテキストで通知されます。 ただし、Manifest v3 のセキュリティ強化のため、 Adobe では、引き続き Web サイトを視覚的にオーサリングするために、新しい拡張機能をダウンロードすることをお勧めします。 Target.

VEC で一部の web サイトを確実に開くことができない理由

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

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. Target で VEC を開きます。

  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 サイトが確実に開かれることを示すメッセージが表示されます。

このページ