Visual Experience Composer helper 拡張機能

最終更新日： 2025年1月23日
  • トピック：

Google Chrome の Adobe Target Visual Experience Composer （VEC）ヘルパーブラウザー拡張機能を使用すると、VEC 内に web サイトを確実に読み込んで、web エクスペリエンスを迅速に作成および QA できます。

VEC Helper ブラウザーは Chrome 拡張機能です。 Mozilla Firefox を使用する場合、この拡張機能は必要ありません。

IMPORTANT

  • この記事で説明している従来の Target VEC Helper 拡張機能は、Manifest V2 を使用して作成されました。 Google では、2024年6月以降、Manifest V2 を使用して作成された拡張機能を許可しなくなると発表しました。詳しくは、Chrome for Developers サイトの Google にある Manifest V2 support timeline announcement を参照してください。

  • 2024 年 6 月以降、Google は、このトピックで説明している拡張機能を含め、Manifest V2 を使用して作成された拡張機能の無効化を開始します。 Adobe では、お客様ができるだけ早く新しい Visual Editing Helper 拡張機能に移行することをお勧めします。

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

考えられる回避策として、Chrome Developer Tools/Application タブで「Service Workers」を無効にし、「Service Workers」セクションの下にある「Bypass for network」チェックボックスを有効にします。

Chrome用 VEC Helper ブラウザー拡張機能は、お客様が Target 拡張 Experience Composer やサードパーティ拡張機能（Requestly など）に頼るきっかけとなったサイト読み込みの問題を解決します。

VEC Helper 拡張機能を使用するメリット

  • すべての 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 をオフにします。

  • モバイルビューポートは、Enhanced Experience Composer（EEC）がなくてもサポートされます。

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

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

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

  1. Chrome Web ストアの Adobe Target VEC Helper ブラウザー拡張機能に移動します。

  2. Add to Chrome > Add Extension をクリックします。

  3. Target で VEC を開きます。

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

  5. （条件付き） web ページに Target at.js JavaScript ライブラリがまだ含まれていない場合は、Inject Target Libraries 切り替えスイッチを「オン」の位置にスライドさせます。

    次の図は、Inject Target Libraries 設定が有効になっている VEC Helper を示しています。

    VEC ヘルパー 1

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

    VEC ヘルパー 2

  6. （条件付き） Cookies の切り替えスイッチを「オン」の位置にスライドすると、SameSite=None 属性ブラウザーの修正が自動的に追加されます。

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

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