Visual Experience Composer helper 拡張機能
Google Chrome の Adobe Target Visual Experience Composer （VEC）ヘルパーブラウザー拡張機能を使用すると、VEC 内に web サイトを確実に読み込んで、web エクスペリエンスを迅速に作成および QA できます。
VEC Helper ブラウザーは Chrome 拡張機能です。 Mozilla Firefox を使用する場合、この拡張機能は必要ありません。
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」チェックボックスを有効にします。
- Google Chrome 80 以降を拡張された SameSite cookie 強制ポリシーと共に使用している。 詳しくは、 最近発表されたGoogle Chromeの SameSite cookie 実施ポリシーは、VEC および EEC にどのような影響を与えますかを参照してください。
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 ヘルパーブラウザー拡張の取得とインストール
-
Chrome Web ストアの Adobe Target VEC Helper ブラウザー拡張機能に移動します。
-
Add to Chrome > Add Extension をクリックします。
-
Target で VEC を開きます。
-
拡張機能を使用するには、VEC または QA モードで、Chrome ブラウザーのツールバーにある「VEC ヘルパーブラウザー拡張」アイコン（
-
（条件付き） web ページに Target at.js JavaScript ライブラリがまだ含まれていない場合は、Inject Target Libraries 切り替えスイッチを「オン」の位置にスライドさせます。
次の図は、Inject Target Libraries 設定が有効になっている VEC Helper を示しています。
オーサリングを有効にするためにページにTargetライブラリを挿入するかどうかを VEC ヘルパーが確認している様子を次の図に示します。
-
（条件付き） Cookies の切り替えスイッチを「オン」の位置にスライドすると、
SameSite=None属性ブラウザーの修正が自動的に追加されます。
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 サイトが確実に開かれることを示すメッセージが表示されます。