クリエイティブ個別登録とは
クリエイティブ個別登録は、キャンペーン作成時に利用するクリエイティブを1つずつ個別に登録するメニューです。
３種類のエディターからいずれかを選択して、必要事項を入力の上、登録してください。
エディターについて
下記３種類の方法で登録します。
| 標準エディター | ページ上の表示切替箇所を指定し、書き換えや挿入するHTMLを入力して登録します。 JavaScriptを配信することも可能です。 |
|---|---|
| HTMLエディター | エリアに配信するHTMLソースを直接入力して登録します。 |
| URLリダイレクト | 複数のページを用意し各ページへリダイレクトをさせるURLを入力して登録します。（スプリットランテスト用） リダイレクト先にてスクリプトを実行することも可能です。 |
標準エディター
標準エディターは、LP上の特定の箇所を指定して、対象箇所の表示を切り替えるタイプのクリエイティブを登録するためのエディターです。
■動作設定イメージ
【HTMLソース】
<body>
<script src="//d.adlpo.com/***/***/js/smartadlpo.js" type="text/javascript"></script>
：
<div id="main">表示切り替え箇所</div>
<div id="sub">固定表示</div>
：
</body>標準エディターで「表示切り替え箇所」を指定して、表示用のHTMLを登録する。
■設定手順
標準エディターにて登録する場合、下記の手順で設定してください。
1．必須指定項目の入力
「クリエイティブ名」にクリエイティブの名称を入力してください。
| 項目名 | 設定内容 |
|---|---|
| クリエイティブ名 |
クリエイティブの名称を入力してください。 また、レポートで複数のクリエイティブの結果をまとめて集計して表示する機能である「系列の集計」を設定する際に、集計するクリエイティブの絞り込みに使用する事ができます。必要に応じて命名規則を決めて運用してください。 |
2．任意指定項目の入力
必要に応じて、以下項目を設定してください。不要な場合は次のステップへお進みください。
| 項目名 | 設定内容 |
|---|---|
| メモ |
クリエイティブ内容についての説明などを入力してください。
メモはクリエイティブ登録後にクリエイティブグループ一覧上でも入力が可能です。
|
| グループ |
クリエイティブをグループに入れて登録/管理する際に設定します。 ※グループは予め「クリエイティブ設定」のクリエイティブグループ一覧で作成しておく必要があります。 |
| サムネイル |
クリエイティブのキャプチャ画像を選択し登録します。
サムネイル用のキャプチャ画像はChromeでは「ファイル選択」、Fireforxでは「参照...」をクリックして選択してください。 また、サムネイルはクリエイティブの登録後にクリエイティブグループ一覧からも登録が可能です。 |
をクリック、または
3．表示切り替え箇所の指定
表示切り替え箇所を指定してください。指定方法は2種類あります。
※「2．切り替え方法を選択」にて「JavaScriptを配信」を選択する場合は当該手順は必要ありません。
| 指定方法 | 説明 |
|---|---|
| 簡易指定 | 特定のHTML要素(タグ)、classまたはidにて表示切り替え箇所を指定します。 |
| セレクタ指定 | CSSセレクタ方式にて表示切り替え箇所を指定します。 |
【簡易指定の場合】
指定方法は「簡易指定」を選択してください。
表示されている入力項目にて、表示切り替え箇所のHTML要素(タグ)を下表より選択し、「class」または「id」を選択後、当該class名またはid名をボックスに記入してください。
図２－５：簡易指定（動作設定イメージの指定）
| 対象HTML要素(タグ) | <div> <p> <a> <ul> <span> <section> <h1> <h2> <h3> <h4> <h5> <h6> 指定なし |
|---|
【セレクタ指定の場合】
指定方法は「セレクタ指定」を選択してください。
表示されている入力項目に、CSSセレクタ方式にて表示切り替え箇所を記入してください。
図２－６：セレクタ指定（動作設定イメージの指定）
CSSセレクタとはページ内のスタイルを設定する際にHTML要素を選択するための指定方法です。
要素型セレクタ、クラスセレクタ、IDセレクタ、結合子などを用いて、特定のHTML要素を指定することが可能です。詳細は専用サイトをご確認ください。
※CSSセレクタの記述上の制限はありません。
※子孫結合子(スペース区切り)以外の結合子は、前後のスペースを認識しません。入力された内容は自動的に整形されませんので、可読性のためスペースを入れることをお勧めします。
4．切り替え方法を選択
切り替え方法を下記より選択してください。
| 切り替え方法 | 説明 | |
|---|---|---|
| の中身を書き換える |
指定箇所の中身を「4．HTMLの入力」にて記載するHTMLに書き換えます。
|
|
| の中身の先頭に挿入 |
指定箇所の中身の先頭に「4．HTMLの入力」にて記載するHTMLを挿入します。
|
|
| の中身の末尾に挿入 |
指定箇所の中身の末尾に「4．HTMLの入力」にて記載するHTMLを挿入します。
|
|
| の前に挿入 |
指定箇所の前に「4．HTMLの入力」にて記載するHTMLを挿入します。
|
|
| の後に挿入 |
指定箇所の後ろに「4．HTMLの入力」にて記載するHTMLを挿入します。
|
|
| 入れ替える |
指定した2つの箇所を入れ替えます。
|
|
| の前に移動 |
指定箇所の前に「移動対象」にて指定した箇所を移動します。
|
|
| の後に移動 |
指定箇所の後ろに「移動対象」にて指定した箇所を移動します。
|
|
| JavaScriptを配信 |
「4．HTMLの入力」にて記載するJavaScriptを実行します。 |
※1：表示切り替え箇所の指定方法により、入力方法は異なります。
5．反映タイミングの設定
表示切り替え対象にHTMLを反映するタイミングを選択してください。デフォルトは「DOM Ready」です。
| 選択肢 | 反映タイミング | 説明 |
|---|---|---|
| DOM Ready | ページの「骨組み（DOM）」ができた時点で発火（=DOMContentLoaded） | 通常の反映タイミングです。 ページのHTML文書を読み込み、構文解析され、すべての遅延スクリプトが実行された後に対象要素を書き換えます。 画像、iframeなどのサブフレーム、非同期スクリプトの読み込み完了は待ちません。 |
| window.loadイベントで書き換える | window.loadイベント発火時 | ページ全体の読み込み完了後に対象要素を書き換えます。静的ページや要素構造が変化しないケースに適していますが、表示までにタイムラグが発生する場合があります。 |
| 遅延適用 | MutationObserverによる一度限りの監視 | ページ読み込み後に、ページ全体の子要素の追加・削除を監視します。 DOM変化が発生すると、セレクタで指定した要素がページ内に存在する場合に、指定した内容で書き換え処理を行います。 書き換え処理が完了すると、監視は自動的に終了します。 SPAやAjaxで要素が動的に生成されるケースに有効です。 |
| 遅延適用（常時監視） | MutationObserverによる継続的な監視 | ページ読み込み後に、ページ全体の子要素の追加・削除を監視します。 DOM変化が発生すると、セレクタで指定した要素がページ内に存在する場合に、指定した内容で書き換え処理を行います。 書き換え処理が完了しても、監視は継続されます。 SPAやAjaxで要素が動的に生成されるケースに有効です。 |
※「2．切り替え方法を選択」にて「JavaScriptを配信」を選択した場合は、本設定は利用できません。該当方法は通常通り、ページの「骨組み（DOM）」ができた時点で反映されます。
【複数要素設定時の注意点】
反映タイミングは、要素単位で設定可能です。複数要素を設定する場合、それぞれで異なる反映タイミングを選択できますが、以下の点にご留意ください。
▼「window.loadイベントで書き換える」が複数存在する場合
複数登録可能ですが、処理は順番に呼び出されます。同一要素に対して複数の書き換え処理を設定すると、最後に実行された処理が反映されます。
▼ 「遅延適用」「遅延適用（常時監視）」が複数存在する場合
同一要素に対して、複数の「遅延適用」または「遅延適用（常時監視）」設定は行わないようご注意ください。
「遅延適用」、「遅延適用（常時監視）」は、ページ全体の子要素の追加・削除を監視しています。
複数の設定が存在すると、同じDOM変化に対してそれぞれのコールバック（＝置き換え処理）が発生します。その際に、同一要素を指定していると、意図しない上書きやパフォーマンス低下の原因となるため、複数要素に対して該当タイミングを設定する場合は、セレクタの重複にお気を付けください。
▼ 混在利用時の考慮点
一部の要素に「DOM Ready」（デフォルト値）、別の要素に「遅延適用」など、異なる反映タイミングを混在させることは可能です。
ただし、同じ要素に複数の反映タイミングを設定すると処理が二重に走る可能性があるため、要素ごとに使用するタイミングを明確に分け設定してください。
6．HTMLの入力
表示するHTMLを入力してください。
※「2．切り替え方法を選択」にて「JavaScriptを配信」を選択した場合は、実行するJavaScriptを入力してください。このとき、<script>タグは記述しないでください。<script></script>で囲ったJavaScriptを記述すると動作しません。
7．要素を追加
1つのクリエイティブでLP上の複数箇所の表示を同時に切り替える場合は「要素を追加」をクリックして、追加された入力項目で設定を行ってください。
8．登録
「登録」ボタンをクリックし、クリエイティブを登録してください。
HTMLエディター
HTMLエディターはLP上のエリアに配信するHTMLソースを直接入力してクリエイティブを登録するためのエディターです。
■入力ソース例
- ボタンの色や背景色を指定したCSS（色の直接指定や背景画像の指定など)
- 複数のページを用意し各ページへリダイレクトをさせるJavaScript（スプリットランテスト用）
- ページ内のレイアウトを変更するJavaScript
- ダイレクトコード設定時にエリアタグで囲った箇所を差し替えるHTML
※画像などのデータはお客様のウェブサーバーもしくはDLPOのCDNサーバーにアップロード頂く必要があります。CDNサーバーについては「CDNとは」をご覧ください。
※ABテストを実施する際、Aパターンを既存のLPと同じ内容で表示する場合はHTMLエディターを使用してコメントアウトなど配信がされても表示に影響のない(＝既存の表示がそのままされる)HTMLを登録してください。
■設定手順
HTMLエディターにて登録する場合、下記の手順で設定してください。
1．HTMLソースの入力
「HTMLエディター設定」にHTMLソースを入力してください。
下記の注意事項をご確認の上、LP上のエリアに配信するHTMLソースを入力してください。
初期表示時「HTMLエディター設定」には"<!--Creative-->"が設定されています。このまま登録すると「何も配信しないクリエイティブ」として登録され、当該クリエイティブをキャンペーンに設定した際にディフォルトパターンの効果を計測することが可能になります。
2．登録
クリエイティブの「クリエイティブ名（必須）」「メモ（任意）」「グループ（任意）」「サムネイル（任意）」を設定の上、「登録」ボタンをクリックし、クリエイティブを登録してください。
入力項目の詳細については、標準エディターの設定手順をご覧ください。
■HTMLソース入力時のご注意
・<a>タグのリンク要素についてのご注意
HTML内に<a>タグのリンク要素がある場合、クリエイティブとして配信される際にDLPOがトラッキング用に"t.adlpo.com"というサーバーを経由する処理を行います。<a>タグ内でJavascriptを動作させたり、ページ内へのアンカーリンクやLightbox / Facebox / Thickbox が設定されている場合は、正しく動作しない事がありますので、その際は<a>タグ部分に"noadlpo"という変数を<a noadlpo href="***">のように記載して下さい。(経由処理がされなくなります）ただし、クリエイティブのクリック計測が出来なくなりますので、"nodlpo"を記載した上でクリックを計測する必要がある場合は、計測タイミング「クリック」を選択したCVタグをクリエイティブ内に記載し、CVとしてクリックの計測を行って下さい。
・JavasScriptではコメントアウトは使用しないで下さい
HTML内でJavaScriptを使用する際、その中で<!--**-->や"//"などのコメントアウトを使用するとスクリプトエラーが発生しますので使用しないで下さい。
・サーバーサイドで処理されるソースは使用できません
クリエイティブはLP訪問者のブラウザに直接配信されるため、サーバーサイドで処理がされてから表示をさせる必要があるソース(PHPのコードや、動的にテンプレートを整形したり、データベースから情報を集計して表示するソースなど)はご利用頂けません。
・リダイレクト(スプリットランテスト)を行う際のご注意
LP上の一部分の表示切り替えでなく「既存LP」と「新規LP」でスプリットランテストを行う際は、既存LP用のクリエイティブは「コメントアウト等の表示がされないHTML」、新規LP用のクリイエティブでは「新規LPのURLへリダイレクトをさせるJavaScript」をご準備下さい。リダイレクトのループが発生してしまうため、既存LP用のクリエイティブとして「既存LPのURLへリダイレクトをさせるJavaScript」は使用しないで下さい。
なお、スプリットランテストは「URLリダイレクト」をご利用いただくと簡単に設定できます。
URLリダイレクト
URLリダイレクトは、ページ内のコンテンツを変更するのではなく、異なるページを用意しページごと表示を切り替えるタイプのクリエイティブを登録するエディターです。
予めリダイレクト先となるページを用意しておき、エディターではリダイレクトさせるURLを入力して登録します。
また、リダイレクト先にて実行するスクリプトを設定することができます。
■設定手順
URLリダイレクトにて登録する場合、下記の手順で設定してください。
1．リダイレクト先ページの作成
リダイレクト先のページを作成してください。
2．リダイレクト先URLを設定
1．にて作成したリダイレクト先ページのURLを入力してください。遷移時のクエリパラメーター(URLの「?」以降の値)を引き継ぐ場合は、「現在のクエリパラメーターを含める」チェックボックスにチェックを入れてください。(初期設定ではチェックが入ります)
3．実行スクリプトを設定
リダイレクト先にてスクリプトを実行したい場合は、「リダイレクト先 実行スクリプトを設定する」チェックボックスにチェックを入れて、表示される入力欄に実行スクリプトを設定してください。
※<script>タグは記述しないでください。<script></script>で囲ったJavaScriptを記述すると動作しません。
※JavaScriptでエラーが発生すると、リダイレクト先URLの表示に影響を及ぼすことがございます。必ずプレビューで動作を確認の上、ご利用ください。
4．登録
クリエイティブの「クリエイティブ名(必須)」「メモ(任意)」「グループ(任意)」「サムネイル(任意)」を設定の上、「登録」をクリックしクリエイティブを登録してください。
入力項目の詳細については、標準エディターの設定手順をご覧ください。