変更
ページへの変更を表示し、追加の変更（CSS セレクター、mbox およびカスタムコード）を追加できる Adobe Target の Modifications ページに関する情報です。
Modifications ページには、Visual Experience Composer （VEC）でページに加えられたすべての変更が表示され、ページ上の各要素をクリックして（アクションを選択 追加の変更を加えることできます。 行った変更は、個別のアクションまたは要素として Modifications ータリストに表示されます。 さらに、CSS セレクター、mbox、カスタムコードなどのタイプの変更を加えることもできます。
変更の概要 section_EE27E7572AA74397BBDED563B2B3D509
Modifications ページには、ページに加えられたすべての変更が VEC で表示されます。 行った変更は、個別のアクションまたは要素として Modifications ータリストに表示されます。
変更ページを使用すると、VEC を使用してコンテンツの配信方法を設定するときに Target で選択されるセレクターに少し変更を加えることができます。コンテンツまたは HTML 属性を変更できます。コードを編集して、mbox 内に HTML オファーと同等のものを作成することもできます。
変更ページを使用すると、次のことをおこなえます。
-
Visual Experience Composer でおこなったアクションの表示。
-
既存のアクションの編集。目的の変更にカーソルを合わせ、「Edit」アイコンをクリックします。
変更を加えます。
-
既存のアクションを削除します。 目的の変更にカーソルを合わせ、「Delete」アイコンをクリックします。
-
新しい変更の追加。「Add Modification」または「+」アイコンをクリックし、以下に説明するように変更を指定します。
変更が 1 つ作成されたら、Target には、パネルの下部にある「変更を追加」ボタンの代わりに、変更パネルの上部に + アイコンが表示されることに注意してください。
-
変更パネルを Target UI の側辺に沿って垂直に、または下部へ水平にドッキングします。Dock アイコンをクリックすると、2 つの設定を切り替えることができます。
次の図に、画面の下部にドッキングされた変更パネルを示します。
変更の追加 section_C7ABCD5731A048CB8F90EDC31A32EDF9
-
選択したエクスペリエンスの Modifications ページを表示するには、VEC で「Modifications」アイコン（</>）をクリックします。
note note NOTE フォームベースの Experience Composer で変更パネルを開くには、HTMLオ ファーを作成または編集します。詳しくは、フォームベースの Experience Composer を参照してください。 Modifications ページが開き、画面が左側のビジュアルモードと右側の変更パネルに分割されます。 Dock アイコンをクリックして、変更パネルを Target UI の横に垂直に、または下部に水平にドッキングします。 次の図のエクスペリエンス A は、これまで変更されたことがありません。
エクスペリエンス B では、右側のエクスペリ Modifications ンスパネルに以前の変更が表示されます。
-
変更を追加するには：
- エクスペリエンスに以前の変更がない場合は、右側のエクスペリ Modifications ンスパネルの下部にある Add Modification ボタンをクリックします。
- エクスペリエンスに以前の変更がある場合は、右側のエクスペリ Modifications ンスパネルの上部にある「+」アイコンをクリックします。
次のような変更パネルが表示されます。
-
Modifications Type ドロップダウンリストから、目的のタイプを選択します。
table 0-row-2 1-row-2 2-row-2 3-row-2 変更タイプ 詳細 CSS セレクター CSS 要素セレクターボックスで、変更する CSS 要素を指定し、アクションタイプ（「コンテンツを設定」または「属性を設定」）を選択して、必要な情報と目的のコンテンツを入力します。 mbox mbox 名と目的のコンテンツを指定します。
メモ:at.js 2 を使用するページの VEC では、mbox がサポートされなくなりました。**。
回避策：
- at.js を使用する場合 2.x:mbox の変更ではなく CSS セレクターの変更を追加し、mbox が使用していたセレクターにコンテンツを追加します。
- フォームベースのアクティビティを使用する（mbox および at.js で機能 1.x と at.js 2 の両方について示しています。x）。
- at.js 1 の使用 x を VEC で使用します。
カスタムコード オプション名を指定し、必要に応じて「Add Code in the
<HEAD>セクション 」チェックボックスを選択または選択解除して、カスタムコードを追加します。Add Code in the
<HEAD>Section を選択すると、カスタムコードが<head>セクションに追加され、body または page-load イベントを待たずにその実行が実行されます。<script>および<style>の要素のみを追加します。<div>タグなどの要素を追加すると、残りの<head>要素が<body>に表示される場合があります。at.js を使用している場合、すべてのオファーが非同期で配信されます。Add Code in the
<HEAD>Section の選択を解除すると、カスタムコードは<body>タグの直後に実行されます。 すべてのコードを 1 つの<div>内にラップして、DOM 構造を保持します。at.js を使用している場合、すべてのオファーが非同期で配信されます。<BODY>のHTMLに<SCRIPT>と<DIV>が含まれる場合、<DIV>が<BODY>に追加され、<SCRIPT>が<HEAD>で実行されます。 また、外部ファイルを読み込む<SCRIPT>が<HEAD>に追加されます。メモ：スクリプトは非同期で実行されます。 つまり、例えば
document.writeや類似のスクリプトメソッドは使用できません。カスタムコードでは、非ビジュアルインターフェイスを使用して、VEC、フォームベースの Experience Composer、HTML オファーエディター内でアクションを表示および編集したり、新規で追加したりできます。パネルでは、エクスペリエンスのコードを見ながら、複雑なエクスペリエンスの構築、既存のエクスペリエンスの調整、問題のトラブルシューティングをおこなうことができます。
カスタムコードは、HTML、JavaScript および CSS の使用に慣れた上級ユーザー向けの機能です。コードビューでは、コードを変更して微調整したり、セレクターの問題を修正したりできます。新しいカスタムコードおよびアクションを追加することもできます。カスタムコードを複数追加し、オプションでそれぞれのカスタムコードに名前を付けることができます。
メモ：カスタムコードは現在、A/B およびエクスペリエンスのターゲット設定（XT）アクティビティでのみ使用できます。 オーバーレイの場合とリダイレクトオファーが適用されている場合、カスタムコードは無効になります。
カスタムコードでは、次のような操作をおこなうことができます。
- ページ上部で実行するカスタムの JavaScript、HTML または CSS の追加
- 変更後に VEC によって生成されるコードの表示または編集
- セレクターに対する HTML コンテンツの設定（CSS セレクターのみ）
- HTML 要素に対する属性の設定
- リージョナル mbox に配信するオファーコンテンツの追加
- DOM 準備完了時の置き換え（jQuery 使用）
- DOM 準備完了時の置き換え（jQuery 不使用）（Internet Explorer 8 は非対応）
- DOM ポーリングでの置き換え（「elementOnLoad」プラグイン使用）
- カスタムリダイレクト
カスタムコードには次の特長があります。
- わかりやすさを考慮した行番号
- HTML オファーの構文の誤りを防ぐのに役立つ構文情報
- 複数のカスタムコードを作成し、オプションでそれぞれに名前を指定できる機能複数のカスタムコードを作成すると、今後のデバッグが容易になります。例えば、複数の変更をおこなう単一のカスタムコードを作成するのではなく、変更ごとに別個のカスタムコードを作成し、それぞれにわかりやすい名前を付けることができます。別個のカスタムコードにすることで、変更がモジュール化され、扱いやすくなります。アクティビティで複数のカスタムコードを実行する場合は、作成した順に実行されるとは限らないことに注意してください。
変更パネルは、ビジュアルモードとコードモードの画面に分割されます。両方のモードが同期された状態になります。ビジュアルモードで変更をおこなうと、コードビューの対応する行が変更されます。同様に、コードビューで変更を確定するたびに、ビジュアルエクスペリエンスに変更が表示されます。コードビューで任意の行をクリックすると、ビジュアルページで対応する要素が選択されます。
カスタムコードでは、HTML、スクリプトおよびスタイルをサポートしています。有効な HTML コードまたはスクリプトを追加または編集できます。
-
必要に応じて、さらに変更を加えます。
カスタムコードの使用例 section_26CB3360097D400FB02E20AE5FDBA352
Custom Code パネルには、ページの読み込みの開始時に実行されるコードが含まれています。
<head> タグ内の JavaScript コードを実行できます。<body> タグが DOM に表示されるのを待たずに、コードが実行されます。
後続のビジュアルアクションのセレクターは、このタブで追加される HTML 要素に依存します。
カスタムコードパネルは、通常、ページの上部に JavaScript または CSS を追加するために使用されます。
「Custom Code」タブを使用して、次の操作を行います。
-
JavaScript のインラインでの使用、または外部 JavaScript ファイルへのリンク
例えば、要素の色を変更するには、次のように入力します。
code language-javascript <script type="text/javascript"> document.getElementById("element_id").style.color = "blue"; </script> -
インラインでのスタイルの設定、または外部スタイルシートへのリンク
例えば、オーバーレイ要素のクラスを定義するには、次のように入力します。
code language-html <style> .overlay { position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; } </style> -
HTML スニペットを追加して新しい要素を定義
例えば、上で定義した CSS クラスを使用してオーバーレイ
<div>を作成するには、次の HTML スニペットを使用します。code language-html <div class="overlay"></div> -
DOM 準備完了時の置き換え（jQuery 使用）
JQuery を使用した次の例では、オファーの実行時に顧客の web サイトのページで jQuery が使用可能で Target ることを前提としています。
code language-javascript <style>#default_content {visibility:hidden;}</style> <script> jQuery( document ).ready(function() { jQuery("#default_content").html( "<span style='color:red'>Hello <strong>Again</strong></span>" ); jQuery("#default_content").css("visibility","visible"); }); </script> -
DOM 準備完了時の置き換え（jQuery 不使用）（Internet Explorer 8 は非対応）
code language-javascript <style>#default_content {visibility:hidden;}</style> <script> document.addEventListener("DOMContentLoaded", function(event) { document.getElementById("default_content").innerHTML = "<span style='color:red'>Hello <strong>Again</strong></span>"; document.getElementById("default_content").style.visibility="visible"; }); </script> -
既存のパラメーター、
s_tntパラメーター（Analytics への従来の統合）、リファラーパラメーターおよび mbox セッションを渡すカスタムのリダイレクトcode language-javascript <style type="text/css">body{display:none!important;}</style> <script type="text/javascript"> var qs='';window.location.search?qs=window.location.search+'&':qs='?'; window.location.replace('//www.mywebsite.com/'+qs+'s_tnt=${campaign.id}:${campaign.recipe.id}:${campaign.recipe.trafficType}&s_tntref='+encodeURIComponent(document.referrer)+'&mboxSession='+mboxFactoryDefault.getSessionId().getId()+''+window.location.hash+''); </script> -
カスタムコードで使用する Adobe Target エクスペリエンステンプレートを追加します。Target エクスペリエンステンプレートは、マーケティング担当者向けの一般的な使用例を実行するための設定可能な入力を備えたコーディング済みのサンプルです。これらのエクスペリエンステンプレートは、VEC またはフォームベースの Experience Composer を通じて一般的な使用例を実行するための出発点として開発者およびマーケティング担当者に無償で提供されます。使用例には、ライトボックス、カルーセル、カウントダウンなどがあります。
詳しくは、エクスペリエンステンプレートを参照してください。
カスタムコードのベストプラクティス section_10DFFD9FB92A43C1BB444A45E0272B28
カスタムコードは、必ず 1 つの要素にまとめます。
例：
<div id="custom-code">
// My Code goes here
</div>
変更が必要な場合は、このコンテナ内でおこないます。
カスタムコードが不要になった場合は、コンテナを空のままにし、削除しないようにします。コンテナを残しておくことで、他のエクスペリエンスの変更時にそのまま変更をおこなうことができます。
コードエディターでのページに対する変更では、要素 ID「CDQID」を使用しないでください。
Target では、Target で変更されたページ上の要素に対して値「CDQID」の新しい要素 ID を適用します。この ID は Target によって適用されるものなので、コードエディターでの変更や調整においてこの値を使用しないでください。
カスタムコードスクリプトでは、document.write アクションを実行しないでください。
スクリプトは、非同期で実行されます。document.write アクションは、非同期で実行されると、多くの場合ページ上の誤った場所に配置されます。カスタムコードで作成されたスクリプトで document.write を使用することはお勧めしません。
要素を作成して変更した場合は、元の要素を削除しないでください。
変更をおこなうたびに、変更パネルに新しい要素が作成されます。2 つ目の操作では、要素 1 を変更しているので、要素 1 を削除すると、2 つ目の操作で変更する対象となる要素がなくなるので、変更が動作しなくなります。詳しくは、以下の「トラブルシューティング」を参照してください。
同じ URL をターゲットとする 2 つのアクティビティに対してカスタムコード機能を使用する場合は、注意が必要です。
同じ URL をターゲットとする 2 つのアクティビティに対してカスタムコード機能を使用する場合、両方のアクティビティからページに対して JavaScript が挿入されます。Target は、配信されるコンテンツの順序を自動的に判断します。コードが、配置に依存しないようにしてください。コード内で競合が発生しないようにする必要があります。
カスタムコードのトラブルシューティング section_6C965CBC31C348D7AA5B57B63DAB9E7F
triggerView を使用する場合、カスタムコードが実行されない。
オプションとして {page: false} を使用して triggerView() が呼び出される場合、VEC のカスタムコードオファーは再レンダリングされません。
ページの構造上の変更によってアクションを適用できなかったことを示す警告が表示されました。これはどういう意味ですか？
このメッセージは、アクティビティが最後に保存されてから、ページの構造が変更されたことを示します。
参照モードを使用して存在しないセレクターにアクセスしている可能性がります。警告メッセージに示されているように、コンテンツが想定どおりに表示されるようにするために、各エクスペリエンスを削除してから作成し直すことをお勧めします。
要素を削除すると、「このアクションを削除すると、後続のアクションに影響する可能性があります」という警告が表示されます。」 これはどういう意味ですか？
例えば、次の 2 つの操作をおこなったとします。
- クラスに要素 1 を追加
- 要素 1 の HTML を編集
変更をおこなうたびに、変更パネルに新しい要素が作成されます。2 つ目の操作では、要素 1 を変更しているので、要素 1 を削除すると、2 つ目の操作で変更する対象となる要素がなくなるので、変更が動作しなくなります。
つまり、テキストを持つ要素を追加し、別の操作でその要素を異なるテキストに編集した場合、変更パネルには、両方の操作が別々の要素として表示されます。要素を編集した場合は、作成した元の要素を変更した新しい要素が作成され、その新しい要素に編集したテキストが設定されます。その後、元の要素を削除すると、編集されたテキストは、編集された要素を見付けることができないので、表示されません。2 つ目の要素は要素のリストには引き続き含まれていますが、変更元の要素が存在しなくなっているので、ページ上での効果がなくなります。
スクリプトで document.write を使用して作成した要素が、期待した場所に表示されません。
スクリプトは、非同期で実行されます。document.write アクションは、非同期で実行されると、多くの場合ページ上の誤った場所に配置されます。アドビでは、カスタムコードで作成するスクリプト内で document.write を使用しないことをお勧めします。
JavaScriptのカスタムコードにエラーが表示される。
有効な JavaScript でないインライン JavaScript は、カスタムコードでエラーになります。
カスタムコードの変更を元に戻すことができません。
現在、変更パネルとカスタムコードでの編集操作および削除操作については、取り消しはサポートされていません。これらのいずれかの操作を取り消すと、VEC のエクスペリエンスの表示が、カスタムコードに表示されている実際のアクションと食い違っているように見える場合があります。ただし、カスタムコード内のアクションは正しい状態で、配信には影響はありません。これは、UI の問題です。エクスペリエンスを更新するには、保存してから再度開くか、または次のステップに移動して戻ります。これらのいずれかの操作をおこなうと、エクスペリエンスが再読み込みされ、期待どおりに表示されて、変更パネルのアクションとの整合性が保たれます。
Internet Explorer 8 でカスタムコードが期待どおりの結果を返さない
Target は、IE 8 をサポートしていません。