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 に関連する問題のトラブルシューティング。

メモ

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

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

  • この拡張機能は、Administration > Implementation の Target UI から利用可能な最新バージョンの at.js を読み込みます。

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

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

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

このトピックに関するその他のヘルプ

前のページVisual Editing Helper 拡張機能
次のページURL にリダイレクト

Target