変更
Adobe Targetの変更 ページに関する情報。ページの変更を表示し、追加の変更（CSS セレクター、Mbox、およびカスタムコード）を追加できます。
変更 ページには、Visual Experience Composer （VEC）でページに加えられたすべての変更が表示され、ページ上の各要素をクリックして アクションを選択すると追加の変更を加えることができます。 おこなった各変更は、「変更」リストに別個のアクションまたは要素として表示されます。 また、CSS セレクター、Mboxなどの変更タイプを含め、変更を追加することもできます。 カスタムコードなどです。
変更の概要 section_EE27E7572AA74397BBDED563B2B3D509
変更ページには、VEC でページに対しておこなったすべての変更が表示されます。 おこなった各変更は、「変更」リストに別個のアクションまたは要素として表示されます。
変更ページを使用すると、VEC を使用してコンテンツの配信方法を設定するときに Target で選択されるセレクターに少し変更を加えることができます。 コンテンツまたは HTML 属性を変更できます。 コードを編集して、mbox 内に HTML オファーと同等のものを作成することもできます。
変更ページを使用すると、次のことをおこなえます。
-
Visual Experience Composer でおこなったアクションの表示。
-
既存のアクションの編集。 希望する変更の上にカーソルを合わせて、編集アイコンをクリックします。
変更を加えます。
-
既存のアクションを削除します。 希望する変更の上にカーソルを合わせて、削除アイコンをクリックします。
-
新しい変更の追加。 「変更を追加」または + アイコンをクリックし、以下に示すように変更を指定します。
変更が 1 つ作成されたら、Target には、パネルの下部にある「変更を追加」ボタンの代わりに、変更パネルの上部に + アイコンが表示されることに注意してください。
-
変更パネルを Target UI の側辺に沿って垂直に、または下部へ水平にドッキングします。 ドックアイコンをクリックして、2 つの設定の間の切り替えをおこないます。
次の図に、画面の下部にドッキングされた変更パネルを示します。
変更の追加 section_C7ABCD5731A048CB8F90EDC31A32EDF9
-
選択したエクスペリエンスの変更ページを表示するには、VEC で変更</>アイコンをクリックします。
note NOTE フォームベースの Experience Composer で変更パネルを開くには、HTMLオ ファーを作成または編集します。 詳しくは、フォームベースの Experience Composer を参照してください。 変更ページが開き、左側のビジュアルモードと右側の変更パネルに画面が分割されます。 ドックアイコンをクリックして、変更パネルを Target UI の側辺に沿って垂直に、または下部へ水平にドッキングします。 次の図のエクスペリエンス A は、これまで変更されたことがありません。
エクスペリエンス B については、これまでの変更が右側の変更パネルに表示されます。
-
変更を追加するには：
- エクスペリエンスにこれまで変更がない場合は、右側の変更パネルの下部にある「変更を追加」ボタンをクリックします。
- エクスペリエンスに以前の変更がある場合は、右側の変更パネルの上部にある + アイコンをクリックします。
次のような変更パネルが表示されます。
-
「変更タイプ」ドロップダウンリストで、目的のタイプを選択します。
table 0-row-2 1-row-2 2-row-2 3-row-2 変更タイプ 詳細 CSS セレクター CSS 要素セレクターボックスで、変更する CSS 要素を指定し、アクションタイプ（「コンテンツを設定」または「属性を設定」）を選択して、必要な情報と目的のコンテンツを入力します。 mbox mbox名と目的のコンテンツを指定します。
注: at.js 2.xを使用するページのVECでは、Mboxはサポートされなくなりました。
回避策として：
- at.js 2.xを使用している場合は、Mboxの変更の代わりにCSS セレクターの変更を追加し、mboxが使用していたセレクターにコンテンツを追加します。
- フォームベースのアクティビティを使用します（mboxおよびat.js 1.xおよびat.js 2.xで動作）。
- VECでat.js 1.xを使用します。
カスタムコード オプションの名前を指定し、必要に応じて「
<HEAD>セクション 」チェックボックスの「 コードを追加」を選択または選択解除してから、カスタムコードを追加します。「
<HEAD>セクション 」で「 コードを追加」を選択すると、カスタムコードが<head>セクションに追加され、その実行は本文イベントまたはページ読み込みイベントを待ちません。<script>および<style>の要素のみを追加します。<div>タグなどの要素を追加すると、残りの<head>要素が<body>に表示される場合があります。 at.jsを使用している場合、すべてのオファーが非同期で配信されます。「
<HEAD>」セクション で「 コードを追加」の選択を解除すると、<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
カスタムコードパネルには、ページ読み込みの開始時に実行されるコードが含まれています。
<head> タグ内の JavaScript コードを実行できます。 <body> タグが DOM に表示されるのを待たずに、コードが実行されます。
後続のビジュアルアクションのセレクターは、このタブで追加される HTML 要素に依存します。
カスタムコードパネルは、通常、ページの上部に JavaScript または CSS を追加するために使用されます。
「カスタムコード」タブを使用して、次のことをおこなうことができます。
-
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の使用例では、Targetがオファーを実行する際に、お客様のweb サイトのページでjQueryが利用可能であると仮定しています。
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 をサポートしていません。