ドキュメントTargetTarget ガイド

Visual Experience Composerのベストプラクティスと制限事項

最終更新日： 2026年5月13日

エクスペリエンスが意図したとおりに機能することを確認するには、Adobe Target Visual Experience Composer （VEC）を使用する際のベストプラクティスに従ってください。 パフォーマンスを最大化し、一般的な問題を回避するための重要なヒントと制限事項を理解します。

ベストプラクティス section_86CF28C99CFF40329E4CBAFE4DD78BB4

VECを使用する際のベストプラクティスは次のとおりです。

at.js参照をページの<head> セクションの上部に配置します。

詳細を見る
Visitor API Serviceも使用する場合は、上記のat.jsにvisitor API スクリプトを配置します。

Enhanced Experience Composerは、アカウントレベル（アカウントで作成されたすべてのアクティビティに対して有効）または個々のアクティビティレベルで有効にできます。

詳細を見る

アカウントレベルでEnhanced Experience Composerを有効にするには、Administration > Visual Experience Composerをクリックし、Enable Enhanced Experience Composer スイッチをオンの位置に切り替えます。

Visual Experience Composerでアクティビティを作成する際にアクティビティレベルでEnhanced Experience Composerを有効にするには、Configure > Page Deliveryをクリックし、Enable Enhanced Experience Composer スイッチをオン位置に切り替えます。

サイトの安全なページでEnhanced Experience Composerが読み込まれない場合は、特定のIP アドレスを許可リストできます。

詳細を見る

Enhanced Experience Composerの読み込み中に問題が発生した場合は、次のIP アドレスを許可リストに加えるして解決できます。 これらのIP アドレスは、Enhanced Experience Composer プロキシに使用されるAdobe サーバー用です。 これらは、アクティビティの編集にのみ必要です。 サイトへの訪問者は、これらのIP アドレスを許可リストに加えるする必要はありません。

詳しくは、拡張Experience Composer に関する問題のトラブルシューティングに関する記事の パブリック IPでアクセスできない内部QA URLをEECが読み込むことはありません。

トップレベルの要素と、適切なテスト／ターゲット候補になりそうなその他の要素に一意の ID を使用する。

詳細

body 要素内に直接配置されるあらゆる要素に一意の ID が必要です。 body 内に新しい要素を挿入してコードを移動させる場合は、少なくとも親要素は認識しやすくします。

TargetはIDを必要としませんが、IDを使用すると、エクスペリエンスコンポーザーで作成されたエクスペリエンスの信頼性が向上します。 Targetは、エクスペリエンスの配信時に、CSS セレクターを使用してコンテンツを変更します。 エクスペリエンスを編集する場合、Visual Experience Composerは、変更されるHTML要素に対してnull以外のID属性を持つ最も近い祖先にセレクターを固定します。 そのため、HTML の ID 属性の設定や変更をおこなうメカニズム（JavaScript ライブラリを含む）を使用することはお勧めできません。 これらのIDは、Target experience composerでアクティビティの作成に使用できる場合がありますが、JavaScriptでIDが変更された場合、エクスペリエンスの実行時にエクスペリエンスの作成時に使用されていたIDは使用できない場合があります。 ID が利用できない場合、その ID に関連付けられたセレクターは実行に失敗します。

CSS クラスにわかりやすい名前を付ける。

詳細

Visual Experience ComposerでCSS クラスを編集する場合は、記述的なクラス名を使用して、クラスを識別しやすくすることが役立ちます。 これにより、確実に正しい CSS クラスを編集して、ページを期待どおりに表示させることができます。

要素を隠すまたは削除する際に、!important CSS プロパティを使用しない。

!important CSS プロパティが存在する場合、配信中にtarget.jsが行った変更は、サイトのCSS ルールによって上書きされます。

ページのレイアウトで HTML のテーブルを使用しない。

詳細
TargetはJavaScriptを使用してページの書式設定を行います。 テーブルベースのレイアウトを JavaScript で修正するのは困難です。 また、テーブルベースのレイアウトは、すべてのブラウザーで同じように表示されない可能性があります。 最適な結果を得るには、CSS を使用してページのレイアウトを作成してください。

iFrameの使用を最小限に抑えます。

詳細
ページやテストの管理を簡単にするには、iFrame を極力使用しないことをお勧めします。 Visual Experience Composerでは、iFrame内の一部のアクションを適用できますが、サイズ変更などの一部のアクションは正しく機能しません。 複数の iFrame が使用されているページでは、ページの管理やサイズ変更が難しくなります。 そのため、多くの iFrame が使用されているページでは、問題が発生することがあります。

