次に関する情報: 変更 ページ内 Adobe Target ページに対する変更を表示し、さらに変更(CSS セレクター、mbox、カスタムコード)を追加できます。
この 変更 ページには、Visual Experience Composer(VEC) でページに対しておこなわれたすべての変更が表示され、ページの各要素をクリックして追加の変更を加えることができます。 アクションの選択. おこなった各変更は、「変更」リストに別個のアクションまたは要素として表示されます。さらに、CSS セレクター、mbox、カスタムコードなどのタイプの変更を加えることもできます。
変更ページには、VEC でページに対しておこなったすべての変更が表示されます。おこなった各変更は、「変更」リストに別個のアクションまたは要素として表示されます。
変更ページを使用すると、VEC を使用してコンテンツの配信方法を設定するときに Target で選択されるセレクターに少し変更を加えることができます。コンテンツまたは HTML 属性を変更できます。コードを編集して、mbox 内に HTML オファーと同等のものを作成することもできます。
変更ページを使用すると、次のことをおこなえます。
Visual Experience Composer でおこなったアクションの表示。
既存のアクションの編集。目的の変更の上にマウスポインターを置いて、編集アイコンをクリックします。
変更を加えます。
既存のアクションの削除. 目的の変更の上にマウスポインターを置いて、削除アイコンをクリックします。
新しい変更の追加。「変更を追加」または + アイコンをクリックし、以下に示すように変更を指定します。
変更が 1 つ作成されたら、Target には、パネルの下部にある「変更を追加」ボタンの代わりに、変更パネルの上部に + アイコンが表示されることに注意してください。
変更パネルを Target UI の側辺に沿って垂直に、または下部へ水平にドッキングします。ドックアイコンをクリックして、2 つの設定の間の切り替えをおこないます。
次の図に、画面の下部にドッキングされた変更パネルを示します。
選択したエクスペリエンスの 変更 ページを表示するには、VECで 、変更</>アイコンをクリックします。
フォームベースの Experience Composer で変更パネルを開くには、HTMLオ ファーを作成または編集します。詳しくは、フォームベースの Experience Composer を参照してください。
変更ページが開き、左側のビジュアルモードと右側の変更パネルに画面が分割されます。ドックアイコンをクリックして、変更パネルを Target UI の側辺に沿って垂直に、または下部へ水平にドッキングします。次の図のエクスペリエンス A は、これまで変更されたことがありません。
エクスペリエンス B については、これまでの変更が右側の変更パネルに表示されます。
変更を追加するには:
次のような変更パネルが表示されます。
「変更タイプ」ドロップダウンリストで、目的のタイプを選択します。
変更タイプ | 詳細 |
---|---|
CSS セレクター | CSS 要素セレクターボックスで、変更する CSS 要素を指定し、アクションタイプ(「コンテンツを設定」または「属性を設定」)を選択して、必要な情報と目的のコンテンツを入力します。 |
mbox | mbox 名と目的のコンテンツを指定します。 注意:at.js 2 を使用するページでは、VEC で mbox はサポートされなくなりました。**。 回避策として:
|
カスタムコード | オプションの名前を指定し、「セクションに<HEAD> コードを追加」チェックボックスを必要に応じて選択または選択解除して、カスタムコードを追加します。「セクションに 「セクションに のHTML 注意:スクリプトは、非同期で実行されます。つまり、例えば カスタムコードでは、非ビジュアルインターフェイスを使用して、VEC、フォームベースの Experience Composer、HTML オファーエディター内でアクションを表示および編集したり、新規で追加したりできます。パネルでは、エクスペリエンスのコードを見ながら、複雑なエクスペリエンスの構築、既存のエクスペリエンスの調整、問題のトラブルシューティングをおこなうことができます。 カスタムコードは、HTML、JavaScript および CSS の使用に慣れた上級ユーザー向けの機能です。コードビューでは、コードを変更して微調整したり、セレクターの問題を修正したりできます。新しいカスタムコードおよびアクションを追加することもできます。カスタムコードを複数追加し、オプションでそれぞれのカスタムコードに名前を付けることができます。 注意:カスタムコードは、現在、A/B テストおよびエクスペリエンスのターゲット設定(XT)のアクティビティでのみ利用できます。オーバーレイの場合とリダイレクトオファーが適用されている場合、カスタムコードは無効になります。 カスタムコードでは、次のような操作をおこなうことができます。
カスタムコードでは、HTML、スクリプトおよびスタイルをサポートしています。有効な HTML コードまたはスクリプトを追加または編集できます。 |
必要に応じて、さらに変更を加えます。
カスタムコードパネルには、ページ読み込みの開始時に実行されるコードが含まれています。
<head>
タグ内の JavaScript コードを実行できます。<body>
タグが DOM に表示されるのを待たずに、コードが実行されます。
後続のビジュアルアクションのセレクターは、このタブで追加される HTML 要素に依存します。
カスタムコードパネルは、通常、ページの上部に JavaScript または CSS を追加するために使用されます。
「カスタムコード」タブを使用して、次のことをおこなうことができます。
JavaScript のインラインでの使用、または外部 JavaScript ファイルへのリンク
例えば、要素の色を変更するには、次のように入力します。
<script type="text/javascript">
document.getElementById("element_id").style.color = "blue";
</script>
インラインでのスタイルの設定、または外部スタイルシートへのリンク
例えば、オーバーレイ要素のクラスを定義するには、次のように入力します。
<style>
.overlay
{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
</style>
HTML スニペットを追加して新しい要素を定義
例えば、上で定義した CSS クラスを使用してオーバーレイ <div>
を作成するには、次の HTML スニペットを使用します。
<div class="overlay"></div>
DOM 準備完了時の置き換え(jQuery 使用)
次の JQuery の使用例では、顧客の Web サイトで jQuery がページ上で使用可能であると仮定しています ( Target オファーを実行します。
<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 は非対応)
<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 セッションを渡すカスタムのリダイレクト
<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 を通じて一般的な使用例を実行するための出発点として開発者およびマーケティング担当者に無償で提供されます。使用例には、ライトボックス、カルーセル、カウントダウンなどがあります。
詳しくは、エクスペリエンステンプレートを参照してください。
カスタムコードは、必ず 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 は、配信されるコンテンツの順序を自動的に判断します。コードが、配置に依存しないようにしてください。コード内で競合が発生しないようにする必要があります。
を使用する場合、カスタムコードは実行されません triggerView
.
オプションとして {page: false}
を使用して triggerView()
が呼び出される場合、VEC のカスタムコードオファーは再レンダリングされません。
ページの構造上の変更によってアクションを適用できなかったことを示す警告が表示されました。これはどういう意味ですか?
このメッセージは、アクティビティが最後に保存されてから、ページの構造が変更されたことを示します。
参照モードを使用して存在しないセレクターにアクセスしている可能性がります。警告メッセージに示されているように、コンテンツが想定どおりに表示されるようにするために、各エクスペリエンスを削除してから作成し直すことをお勧めします。
要素を削除すると、「このアクションを削除すると、後続のアクションに影響する場合があります」という警告が表示されます。これはどういう意味ですか?
例えば、次の 2 つの操作をおこなったとします。
変更をおこなうたびに、変更パネルに新しい要素が作成されます。2 つ目の操作では、要素 1 を変更しているので、要素 1 を削除すると、2 つ目の操作で変更する対象となる要素がなくなるので、変更が動作しなくなります。
つまり、テキストを持つ要素を追加し、別の操作でその要素を異なるテキストに編集した場合、変更パネルには、両方の操作が別々の要素として表示されます。要素を編集した場合は、作成した元の要素を変更した新しい要素が作成され、その新しい要素に編集したテキストが設定されます。その後、元の要素を削除すると、編集されたテキストは、編集された要素を見付けることができないので、表示されません。2 つ目の要素は要素のリストには引き続き含まれていますが、変更元の要素が存在しなくなっているので、ページ上での効果がなくなります。
スクリプトで document.write
を使用して作成した要素が、期待した場所に表示されません。
スクリプトは、非同期で実行されます。document.write
アクションは、非同期で実行されると、多くの場合ページ上の誤った場所に配置されます。アドビでは、カスタムコードで作成するスクリプト内で document.write
を使用しないことをお勧めします。
入力した JavaScript がカスタムコードでエラーになります。
有効な JavaScript でないインライン JavaScript は、カスタムコードでエラーになります。
カスタムコードの変更を取り消すことはできません。
現在、変更パネルとカスタムコードでの編集操作および削除操作については、取り消しはサポートされていません。これらのいずれかの操作を取り消すと、VEC のエクスペリエンスの表示が、カスタムコードに表示されている実際のアクションと食い違っているように見える場合があります。ただし、カスタムコード内のアクションは正しい状態で、配信には影響はありません。これは、UI の問題です。エクスペリエンスを更新するには、保存してから再度開くか、または次のステップに移動して戻ります。これらのいずれかの操作をおこなうと、エクスペリエンスが再読み込みされ、期待どおりに表示されて、変更パネルのアクションとの整合性が保たれます。
Internet Explorer 8 でカスタムコードが期待どおりの結果を返さない
Target は、IE 8 をサポートしていません。