Visual Experience Composer ヘルパー拡張機能

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

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

IMPORTANT
現在 Target この記事で説明する VEC ヘルパー拡張機能は、Manifest v2 を使用して作成されました。 Googleは最近、2024 年 6 月より、Manifest v2 を使用して作成された新しい拡張機能を使用できなくなると発表しました。 詳しくは、 Manifest V2 サポートのタイムラインのお知らせ から Google 日 開発者向け Chrome サイト。
既存の拡張機能は、Google Chrome でも引き続き機能します。 2024 年 6 月以降、 Adobe は、このトピックに記載されているヘルパー拡張機能の無効化を開始し、新しいに移行する必要があります Visual Editing Helper 拡張機能.
この拡張機能が機能を停止する際には、リリースノート、製品内アナウンスおよびこの記事のテキストで通知されます。 ただし、Manifest v3 のセキュリティ強化により、 Adobe で web サイトの視覚的な作成を続行するには、新しい拡張機能をダウンロードする必要があります Target.

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

  • Web サイトには厳格なセキュリティポリシーがあります。
  • Web サイトで iframe が使用されています。
  • Web サイトに at.js ライブラリがまだ実装されていません。
  • 顧客の QA またはステージサイトが外部から利用できません(サイトは内部)。
  • 現在、を使用している web サイトを VEC で開こうとすると、いくつかの制限があります サービスワーカー (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 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 ウェブストアのAdobe Target VEC Helper ブラウザー拡張機能.

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

  3. Target で VEC を開きます。

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

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

    次の図に、を持つ VEC ヘルパーを示します Inject Target Libraries 有効な設定:

    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」のデフォルト設定を使用していることを想定しています。

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

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

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

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