できるだけ DOM Ready の直後に動的な DOM の変更をすべて整列させる。

詳細
target.jsまでにエクスペリエンスアプリケーションの前に変更が適用されない場合、コンテンツ配信が壊れる可能性があります。 この問題は、ターゲット要素の階層内に DOM の変更がある場合にのみ発生します。

アンカー要素内では、プレーンテキストまたは画像タグのみを使用します。

詳細

<a>Anchor Text</a>

OR

<a href=""> <img src=""> </img> </a>

インライン要素内では、ブロックレベルの要素を避ける。

詳細
ブロックレベルの要素は、アンカーやスパンなどのインライン要素の内部では使用しないでください。 これにより、インライン要素の高さと幅が失われるため、Visual Experience Composerのオーバーレイツールが期待どおりに機能しない可能性があります。

Web サイト内で base タグを使用して URL とリンクを解決してはならない。

詳細
VECは、リンクを更新するプロキシサーバーを使用して、バックグラウンドでweb サイトを操作します。 base タグを追加すると、このプロキシサーバーが使用する URL が、ブラウザーによって再度解決され、壊れているように表示されます。

「HTML を編集」を使用して DOM 構造を操作すると、セレクターが壊れることがある。

詳細

例えば、次の 2 つの操作をおこなったとします。

  • クラスに要素 1 を追加
  • 要素 1 の HTML を編集

変更するたびに、VECに新しい要素が作成されます。 2 つ目の操作では、要素 1 を変更しているので、要素 1 を削除すると、2 つ目の操作で変更する対象となる要素がなくなるので、変更が動作しなくなります。

つまり、テキストを持つ要素を追加し、別の操作でその要素を異なるテキストに編集した場合、コードエディターには、両方の操作が別々の要素として表示されます。 要素を編集した場合は、作成した元の要素を変更した新しい要素が作成され、その新しい要素に編集したテキストが設定されます。 その後、元の要素を削除すると、編集されたテキストは、編集された要素を見付けることができないので、表示されません。 2 つ目の要素は要素のリストには引き続き含まれていますが、変更元の要素が存在しなくなっているので、ページ上での効果がなくなります。

Visual Experience Composer🔗で使用されている エレメントセレクターを参照してください。

リッチテキストエディターでテキスト要素のスタイルを設定する場合は、<b>および<i> タグを使用します。

詳細
  • 太字テキストの場合、<strong> ではなく、<b> を使用します。
  • 斜体の場合、<em> ではなく、<i> を使用します。

<strong> および <em> タグは、予期しない結果になる可能性があります。

フォームフィールドの削除は慎重におこなう。

詳細
フォームフィールドによっては送信のために必須のものがあります。 そうしたフォームフィールドを削除すると、送信に影響する可能性があります。

スクリプト内にmboxCreateを含めないでください。

詳細
mboxCreate は document.write を使用しているので、スクリプトには mboxCreate を含めないことをお勧めします。 代わりに、mboxDefine および mboxUpdate を使用して、同じ処理をおこないます。

初期化にJavaScript コードが必要な場合は、Targetを使用してHTML スニペットを更新しないでください。

詳細

ページコンポーネント（スライダー、カルーセルなど）に対してアクション（HTMLの編集）を実行すると、配信が壊れているように見える場合があります。 VECは、ページコンポーネントがJavaScriptによってインスタンス化された後にアクションを実行します。

しかし、ページのコンテンツが訪問者に配信される時には、コンポーネントのインスタンス化の前にアクションが適用されます。 このため、このコンポーネントの機能が配信の際に壊れたり壊れなかったりします。 機能は、コンポーネントを定義するためにページで使用されたスクリプトの性質に依存します。

配信をテストして一度は動作しても、その後も続けて動作するとは限りません。 競合条件があることもないこともあります。

  • レース条件がある場合、配信は断続的に機能します。
  • レースの条件がない場合、配信は常に機能します。

ページのテストは何度かおこない、期待どおりに配信が動作することを確認してください。

Web サイト内で base タグを使用して URL やリンクを解決してはならない。

詳細
Enhanced Experience Composerを使用すると、すべてのリンク URLを更新してプロキシで動作させるプロキシ サーバーによって、Web サイトが舞台裏で操作されます。 基本タグを追加すると、これらのURLはすべてブラウザーで解決されるため、破損しているように見えます。

ターゲットに使用される可能性のあるサイト上の重要なテキストは、HTML コードの要素内に入れる。

詳細

