Visual Experience Composer ヘルパー拡張機能

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

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

IMPORTANT
  • この記事に記載されている従来のTarget VEC Helper拡張機能は、Manifest V2を使用して作成されました。 Google では、2024年6月以降、Manifest V2 を使用して作成された拡張機能を許可しなくなると発表しました。 詳しくは、Chrome for Developers サイトのGoogleのManifest V2 サポートタイムラインのお知らせを参照してください。

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

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

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

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 Developer Tools/Application タブでService Workerを無効にし、Service Worker セクションの「Bypass for network」チェックボックスを有効にすることができます。

Chrome用VEC Helper ブラウザー拡張機能は、お客様がTarget Enhanced Experience Composerまたはサードパーティの拡張機能(Requestlyなど)に依存するようになったサイト読み込みの問題を解決します。

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

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

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

    Enhanced 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. Chromeに追加/拡張機能を追加​をクリックします。

  3. Target で VEC を開きます。

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

  5. (条件付き) web ページにTarget at.js JavaScript ライブラリがまだ含まれていない場合は、ターゲットライブラリを挿入 トグルを「オン」の位置にスライドさせます。

    次の図は、​ ターゲットライブラリの挿入設定が有効になっている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向けにまだ実装されていないサイトで VEC を使用する場合は、このフラグを有効にすることができます。

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

  • 拡張機能は、最新バージョンのat.jsを読み込みます。このバージョンは、Target UIから管理/実装で利用できます。

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

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

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