クリエイティブ個別登録とは
クリエイティブ個別登録は、キャンペーン作成時に利用するクリエイティブを1つずつ個別に登録するメニューです。
4種類のエディターからいずれかを選択して、必要事項を入力の上、登録してください。
図１：クリエイティブ個別登録
エディターについて
下記4種類の方法で登録します。
表１：エディターの種類
| HTMLエディター | エリアに配信するHTMLソースを直接入力して登録します。 ワンコード実装時にCSSやJavascriptを配信して表示を切り替える場合、ダイレクトコード実装時(エリアタグ設置箇所を直接切り替える場合)にご利用ください。 |
|---|---|
| ワンコード実装用エディター | ワンコードを実装したページ上の表示切替箇所を指定し、書き換えや挿入するHTMLを入力して登録します。 |
| GUIエディター | LPのソースを管理画面に読み込み、表示切替箇所のHTMLを直接編集してHTMLを切り出して登録します。 登録されたクリエイティブの編集はHTMLエディターで行います。 |
| URLリダイレクト | 複数のページを用意し各ページへリダイレクトをさせるURLを入力して登録します。（スプリットランテスト用） リダイレクト先にてスクリプトを実行することも可能です。 |
HTMLエディター
HTMLエディターはLP上のエリアに配信するHTMLソースを直接入力してクリエイティブを登録するためのエディターです。
ワンコード実装時にCSSやJavascriptを配信して表示を切り替える場合、ダイレクトコード実装時(エリアタグ設置箇所を直接切り替える場合)にご利用ください。
■入力ソース例
- ボタンの色や背景色を指定したCSS（色の直接指定や背景画像の指定など)
- 複数のページを用意し各ページへリダイレクトをさせるJavaScript（スプリットランテスト用）
- ページ内のレイアウトを変更するJavaScript
- ダイレクトコード設定時にエリアタグで囲った箇所を差し替えるHTML
※画像などのデータはお客様のウェブサーバーもしくはDLPOのCDNサーバーにアップロード頂く必要があります。CDNサーバーについては「CDNとは」をご覧ください。
※ワンコード実装でABテストを実施する際、Aパターンを既存のLPと同じ内容で表示する場合はHTMLエディターを使用してコメントアウトなど配信がされても表示に影響のない(＝既存の表示がそのままされる)HTMLを登録してください。
■設定手順
HTMLエディターにて登録する場合、下記の手順で設定してください。
1．必須指定項目の入力
「名前」にクリエイティブ名を入力してください。
表２－１：必須指定項目一覧
| 項目名 | 設定内容 |
|---|---|
| 名前 |
クリエイティブの名称を入力してください。 また、レポートで複数のクリエイティブの結果をまとめて集計して表示する機能である「系列の集計」を設定する際に、集計するクリエイティブの絞り込みに使用する事ができます。必要に応じて命名規則を決めて運用してください。 |
2．任意指定項目の入力
必要に応じて、以下項目を設定してください。不要な場合は次のステップへお進みください。
表２－２：任意指定項目一覧
| 項目名 | 設定内容 |
|---|---|
| メモ |
クリエイティブ内容についての説明などを入力してください。
メモはクリエイティブ登録後にクリエイティブグループ一覧上でも入力が可能です。
|
| グループ | クリエイティブをグループに入れて登録/管理する際に設定します。 フォルダアイコンをクリックして登録先グループを選択してください。 ※グループは予め「クリエイティブ設定」のクリエイティブグループ一覧で作成しておく必要があります。 |
| サムネイル |
クリエイティブのキャプチャ画像を選択し登録します。
サムネイル用のキャプチャ画像はChromeでは「ファイル選択」、Fireforxでは「参照...」をクリックして選択してください。 また、サムネイルはクリエイティブの登録後にクリエイティブグループ一覧からも登録が可能です。 |
をクリック、または
3．HTMLソースの入力
「HTMLエディター設定」にHTMLソースを入力してください。
下記の注意事項をご確認の上、LP上のエリアに配信するHTMLソースを入力してください。
初期表示時「HTMLエディター設定」には"<!--Creative-->"が設定されています。このまま登録すると「何も配信しないクリエイティブ」として登録され、当該クリエイティブをキャンペーンに設定した際にディフォルトパターンの効果を計測することが可能になります。
図３：HTMLエディター(初期表示時)
4．登録
「登録」ボタンをクリックし、クリエイティブを登録してください。
■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リダイレクト」をご利用いただくと簡単に設定できます。
ワンコード実装用エディター
ワンコード実装用エディターは、LP上の特定の箇所を指定して、対象箇所の表示を切り替えるタイプのクリエイティブを登録するためのエディターです。
※ワンコード実装でABテストを実施する際、Aパターンを既存のLPと同じ内容で表示する場合はワンコード実装用エディターではなく「HTMLエディター」を使用してコメントアウトなど配信がされても表示に影響のない(＝既存の表示がそのままされる)HTMLを登録してください。
■動作設定イメージ
【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種類あります。
※「2．切り替え方法を選択」にて「JavaScriptを配信」を選択する場合は当該手順は必要ありません。
表３－１：表示切り替え先の指定方法
| 指定方法 | 説明 |
|---|---|
| 簡易指定 | 特定のHTML要素(タグ)、classまたはidにて表示切り替え箇所を指定します。 |
| セレクタ指定 | CSSセレクタ方式にて表示切り替え箇所を指定します。 |
【簡易指定の場合】
指定方法は「簡易指定」を選択してください。
表示されている入力項目にて、表示切り替え箇所のHTML要素(タグ)を下表より選択し、「class」または「id」を選択後、当該class名またはid名をボックスに記入してください。
図４－２：簡易指定（動作設定イメージの指定）
表３－２：表示切り替え先の対象タグ一覧
| 対象HTML要素(タグ) |
<div> |
|---|
【セレクタ指定の場合】
指定方法は「セレクタ指定」を選択してください。
表示されている入力項目に、CSSセレクタ方式にて表示切り替え箇所を記入してください。
図４－３：セレクタ指定（動作設定イメージの指定）
CSSセレクタとはページ内のスタイルを設定する際にHTML要素を選択するための指定方法です。
要素型セレクタ、クラスセレクタ、IDセレクタ、結合子などを用いて、特定のHTML要素を指定することが可能です。詳細は専用サイトをご確認ください。
※CSSセレクタの記述上の制限はありません。
※子孫結合子(スペース区切り)以外の結合子は、前後のスペースを認識しません。入力された内容は自動的に整形されませんので、可読性のためスペースを入れることをお勧めします。
2．切り替え方法を選択
切り替え方法を下記より選択してください。
表３ー３：切り替え方法一覧
| 切り替え方法 | 説明 | |
|---|---|---|
| の中身を書き換える |
指定箇所の中身を「4．HTMLの入力」にて記載するHTMLに書き換えます。
|
|
| の中身の先頭に挿入 |
指定箇所の中身の先頭に「4．HTMLの入力」にて記載するHTMLを挿入します。
|
|
| の中身の末尾に挿入 |
指定箇所の中身の末尾に「4．HTMLの入力」にて記載するHTMLを挿入します。
|
|
| の前に挿入 |
指定箇所の前に「4．HTMLの入力」にて記載するHTMLを挿入します。
|
|
| の後に挿入 |
指定箇所の後ろに「4．HTMLの入力」にて記載するHTMLを挿入します。
|
|
| の前に移動 |
指定箇所の前に「移動対象」にて指定した箇所を移動します。
|
|
| の後に移動 |
指定箇所の後ろに「移動対象」にて指定した箇所を移動します。
|
|
| 入れ替える |
指定した2つの箇所を入れ替えます。
|
|
| JavaScriptを配信 |
「4．HTMLの入力」にて記載するJavaScriptを実行します。 var value = 0; /* 変数に値を設定する */ |
※1：表示切り替え箇所の指定方法により、入力方法は異なります。
3．HTMLの入力
表示するHTMLを入力してください。
※「2．切り替え方法を選択」にて「JavaScriptを配信」を選択した場合は、実行するJavaScriptを入力してください。このとき、<script>タグは記述しないでください。<script></script>で囲ったJavaScriptを記述すると動作しません。
4．要素を追加
1つのクリエイティブでLP上の複数箇所の表示を同時に切り替える場合は「要素を追加」をクリックして、追加された入力項目で設定を行ってください。
5．登録
クリエイティブの「名前（必須）」「メモ（任意）」「グループ（任意）」「サムネイル（任意）」を設定の上、「登録」をクリックしクリエイティブを登録してください。
入力項目の詳細については、HTMLエディターの設定手順をご覧ください。
GUIエディター
GUIエディターは、DLPOの管理画面上に既存のLPを読み込み、直接クリエイティブを編集・登録することができます。
■設定手順
GUIエディターにて登録する場合、下記の手順で設定してください。
1．既存のLPの読み込み
「対象URL」の入力欄に読み込むLPのURLを入力し、「読み込み」ボタンをクリックします。
※URLには暗号化されたページ(「https://」から始まるページ)を指定してください。暗号化されていないページ(「http://」から始まるページ)はサポート対象外となります。
図５－１：GUIエディター
2．クリエイティブの編集
読み込みが完了すると、画面下の枠内にLPが表示されます。
LP上にマウスカーソルを移動すると緑の枠が表示されます。クリックすると、枠に囲まれた部分が選択され、クリエイティブとして編集するためのメニューが表示されます。
※緑の枠が正しく表示されない場合は、LPのhtmlにおいてタグが閉じられていないなど正しく構成されていない可能性があります。htmlの内容を改めてご確認下さい。
図５－２：ページ読み込み後、編集メニュー表示
表４：編集メニュー一覧
| 編集メニュー | 説明 |
|---|---|
| このクリエイティブを登録 | 選択した部分のhtmlが画面下部に追加され、クリエイティブとして登録することができるようになります。 ※その他のメニューで編集を行ったあとに「このクリエイティブを登録」を選択することで、編集した結果をクリエイティブとして登録することができます。 |
| HTMLを編集 | 選択した部分のhtmlが表示されます。編集後に「変更を保存」ボタンをクリックするとその内容が反映され、読み込まれたLPの表示も変わります。 |
| スタイルを編集 | 選択した部分のスタイルシートを編集します。編集後に「変更を保存」ボタンをクリックするとその内容が反映され、読み込まれたLPの表示も変わります。 例）color:red; → color:blue; ※選択した部分のstyle属性の値を直接編集します。 |
| 属性を編集 | 選択した部分の属性の一覧が表示されます。表示された属性を編集・削除したり、新しい属性を追加することができます。編集後に「変更を保存」ボタンをクリックするとその内容が反映され、読み込まれたLPの表示も変わります。 |
| jQueryコードの追加 | 任意のjQueryコードを追加します。 ※テストページでjQueryが読み込まれている必要があります。 |
| 要素を削除 | 選択した部分を削除します。即座に読み込まれたLPの表示も変わります。 ※子要素を削除して、親要素をクリエイティブとして登録したい場合にご利用ください。 |
| ドラッグして移動 | 選択したクリエイティブをドラッグして位置を変更します。 |
| HTMLを挿入 | 選択した部分の前後に任意のhtmlを挿入します。 挿入位置は次のうちから選択することができます。 before → 要素の前に挿入 after → 要素の後に挿入 prepend →要素の末尾に挿入 append → 要素の先頭に挿入 ※テストページでjQueryが読み込まれている必要があります。 |
| 親要素を選択 |
選択している部分の親の要素を選択します。 <img src="a.jpg"></img> |
3．クリエイティブの登録
「2．クリエイティブの編集」にて「このクリエイティブを登録」を選択した部分のhtmlが下部に追加されます。
クリエイティブの「名前(必須)」、「メモ(任意)」、「グループ(任意)」を設定し、登録ボタンをクリックするとこの内容がクリエイティブとして登録されます。
図５－３：GUIエディターの入力項目
4．登録完了
登録が成功すると、サムネイルの登録箇所と「登録しました」のメッセージが表示されます。
サムネイルを登録した場合やクリエイティブ登録内容の修正を行った場合、再度「登録」ボタンをクリックして下さい。
登録に失敗した場合はエラーエラーメッセージが下部に表示されます。
表示されたエラーメッセージの内容にそってクリエイティブ登録内容の修正を行って下さい。
図５－４：GUIエディターの登録ボタン押下後イメージ
URLリダイレクト
URLリダイレクトは、ページ内のコンテンツを変更するのではなく、異なるページを用意しページごと表示を切り替えるタイプのクリエイティブを登録するエディターです。
予めリダイレクト先となるページを用意しておき、エディターではリダイレクトさせるURLを入力して登録します。
また、リダイレクト先にて実行するスクリプトを設定することができます。
■設定手順
URLリダイレクトにて登録する場合、下記の手順で設定してください。
1．リダイレクト先ページの作成
リダイレクト先のページを作成してください。
2．リダイレクト先URLを設定
1．にて作成したリダイレクト先ページのURLを入力してください。遷移時のクエリパラメーター(URLの「?」以降の値)を引き継ぐ場合は、「現在のクエリパラメーターを含める」チェックボックスにチェックを入れてください。(初期設定ではチェックが入ります)
図６ー１：URLリダイレクト（リダイレクト先URL）
3．実行スクリプトを設定
リダイレクト先にてスクリプトを実行したい場合は、「リダイレクト先 実行スクリプトを設定する」チェックボックスにチェックを入れて、表示される入力欄に実行スクリプトを設定してください。
※<script>タグは記述しないでください。<script></script>で囲ったJavaScriptを記述すると動作しません。
※JavaScriptでエラーが発生すると、リダイレクト先URLの表示に影響を及ぼすことがございます。必ずプレビューで動作を確認の上、ご利用ください。
図６ー２：URLリダイレクト（リダイレクト先 実行スクリプトを設定する）
4．登録
クリエイティブの「名前(必須)」「メモ(任意)」「グループ(任意)」「サムネイル(任意)」を設定の上、「登録」をクリックしクリエイティブを登録してください。
入力項目の詳細については、HTMLエディターの設定手順をご覧ください。