例えば、次のようなコードでは、VEC 内の「Shopping Cart」というテキストをターゲットにできません。

code language-html 
<a href="https://www.botanicchoice.com/shop.axd/Cart">
   <img alt="Shopping Cart"src="/images/ico-cart.gif"></img>
   Shopping Cart:
   <span id="HeaderCartQtyTotal">
      0
  </span>
  Items
  <span id="HeaderCartPriceTotal"></span>
</a>

この例では、VECでアンカー要素全体が選択されており、ターゲティングが実行された場合に他の要素に悪影響を及ぼします。

JavaScript コードでtopまたはself個の変数を使用しないでください。

詳細
Enhanced Experience Composerが有効になっている場合、最上位および自己変数の値が更新され、iframe バスティングが無効になります。 カスタム JavaScript コードの代わりに、X-frame オプションヘッダーを使用して iframe バスティングを追加してください。

ページを読み込む際にパラメーターが追加される場合は、必ず Web サイトのテストをおこなう。

詳細

例えば、www.abc.comを開くには、次のURL パラメーターが使用されます。

www.abc.com?mboxEdit=1&mboxDisable=1

これらのパラメーターは iframe 内の編集を可能にします。

こういったパラメーターを追加した後は、Web サイトが期待どおりに読み込まれるかどうか確認してください。

iframe で期待どおりにページが開くかどうかを確認。

詳細

Web サイトでiframe バスティング機能をオフにし、ダミーページのiframe内でweb サイトが期待どおりに開かれるかどうかを確認します。 次に例を示します。

code language-html 
<!DOCTYPE
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <iframe src="https://www.homedepot.com"</iframe>
</body>
</html>

注意事項 section_A0436B7B85BA467FA9DE13A9A40E6A6E

アクティビティをデザインするためにVisual Experience Composerを使用する場合は、次の注意事項を考慮してください。

Move機能はz インデックスをサポートしていません。

詳細
z- インデックス機能がないので、移動後の要素を別の要素の上に移動することはできません。 詳しくは、制限事項を参照してください。

要素を整列すると、クリック追跡に影響する。

詳細

クリック追跡用にマークされた要素を整列すると、それらの要素のパスが変更されます。 その結果、整列前の要素が配置されていた位置に存在する別の要素が、クリック追跡の対象になります。

これは、アクティビティのコンテンツを配信するコードと、クリックを追跡するコードの両方が、ページに配信される同じコードに含まれているためです。 別のページを表示して、クリック追跡を設定すると、アクティビティのコンテンツコードとクリック追跡コードがそのページに配信されます。 クリック追跡ページが、テストを実行しているページと同様のページ構造を持っている場合、クリック追跡ページでもテストコンテンツが表示される場合があります。

要素を挿入すると、mboxである<div>で機能しない可能性があります。

詳細
mboxにオファーが含まれている場合、mboxが正しく実装されていない場合、要素を挿入するとinsertBeforeとして表示され、insertAfterとして表示されない場合があります。

親要素と子要素の両方を編集する場合、親を先に編集する。

詳細
要素で画像アクションを交換してから、その親要素でテキストまたは HTML を編集すると、配信で問題が発生する可能性があります。 最善のワークフローは、子要素で画像を交換する前に親要素を編集することです。

mbox を子要素として含むページ要素は選択できない。

詳細

例えば、ページに以下の要素が含まれている場合：

code language-html 
<div>
  <div class="mboxDefault" >
  </div>
  <script>mboxCreate('myMbox');
</div>`

ページ内でハードコードされたmboxがTargetへの呼び出しを行い、応答を受信するため、エクスペリエンスで外部divを選択しないでください。 この応答は、より大きなページ要素を対象とした応答の妨げになります。

顧客の環境でプロキシ IPがブロックされる場合があります。

詳細
ステージング環境などの非ライブサイトでEnhanced Experienced Composerを使用している場合、サイトがRIPをブロックすると、タイムアウトとアクセス拒否エラーが表示される場合があります。

制限事項 section_F33C2EA27F2E417AA036BC199DD6C721

VECを使用する場合は、次の制限事項を考慮してください。

VEC互換性をChrome拡張ポリシーの変更と処理しています。 ext

詳細

Google Chrome🔗でV3 マニフェストポリシーが更新されたため、拡張機能はブラウザーによって解析される前に元のDOMを変更できなくなります。 その結果、iframe-busting実装などの特定のセキュリティスクリプトによって、VECでのページの読み込みがブロックされる場合があります。

互換性を確保するために、ページがTarget iframe内に読み込まれる場合、これらのスクリプトは条件付きで無効にする必要があります。 このプロセスは、VECの読み込み中にTargetによって挿入されるwindow.adobeVecExtension オブジェクトの存在を確認することで安全に実行できます。

次のコードスニペットは、VECでweb ページが読み込まれない原因となるiframe バストリングコードの例です。

window.top.location = window.self.location;

top.location.href = self.location.href;

簡単なチェックを使用すると、web ページがTarget内に埋め込まれている場合を検証できます。 コードスニペットは次のようになります。

code language-none 
if(!window.adobeVecExtension) {
    // additional security logic
}

コンテナの外に要素を移動し、その後にCSS プロパティを移動することはできません。

詳細
CSS プロパティが後に続くコンテナの外側に要素を移動することはできません。

再配置するButton要素を選択することはできません。

詳細
Button個の要素を直接選択して並べ替えることはできません。 並べ替えを有効にするには、大きなコンテナ内にボタンを配置します。

mbox ではオファーの置き換えのみを使用できる。

詳細
Edit ClassやRearrangeなどのアクションは、mbox内では許可されていません。

同じ要素を整列して移動してはならない。

詳細
要素を別の位置に移動した後、親コンテナを選択して子コンテナの整列を試みた場合、その移動した要素は整列しないで、現在の位置に残ります。 整列は希望どおりに表示されないことがあります。

Change Image アクションは、カルーセル内の画像に対して機能しません。

詳細

例えば、ページに6枚の画像を含むカルーセルがあり、画像をカルーセルの2番目の画像と入れ替えたい場合、Change Image アクションは機能しません。

回避策は、親コンテナを選択し、Edit HTML アクションを使用してカルーセルのHTMLを編集し、目的の画像の画像ソースを更新することです。

mbox 内では画像のサイズを変更できない。

詳細
mbox 要素内で画像をスワップした後、mbox 要素のサイズに従ってその画像のサイズを変更しようとしても、サイズ変更は許可されません。

画像をスワップした後は、Edit アクションを選択できません。

詳細
画像をスワップした後は、Scene7 の URL を編集できません。

外部ソースを持つHTML要素は編集できません。

詳細
例：ビデオ、オーディオタグ、埋め込み、iFrame、フレーム。

プレーンテキストまたは画像タグ以外の要素を含むアンカー要素に対してクリック追跡が機能しない。

詳細
例えば、要素に JavaScript が含まれている場合、クリック追跡は機能しません。

ページは、VECが機能するためにURL パラメーターを受け入れる必要があります。

詳細
一部のサイトは、ページの URL パラメーターを除去します。 ただし、VECにはこれらのパラメーターが必要です。

HTMLの一部としてスクリプトを使用する場合、外部からアクセスされる変数と関数は、ウィンドウ名前空間の下で宣言する必要があります。

詳細

スクリプトは、ページの読み込み後、target.jsの範囲内で実行されます。 このため、ローカルに定義された変数や関数は、外部のスクリプトブロックからアクセスできません。

誤った構文:

code language-html 
<script>
  var myVar = 123;
  function myFunc() {
    //
  }
</script>`

正しい構文:

code language-html 
<script>
  window.myVar = 123;
  window.myFunc = function() {
    //
  };
</script>

Content ライブラリ （Scene7）から画像を挿入し、HTMLを編集すると、画像のURLが壊れます。

詳細

「customHeaderMessage」 div 内に、任意のダミーテキストの入ったアンカー要素を追加します。

code language-html 
<a href="#">
<span> Dummy text </span>
</a>

Insert Element アクションを使用してこのdivを選択し、画像をこのダミーテキスト divの兄弟として挿入します。

画像挿入後は、次のようになります。

code language-html 
<a href="#">
<span> Dummy text </span>
<img src=""> This is inserted Image. </img>
</a>

ダミーテキストの span を削除します。

VECのcustomCode アクションは、Internet Explorer 8では機能しません。

詳細
スクリプト コンテンツを処理する際のIE8の制限により、target.jsはIE8でこれをサポートしていません。 回避策として、ページにjQueryが含まれており、ウィンドウ オブジェクト上にグローバルに公開されている場合、target.jsはcustomCode アクションの配信を使用できます。 window.jQueryとwindow.jQuery.fn.prependが定義されていることを確認してください。

クリック追跡は、エクスペリエンスが作成されたページまたはリダイレクトされるページでのみサポートされる。

詳細
VECではBrowse モードをクリック トラッキングに使用できますが、Browse モードを使用してページにクリック トラッキングを追加することはできません。
recommendation-more-help
target-help-main