Visualキャンペーン作成とは
テキストや画像等の追加・移動・変更をはじめとした様々なABテスト、パーソナライゼーションを視覚的・直感的に作成できるキャンペーン作成機能です。
図１：Visualキャンペーンエディター
下記の施策内容を目的としたキャンペーン設定には現状対応していません。該当する場合はStandardキャンペーン作成をご利用ください。
・多変量テスト
・複数ページを跨いだ高度なテスト
Visualキャンペーン作成の仕組み
Standardキャンペーン作成にてテストを施策するには、「ページ設定」での各種タグの設定/作成、LP/CVページへのタグ設置及びDLPOでのタグ認識、「クリエイティブ設定」での配信クリエイティブの登録、「セグメント設定」でのセグメント登録を完了させる必要がありました。
Visualキャンペーン作成ではこれらのステップをキャンペーン作成と同時に行います。設定手順を踏むことで、「ページ設定」「クリエイティブ設定」「セグメント設定」「キャンペーン作成」までの設定が可能となります。
Visualキャンペーン作成にて新規にエリア、またはコンバージョンポイントを作成する場合、システム内部でエリア、またはコンバージョンの発火条件を作成し、発火ルールの設定を行っています。このため、テスト対象となるページにはDLPOタグの設置が必要となります。設定手順に従い、タグの設置をお願いいたします。
設定手順
1．配信ページ登録
「1.配信ページ登録」画面にて、ABテスト・パーソナライズ実施ページを設定します。
図２ー１：「1.配信ページ登録」画面
(1)キャンペーン名
キャンペーンの名称を入力してください。
(2)エリア設定
新規エリアを作成または既存エリア利用を選択してください。
エリアを新規作成する場合は「新規エリアを作成」を選択し、「条件名」「URL」「マッチング条件」を指定し、必要に応じて「オプション設定」を設定してください。
既存エリアを利用する場合は「既存エリアを利用」を選択し、表示されたエリアグループ一覧より対象のエリアを選択してください。エリア選択後、エリアグループ一覧の上部に表示されている「URL」にエディター編集するページのURLを入力してください。
※既存エリアのマッチング条件が「完全一致」の場合は、エディター編集するページのURLには、既存エリアのURLが自動設定されます。既存エリアのマッチング条件が「完全一致」以外の場合は、当該エリアに該当するページより、編集対象とするページのURLを入力してください。
表１－１：エリア新規作成時の入力項目一覧
| 項目名 | 設定内容 |
|---|---|
| 条件名 | 発火条件の名称を入力してください。 |
| URL | ABテスト・パーソナライズを実施するページを指定してください。 |
| マッチング条件 | 入力したURLを判別させる条件を「部分一致」「前方一致」「完全一致」「正規表現指定」から選択して下さい。 条件判別にURLの”?”マーク以降のパラメータを含めたい場合は「パラメータを含めて」のチェックボックスにチェックを入れて下さい。 |
| 条件合致確認 | 発火条件合致確認ダイアログが表示されます。 「URL」、「マッチング条件」に設定する値が、対象ページに合致するか確認できます。 また、ダイアログにて確認した設定値を登録画面の「URL」、「マッチング条件」それぞれに設定することができます。 |
| URL | エディター編集するページを指定してください。 ※「マッチング条件」にて「部分一致」「前方一致」「正規表現指定」を選択した場合に表示されます。 ※「マッチング条件」が「完全一致」の場合は表示されません。 |
| オプション設定 | オプション設定では以下項目が設定できます。必要に応じて設定してください。 ・文字コード ・IM連携を有効にする ・グローバル変数条件を有効にする ・カスタム設定を有効にする |
| 文字コード | タグを設置するページの文字コードを選択してください。「UTF-8」「Shift-JIS」「EUC-JP」から選択してください。 異なった文字コードを選択すると、配信されたクリエイティブ内のテキストが文字化けすることがありますのでご注意ください。 |
| IM連携を有効にする |
キャンペーンで使用するセグメントで「年齢・性別」「インサイト」を設定する際は、必ず
|
| グローバル変数条件を有効にする | グローバル変数条件を使用する際は、必ず 「入力欄を追加」をクリックするとグローバル変数条件を複数登録することができます。 |
| カスタム設定を有効にする |
キャンペーンで使用するセグメントで「カスタム設定」を設定する際は、必ず ※セグメントがキャンペーンで設定されていても、エリアの条件で「カスタム設定を有効にする」が セグメント「カスタム設定」については「カスタム設定セグメントの設定」をご覧ください。 |
表１－２：エリア新規作成時の入力項目一覧
| 項目名 | 設定内容 |
|---|---|
| Basic認証を有効にする | Basic認証が設定されているページをクリエイティブ編集する際は、必ず |
| Cookieを設定する | ログインを必要とするページをクリエイティブ編集する際は、必ず ※ログイン情報をCookieに保持しているサイトにて利用いただけます ※ご利用サイトでログイン情報をCookieに保持しているか否か、また保持しているCookie情報などは、サイト構築担当者、または御社システム管理者へお問い合わせください ※Cookie情報は複数設定することができます |
■Cookie情報の確認方法（Chrome）
①エディター編集対象ページを開き、次のいずれかの方法でChromeのデベロッパーツールを起動してください。
・右上の縦三点リーダーをクリックし、展開されたメニューより「その他のツール」＞「デベロッパーツール」をクリック
・Windows OS ショートカットキー「F12」または「Ctrl＋Shift＋I」を押下
・Mac OS ショートカットキー「command＋option＋I)」を押下
・ページ上の任意の場所で右クリックし、コンテキストメニューより「検証」をクリック
②デベロッパーツールの「Application」タブを選択し、左ツリーより「Cookies」を展開してください。対象ページのURLを選択すると、対象ページで使用されているCookie情報が一覧表示されます。
一覧より、ログイン情報を保持しているCookieの「Name」「Value」の値を、「Cookie名」「Cookie値」にそれぞれ設定してください。
図２－２：Cookie確認方法
(4)タグ設置
(2)エリア設定にて、エリアを新規作成した場合は、対象ページにDLPOタグを必ず設置してください。
詳細は「ページ設定とは - DLPOタグの設置」をご覧ください。
(5)保存して次へ
設定が完了した後、「保存して次へ」をクリックしてください。
エリアを新規作成する場合は、設定したURL、マッチング条件と一致する発火条件が既に登録されているかを確認します。重複データが存在する場合は、重複チェック結果ダイアログを表示します。ダイアログの内容を確認し、エリアを新規作成する場合は「登録」ボタンを、中断する場合は「キャンセル」ボタンをクリックしてください。
※「保存して次へ」をクリックした際にキャンペーンが作成されます。(エリアを新規作成する場合はエリア登録、発火ルール設定も実施されます)
そのため、以降の操作でキャンセルを行ってもキャンペーン(場合によってエリア、発火ルール設定を含む)は作成された状態となりますので、不要な場合は手動にて対象データを削除してください。
2．クリエイティブ編集
「2.クリエイティブ編集」画面にて、実際のページをプレビューで見ながら、クリエイティブパターン(テストパターン)を作成します。
図３－１：「2.クリエイティブ編集」画面
(1)ターゲティングセグメントを設定し、クリエイティブパターンを設定
キャンペーン作成時、ターゲティングセグメントは「全ての訪問者」となり、「デフォルト」「クリエイティブ1」の2種類のクリエイティブが設定されています。テスト施策によって、ターゲティングセグメント及びクリエイティブパターンを設定してください。
なお、「全ての訪問者」セグメントは、ターゲティングセグメントを指定しないことを意味します。
図３－２：キャンペーン作成時の初期値
ターゲティングセグメントを設定する際は、サイドメニューの「セグメント追加」をクリックし、セグメント一覧から対象のセグメントの選択をONに変更し、「選択したセグメントを設定」をクリックしてください。
セグメント一覧にて対象セグメントを選択せずに、「選択したセグメントを設定」をクリックすると「全ての訪問者」セグメントが設定されます。
また、選択したターゲティングセグメントは、セグメントの縦三点リーダーをクリックし表示されたサブメニューより「セグメント編集」または「削除」することができます。
図３－３：セグメント追加
新規でセグメントを登録する際は、画面右上の「新規セグメント登録」をクリックし、「セグメント名」「セグメント条件」を設定の上、「セグメント登録」をクリックしてください。
「新規セグメント登録」機能は「セグメント個別登録」機能を踏襲しています。設定方法などの詳細は「セグメント個別登録」をご覧ください。
図３－４：セグメント登録
ターゲティングセグメントを複数設定した場合、サイドメニューの表示順がセグメントの「優先順位」となります。優先順位とは、複数のターゲティングセグメントを設定する際に「セグメントの判別条件が重複する可能性がある場合」に優先して判別させるターゲティングセグメントを決定するための順位のことです。優先順位を変更する場合は、セグメント名の右横にある アイコンをドラッグしてください。
下図の場合、「東京」セグメントの表示順を一番上に移動したため、優先順位も「東京」セグメントが「平日」「休日」よりも優先されることになります。
図３－５：ターゲティングセグメントの優先順位
クリエイティブパターンを追加する際は、サイドメニューの「クリエイティブ追加」をクリックします。ビジュアルエディターで編集する場合は「ビジュアルエディターで編集」をクリックしてください。
図３－６：クリエイティブ追加「ビジュアルエディターで編集」
また、既に登録済みクリエイティブを使って編集する場合は、「クリエイティブ一覧から選択」をクリックし、利用するクリエイティブを選択の上で、「選択したクリエイティブを設定」をクリックしてください。
※クリエイティブ一覧から選択したクリエイティブは、ビジュアルエディターでは編集できません。メッセージ「クリエイティブ一覧から選択しているため、ビジュアルエディター上での編集はできません」が表示され、テスト要素の選択、編集などは行えません。
図３－７：クリエイティブ追加「クリエイティブ一覧から選択」
各クリエイティブのサブメニューから作成したクリエイティブをコピー、削除、HTML編集、Visual拡張機能で編集を実施できます。
Visual拡張機能で編集は、Chrome拡張機能を利用したビジュアルエディターによる編集機能になります。詳細は「Visual拡張機能で編集」をご覧ください。
図３－８：クリエイティブのサブメニュー
(2)ビジュアルエディターで編集
選択したクリエイティブパターンを実際に確認しながら、テスト要素を選択し、クリエイティブの追加・編集・移動等の設定を行います。編集対象とする要素は単一、または類似した要素をまとめて指定することが可能です。類似した要素をまとめて編集する場合は「複数要素の一括編集」をご覧ください。
なお、ビジュアルエディターにて編集した内容は変更履歴機能にて確認できます。詳細は「変更履歴について」をご覧ください。
■対象要素の選択（単一）
画面右「ビジュアルエディター」に表示されたページにマウスカーソルを合わせると、テスト要素ごとに青枠が表示されます。青枠が表示された状態でテスト要素をクリックすると、要素が選択状態となり要素編集メニューが表示されます。
図３－９：テスト要素クリック時
また、ビジュアルエディターの下部に表示されるアドレスバーより、テスト要素を選択することも可能です。アドレスバーには、選択状態の要素が青背景の白文字のスタイルで表示されます。選択状態の要素を基準に、対象ページ内の要素が階層構造ごとに表示されます。
テスト要素が選択されていない場合は、ビジュアルエディター内のマウスカーソルが示す要素の構造情報が表示されます。
図３－１０：アドレスバー
アドレスバーにて対象要素をクリックすると、ビジュアルエディター上の要素が選択状態となります。選択状態となった要素の上でクリックすると要素編集メニューが表示されます。
図３－１１：アドレスバーによる要素選択
テスト要素を選択状態にすると、解除するまで青枠が表示されます。また、青枠の左上には対象要素の種別、idもしくはclassの名称と×ボタンが表示されます。
選択状態を解除するには、×ボタンをクリックしてください。
なお、選択状態のまま、他のテスト要素を選択した場合は、選択状態が新たに操作した要素に移ります。
図３－１２：テスト要素の選択状態
■要素の編集
要素編集メニューは、ビジュアルエディターにてテスト要素をクリックした際、または選択状態となったテスト要素をクリックした際に表示されます。
要素編集メニューを閉じるには、メニューの「閉じる」をクリックしてください。
図３－１３：要素編集メニュー
表２－１：要素編集
| メニュー | 説明 |
|---|---|
| 編集 | 選択したテスト要素を変更する場合に使用します。 要素編集メニューより「編集」をクリックし、変更タイプを選択してください。変更タイプにより編集画面が表示されますので、内容を変更し登録してください。 【変更タイプ】 ・HTML ・テキスト ※選択要素のコンテンツがテキストの場合、選択可能 ・スタイル ※選択要素のコンテンツがテキストの場合、選択可能 ・画像（CDN画像） ※選択要素のコンテンツが画像の場合、選択可能 ・画像（画像URL） ※選択要素のコンテンツが画像の場合、選択可能 |
| 挿入 | 選択したテスト要素に対し、新たなテスト要素を挿入する場合に使用します。 要素編集メニューより「挿入」をクリックし、変更タイプを選択してください。変更タイプを選択後、挿入位置を選択してください。その後、変更タイプにより編集画面が表示されますので、新たなテスト要素を登録してください。指定した挿入位置にテスト要素が追加されます。 【変更タイプ】 ・HTML ・画像（CDN画像） ・画像（画像URL） 【挿入位置】 ・要素の直前に挿入 ・要素の直後に挿入 ・要素内の冒頭に挿入 ・要素内の末尾に挿入 |
| 移動 | 選択したテスト要素をページ内の別の位置に移動する場合に使用します。 要素編集メニューより「移動」をクリックしてください。これにより、選択したテスト要素が移動可能な状態となります。移動可能な状態となったテスト要素を、適切な位置へドラッグ＆ドロップしてください。ドロップした際には、移動処理確定用の画面が表示されます。 移動を確定する場合には「要素移動」ボタンをクリックしてください。一方で「キャンセル」ボタンをクリックすると、移動操作は無効となります。 また、編集対象の要素にidもしくはclass属性が設定されていない場合は、「順番の識別にnth-of-typeを使用」を選択して「要素移動」ボタンをクリックしてください。この設定により、要素指定時にCSSの擬似クラス「nth-of-type」を利用します。これは、サイト構成により要素の構造が動的に変更され、CSSの擬似クラス「nth-child」では正しく対象要素を指定できない場合に有効です。 さらに、移動には2つの方法が指定できます。詳細は「移動の設定」をご覧ください。 |
| 削除 | 選択したテスト要素を削除する場合に使用します。 要素編集メニューより「削除」をクリックしてください。選択したテスト要素が削除されます。 ※編集対象の要素にidもしくはclass属性が設定されていない場合は、要素指定時にCSSの擬似クラス「nth-child」を利用します。 |
| コピー | 選択したテスト要素をコピーする場合に使用します。 要素編集メニューより「コピー」をクリックしてください。その後「ペースト」した位置にコピーした要素が追加されます。 ※編集対象の要素にidもしくはclass属性が設定されていない場合は、要素指定時にCSSの擬似クラス「nth-child」を利用します。 |
| ペースト | コピーしたテスト要素を貼り付ける場合に使用します。 ※テスト要素がコピーされている場合に表示されます。 要素編集メニューより「ペースト」をクリックし、ペースト位置を選択してください。指定したペースト位置にコピーした要素が追加されます。 【ペースト位置】 ・要素の直前にペースト ・要素の直後にペースト ・要素内の冒頭にペースト ・要素内の末尾にペースト |
| 親要素を選択 |
HTMLでは要素同士が階層構造となっており、選択したテスト要素の上の階層にある要素（親要素）を選択する場合に使用します。 要素編集メニューより「親要素を選択」をクリックしてください。選択したテスト要素に対する親要素が表示されますので、対象の要素を選択してください。ビジュアルエディター上の選択要素が変更され、要素編集メニューの内容も切り替わります。 |
| 子要素を選択 |
HTMLでは要素同士が階層構造となっており、選択したテスト要素の下の階層にある要素（子要素）を選択する場合に使用します。 要素編集メニューより「子要素を選択」をクリックしてください。選択したテスト要素に対する子要素が表示されますので、対象の要素を選択してください。ビジュアルエディター上の選択要素が変更され、要素編集メニューの内容も切り替わります。 |
| クリック計測 | 選択したテスト要素に対し、クリック計測のコンバージョンポイントを追加する場合に使用します。 登録画面にて、クリック計測のコンバージョンポイント登録に必要な情報を設定し登録してください。 ・計測ラベル（コンバージョンポイント名）：コンバージョンポイント名を設定してください。 ・計測範囲：「全クリエイティブ」または追加対象のクリエイティブを選択してください。 ※コンバージョンポイント名には、判別しやすい名称を設定することをお勧めします。コンバージョンポイント名は、半角英数字、または「_」（アンダーバー）にて設定してください。なお、大文字小文字は区別されません。 |
| 閉じる | 要素編集メニューを閉じます。 |
【変更タイプ】
・HTML
新しいHTMLへの置換やHTMLの挿入を行う際に使用します。HTMLを編集し、「HTML登録」ボタンをクリックしてください。
HTML入力欄の下には、編集方法を選択するプルダウンが表示されます。要素編集メニューで選択した内容に応じて、デフォルト値が切り替わります。編集方法を変更したい場合は、当該画面のプルダウンから選択してください。
対象要素には、ビジュアルエディターで選択した要素のCSSセレクタが表示されます。必要に応じて編集が可能です。また、編集対象の要素にidもしくはclass属性が設定されていない場合は、「順番の識別にnth-of-typeを使用」を選択して登録すると、要素指定時にCSSの擬似クラス「nth-of-type」を利用します。これは、サイト構成によって要素の構造が動的に変更し、CSSの擬似クラス「nth-child」では正しく対象要素を指定できない場合に有効です。
実行方法は、編集内容を反映するタイミングを設定できます。デフォルトは「DOM Ready」です。実行方法の詳細は「実行方法について」をご覧ください。
図３－１４：HTML編集画面
・テキスト
インラインテキスト編集を行う場合に使用します。テキストを編集し、「テキスト登録」をクリックしてください。
対象要素には、ビジュアルエディターで選択した要素のCSSセレクタが表示されます。必要に応じて編集が可能です。また、編集対象の要素にidもしくはclass属性が設定されていない場合は、「順番の識別にnth-of-typeを使用」を選択して登録すると、要素指定時にCSSの擬似クラス「nth-of-type」を利用します。これは、サイト構成によって要素の構造が動的に変更し、CSSの擬似クラス「nth-child」では正しく対象要素を指定できない場合に有効です。
実行方法は、編集内容を反映するタイミングを設定できます。デフォルトは「DOM Ready」です。実行方法の詳細は「実行方法について」をご覧ください。
※サイト構成によっては、当該編集を行うことでレイアウトが崩れる場合があります。レイアウトが崩れる場合は、HTML編集をご利用ください。
図３－１５：テキスト編集画面
・スタイル
要素のサイズと位置を含むスタイル属性の変更を行う場合に使用します。
スタイルはCSSルールに基づいて設定可能です。編集画面を表示すると、各値は「デフォルト」が選択されています。値を変更する場合は、スタイルごとの入力欄に値を入力し、対応するラジオボタンを選択してください。対象のスタイルを変更後、「スタイル登録」をクリックしてください。
対象要素には、ビジュアルエディターで選択した要素のCSSセレクタが表示されます。必要に応じて編集が可能です。また、編集対象の要素にidもしくはclass属性が設定されていない場合は、「順番の識別にnth-of-typeを使用」を選択して登録すると、要素指定時にCSSの擬似クラス「nth-of-type」を利用します。これは、サイト構成によって要素の構造が動的に変更し、CSSの擬似クラス「nth-child」では正しく対象要素を指定できない場合に有効です。
実行方法は、編集内容を反映するタイミングを設定できます。デフォルトは「DOM Ready」です。実行方法の詳細は「実行方法について」をご覧ください。
図３－１６：スタイル編集画面（一部抜粋）
表２－２：スタイル一覧
| スタイル名 | 説明 |
|---|---|
| 文字の色 | 文字の色(color)を設定してください。 |
| 文字の大きさ | 文字の大きさ(font-size)を設定してください。 |
| 文字の太さ | 文字の太さ(font-weight)を選択してください。 【文字の太さ】 ・normal：標準の太さ ・bold：一般的な太字の太さ ・lighter：相対的に一段階細くします ・bolder：相対的に一段階太くします |
| 文字のフォント | 文字のフォント(font-family)を指定してください。 カンマ区切りで複数のフォントを指定できます。複数指定された場合は、左側から優先されます。 |
| 文字の装飾 | 文字の装飾(text-decoration)を選択してください。 【文字の装飾】 ・none：装飾なし ・underline：テキストに下線を引く ・overline：テキストに上線を引く ・line-through：テキストに取り消し線を引く |
| 背景色 | 背景色(background-color)を設定してください。 |
| 背景画像 | 背景画像(background-image)を設定してください。画像ファイルのURLを設定してください。 |
| 背景画像の繰り返し | 背景画像の繰り返し方法(background-repeat)を選択してください。 【背景画像の繰り返し】 ・repeat：縦横に背景画像を繰り返して表示します ・repeat-x：横方向にのみ背景画像を繰り返して表示します ・repeat-y：縦方向にのみ背景画像を繰り返して表示します ・no-repeat：背景画像を一回だけ表示して繰り返しません ・space：縦横に背景画像を繰り返して表示しますが、表示領域により画像同士の間に余白が設定されます。 ・round：縦横に背景画像を繰り返して表示しますが、表示領域により画像が伸縮します。 |
| 大きさ | 要素の幅(width)、高さ(height)を設定してください。 |
| 位置 | 要素の配置方法(position)、表示位置(left、right、top、bottom)を設定してください。 「position」では配置方法を選択してください。 【配置方法】 ・static：配置方法を指定しません。 ・relative：相対位置への配置となります。 ・absolute：絶対位置への配置となります。 ・fixed：絶対位置への配置となり、スクロールしても位置が固定されたままとなります。 「position」にて「static」以外を選択した場合は、表示位置「left」「right」「top」「bottom」を設定してください。 |
| マージン | 要素の外側の余白サイズ(margin)を設定してください。 上下左右を異なったサイズにしたい場合は、スペースで区切って複数の値を設定してください。 |
| パディング | 要素の内側の余白サイズ(padding)を設定してください。 上下左右を異なったサイズにしたい場合は、スペースで区切って複数の値を設定してください。 |
| 行揃え | 要素内の行の揃え位置、均等割付(text-align)を選択してください。 【行揃え】 ・left：左端に揃えられます。 ・right：右端に揃えられます。 ・center：中央に配置されます。 ・justify：均等割付されます。 |
| 行の高さ | 要素内の行の高さ(line-height)を設定してください。 |
| 単語の間隔 | 単語の間隔(word-spacing)を設定してください。 |
| スペース/タブ/改行の表示 | 要素内のホワイトスペース(連続する半角スペース・タブ)、改行の表示方法(white-space)を選択してください。 【スペース/タブ/改行の表示】 ・normal：ホワイトスペースは無視します。改行は1つの半角スペースとして表示します。要素の大きさが指定されている場合はサイズに合わせて自動改行します。 ・nowrap：ホワイトスペースは無視します。改行は1つの半角スペースとして表示します。要素の大きさが指定されている場合でも自動改行しません。 ・pre：ホワイトスペース、改行はそのまま表示します。要素の大きさが指定されている場合でも自動改行しません。 ・pre-wrap：ホワイトスペース、改行はそのまま表示します。要素の大きさが指定されている場合はサイズに合わせて自動改行します。 ・pre-line：ホワイトスペースは無視します。改行はそのまま表示します。要素の大きさが指定されている場合はサイズに合わせて自動改行します。 |
| 枠線の色 | 枠線の色(border-color)を設定してください。 |
| 枠線の太さ | 枠線の太さ(border-width)を設定してください。 上下左右を異なった太さにしたい場合は、スペースで区切って複数の値を設定してください。 |
| 枠線のスタイル | 枠線のスタイル(border-style)を選択してください。 【枠線のスタイル】 ・none：枠線は表示されず、枠線の太さも0になります。他の要素が重なるときは他の要素の設定が優先されます。 ・solid：1本線で表示されます。 ・dotted：点線で表示されます。 ・dashed：破線で表示されます。 ・hidden：枠線は表示されず、枠線の太さも0になります。他の要素が重なるときはこの設定が優先されます。 ・double：2本線で表示されます。 ・groove：くぼんだように見える線で表示されます。 ・ridge：出っ張ったように見える線で表示されます。 ・inset：要素が埋め込まれて見える線で表示されます。 ・outset：要素が出っ張って見える線で表示されます。 |
| 角丸の設定 | 要素の角丸(border-radius)を設定してください。 上下左右の4つ角を異なった角丸にしたい場合は、スペースで区切って複数の値を設定してください。 |
| 縦方向の揃え位置 | 要素内の行の中でテキストなど縦方向の揃え位置(vertical-align)を選択してください。 【縦方向の揃え位置】 ・middle：中央揃え ・top：上端揃え ・bottom：下端揃え ・baseline：要素のベースラインを親要素のベースラインに揃える ・sub：下付き文字 ・super：上付き文字 ・text-top：テキストの上端揃え ・text-bottom：テキストの下端揃え |
| 回り込み | 要素の回り込み(float)を選択してください。 【回り込み】 ・left：要素を左に寄せます。後に続く内容はその右側に回り込みます。 ・right：要素を右に寄せます。後に続く内容はその左側に回り込みます。 ・none：配置を指定しません。 |
| オーバーフロー | 要素内に内容が収まらない場合にはみ出た部分の表示方法(overflow)を選択してください。 【オーバーフロー】 ・visible：収まらない部分ははみ出して表示されます。 ・hidden：収まらない部分は非表示になります。スクロールバーなどは表示されません。 ・scroll：収まらない部分ははみ出しません。スクロールバーなどが表示され、スクロールすることで表示されます。 |
| 透明度 | 要素の透明度(opacity)を選択してください。 【透明度】 0.1：ほぼ透明 ｜ 1.0：完全に不透明 |
| z-index | 重なりの順序を整数で指定してください。0を基準として、値が大きいものほど上に表示されます。初期値は「auto」(=親要素と同じ階層)です。この値は位置にて「static」以外の値が設定されている場合に適用されます。 |
※CSSの詳しい設定方法は専門サイトをご覧ください。
・画像（CDN画像）
画像編集および挿入を行う場合に使用します。CDN上にアップロードした画像が表示されます。使用したい画像の「この画像に変更」をクリックすると、当該画像が指定した位置に表示されます。
また、画像右上に表示されたごみ箱アイコンのクリックにより、CDN上にアップロードした画像を削除できます。さらに、 アイコンをクリック、または「名前」をダブルクリックすることで、画像の「名前」を変更することができます。
対象要素には、ビジュアルエディターで選択した要素のCSSセレクタが表示されます。必要に応じて編集が可能です。また、編集対象の要素にidもしくはclass属性が設定されていない場合は、「順番の識別にnth-of-typeを使用」を選択して登録すると、要素指定時にCSSの擬似クラス「nth-of-type」を利用します。これは、サイト構成によって要素の構造が動的に変更し、CSSの擬似クラス「nth-child」では正しく対象要素を指定できない場合に有効です。
図３－１７：画像を変更（CDN画像選択）（一部抜粋）
「新規画像登録」をクリックし、新規画像登録画面よりCDN上に新たな画像をアップロードすることもできます。「名前（必須）」「メモ（任意）」を入力し、「画像」にてアップロードしたいファイルををファイル選択した後、「画像登録」をクリックしてください。
※登録できる画像形式はJPEG(.jpg、.jpeg)、GIF(.gif)、PNG(.png)、SVG(.svg)、WebP(.webp)です。
図３－１８：新規画像登録
・画像（URL）
画像編集や挿入を行う場合に使用します。ウェブサーバーにアップロードされた画像を利用する場合は、画像のURLを入力し「画像登録」をクリックしてください。当該画像が指定した位置に表示されます。
対象要素には、ビジュアルエディターで選択した要素のCSSセレクタが表示されます。必要に応じて編集が可能です。また、編集対象の要素にidもしくはclass属性が設定されていない場合は、「順番の識別にnth-of-typeを使用」を選択して登録すると、要素指定時にCSSの擬似クラス「nth-of-type」を利用します。これは、サイト構成によって要素の構造が動的に変更し、CSSの擬似クラス「nth-child」では正しく対象要素を指定できない場合に有効です。
図３－１９：画像を変更（画像URL指定）
・クリック計測
クリック計測のコンバージョンポイントを追加する場合に使用します。計測ラベル（コンバージョンポイント名）、計測範囲を設定し、「登録」をクリックしてください。計測範囲で指定したクリエイティブに対し、クリック計測用のコンバージョンポイント生成スクリプトを追加します。追加したクリック計測は、全体編集メニュー > イベント計測より確認、編集、削除が可能です。
編集対象の要素にidもしくはclass属性が設定されていない場合は、「順番の識別にnth-of-typeを使用」を選択して登録すると、要素指定時にCSSの擬似クラス「nth-of-type」を利用します。これは、サイト構成により要素の構造が動的に変更され、CSSの擬似クラス「nth-child」では正しく対象要素を指定できない場合に有効です。
※コンバージョンポイント名には、判別しやすい名称を設定することをお勧めします。コンバージョンポイント名は、半角英数字、または「_」（アンダーバー）にて設定してください。なお、大文字小文字は区別されません。
図３－２０：クリック計測
■実行方法について
編集内容を反映するタイミングを選択できます。デフォルトは「DOM Ready」です。
| 選択肢 | 反映タイミング | 説明 |
|---|---|---|
| DOM Ready | ページの「骨組み（DOM）」ができた時点で発火（=DOMContentLoaded） | 通常の反映タイミングです。 ページのHTML文書を読み込み、構文解析され、すべての遅延スクリプトが実行された後に対象要素を書き換えます。 画像、iframeなどのサブフレーム、非同期スクリプトの読み込み完了は待ちません。 |
| window.loadイベントで書き換える | window.loadイベント発火時 | ページ全体の読み込み完了後に対象要素を書き換えます。静的ページや要素構造が変化しないケースに適していますが、表示までにタイムラグが発生する場合があります。 |
| 遅延適用 | MutationObserverによる一度限りの監視 | ページ読み込み後に、ページ全体の子要素の追加・削除を監視します。 DOM変化が発生すると、セレクタで指定した要素がページ内に存在する場合に、指定した内容で書き換え処理を行います。 書き換え処理が完了すると、監視は自動的に終了します。 SPAやAjaxで要素が動的に生成されるケースに有効です。 |
| 遅延適用（常時監視） | MutationObserverによる継続的な監視 | ページ読み込み後に、ページ全体の子要素の追加・削除を監視します。 DOM変化が発生すると、セレクタで指定した要素がページ内に存在する場合に、指定した内容で書き換え処理を行います。 書き換え処理が完了しても、監視は継続されます。 SPAやAjaxで要素が動的に生成されるケースに有効です。 |
【複数要素設定時の注意点】
反映タイミングは、要素の編集単位で設定可能です。複数の要素を編集する場合、それぞれで異なる反映タイミングを選択できますが、以下の点にご留意ください。
▼「window.loadイベントで書き換える」が複数存在する場合
複数登録可能ですが、処理は順番に呼び出されます。同一要素に対して複数の書き換え処理を設定すると、最後に実行された処理が反映されます。
▼ 「遅延適用」「遅延適用（常時監視）」が複数存在する場合
同一要素に対して、複数の「遅延適用」または「遅延適用（常時監視）」設定は行わないようご注意ください。
「遅延適用」、「遅延適用（常時監視）」は、ページ全体の子要素の追加・削除を監視しています。
複数の設定が存在すると、同じDOM変化に対してそれぞれのコールバック（＝置き換え処理）が発生します。その際に、同一要素を指定していると、意図しない上書きやパフォーマンス低下の原因となるため、複数要素に対して該当タイミングを設定する場合は、セレクタの重複にお気を付けください。
▼ 混在利用時の考慮点
一部の要素に「DOM Ready」（デフォルト値）、別の要素に「遅延適用」など、異なる反映タイミングを混在させることは可能です。
ただし、同じ要素に複数の反映タイミングを設定すると処理が二重に走る可能性があるため、要素ごとに使用するタイミングを明確に分け設定してください。
■全体編集メニュー
また、ページ上部にページ全体に係る編集メニューを表示しています。編集内容によりご利用ください。
図３－２１：全体編集メニュー
表２－４：全体編集
| メニュー | 説明 |
|---|---|
| 元に戻す | 直前の編集を元に戻します。繰り返すとディフォルトの状態まで戻すことができます。 |
| やり直す | 元に戻した編集をやり直します。 |
| ○件変更 | 当該クリエイティブの変更件数が表示されます。 クリックすると、画面右側に変更履歴のパネルが表示され、変更内容が一覧表示されます。詳細は「変更履歴について」をご覧ください。 |
| イベント計測 | クリック計測の一覧を表示します。追加されたクリック計測の編集、削除が可能です。 |
| URLにリダイレクト | ページ全体のデザイン・UIをスプリットランテストする場合に使用します。各パターンのHTMLを準備し、URLにリダイレクトさせる形で実装します。詳細は下記をご覧ください。 |
| タグを追加 | ページ内にスクリプトやスタイルを追加する場合に使用します。詳細は下記をご覧ください。 【追加可能なタグ】 ・CSS ・JavaScript ・外部スクリプト |
| 移動の設定 | 要素編集メニュー「移動」をクリックした際に、要素を移動させる方法を設定します。詳細は下記をご覧ください。 |
| エディタの設定 | Visualエディタに対象ページを表示するために一時的に適用される「デフォルトCSS」を登録できます。詳細は下記をご覧ください。 ※デフォルトCSSに設定された内容はキャンペーン稼働時には反映されません。 |
【詳細】
・イベント計測
要素編集メニュー「クリック計測」にて追加されたクリック計測イベントを一覧表示します。一覧より、対象クリック計測の編集、または削除が可能です。
図３－２２：イベント計測
・URLにリダイレクト
予めリダイレクト先となるページを用意しておき、「URLにリダイレクト」に当該ページのURLを設定し「登録」をクリックしてください。
遷移時のクエリパラメーター(URLの「?」以降の値)を引き継ぐ場合は、「現在のクエリパラメーターを含める」チェックボックスにチェックを入れてください。(初期設定ではチェックが入ります)
図３－２３：URLにリダイレクト
・タグを追加
「タグを追加」をクリックすると、サブメニューが表示されます。追加したいタグの種類を選択してください。
図３－２４：「タグを追加」のサブメニュー
【追加可能なタグ】
◆ CSS
スタイルタグのソースコードが表示されます。スタイルタグを追加または編集し、「登録」または「更新」をクリックしてください。
※変更履歴機能の追加に伴い、編集メニューの「タグを追加」から設定した場合は、新規追加として扱われます。すでに設定済みのスタイルタグを編集する場合は、変更履歴から操作してください。詳細は「変更履歴について」をご覧ください。
図３－２５：タグを追加 > CSS
◆ JavaScript
JavaScriptのソースコードが表示されます。コードを追加または編集し、「登録」または「更新」をクリックしてください。
※変更履歴機能の追加に伴い、編集メニューの「タグを追加」から設定した場合は、新規追加として扱われます。すでに設定済みのJavaScriptを編集する場合は、変更履歴から操作してください。詳細は「変更履歴について」をご覧ください。
図３－２６：タグを追加 > JavaScript
◆ 外部スクリプト
外部スクリプトのファイルパス入力欄が表示されます。ファイルパスを追加または編集し、「登録」または「更新」をクリックしてください。
複数のファイルを指定する場合は、「[+] 入力欄を追加」をクリックして追加してください。
※変更履歴機能の追加に伴い、編集メニューの「タグを追加」から設定した場合は、新規追加として扱われます。すでに設定済みの外部スクリプトを編集する場合は、変更履歴から操作してください。詳細は「変更履歴について」をご覧ください。
図３－２７：タグを追加 > 外部スクリプト
・移動の設定
要素メニュー「移動」を指定した際の移動方法の設定が表示されます。初期状態では「並び替え - 移動後の階層を自動調整する」が有効になっています。移動方法を変更する場合は、「移動の設定」をクリックしてください。
※この設定は、編集画面を開いている間のみ有効です。表示している間は適用されますが、編集画面を表示し直すとクリアされます（デフォルトの状態になります）のでご注意ください。
図３－２８：移動の設定
【移動方法】
◆並び替え
他の要素の前後、または他の要素内の先頭または末尾へ移動できます。並び替えでは、次のオプションを利用できます。
・移動後の階層を自動調整する
・兄弟要素として挿入
移動後の階層を自動調整する（チェックありの場合）
ドラッグ中に、移動元に対して適切な移動先を自動で判別します。
エディタは正しい要素単位を選択し、編集画面内で整合性のある並び替えを行います。
例）リスト内の項目を選択し移動する場合
→選択されたリスト項目 <li>は、リスト要素<ul>内でのみ移動できるようになります。
移動後の階層を自動調整する（チェックなしの場合）
自動調整は行われず、選択した要素をそのまま移動できます。
例）リスト内の項目を選択し移動する場合
→選択されたリスト項目<li>は、リスト要素<ul>外へ移動することが可能になります。
兄弟要素として挿入
移動先の兄弟要素として挿入するか、子要素として挿入するかを切り替える設定です。「移動先の階層を自動調整する」がチェックなしの場合に設定可能です。
・チェックあり：移動先の兄弟要素として挿入
・チェックなし：移動先の子要素として挿入
◆自由に移動
他の要素との関係に制限されず、ページ上の任意の位置へ移動できます。
この場合、移動対象要素の位置関連のスタイル(左、上、位置など)が変更されます。そのため、DOM上の構成は移動前のままですが、見た目上は新しい位置に移動したように表示されます。通常、他の要素のレイアウトには影響しません。
・エディタの設定
Visualエディタに対象ページを表示するために一時的に適用される「デフォルトCSS」を登録できます。例えば、モーダルコンテンツが表示されるページを編集する際に、モーダルコンテンツを非表示にするスタイルシートを追加することで、対象ページの編集が可能となります。この設定は、キャンペーン内のすべてのクリエイティブに適用されます。
※デフォルトCSSに設定された内容はキャンペーン稼働時には反映されません。
※Visualキャンペーンのプレビュー機能では、各クリエイティブを表示する際に適用されます。なお、「プレビューURLをダウンロード」より取得したURLを表示する場合は、当設定は適用されません。
図３－２９：エディタの設定
■複数要素の一括編集
Visualエディターでは、一括編集機能により、類似する複数要素を一度に編集することも可能です。
アドレスバーの左端に表示されている 要素の選択アイコンをクリックしてください。
要素の選択では、CSSセレクタ形式にて対象要素の指定が可能です。アイコンクリック時にVisualエディター上で要素が選択されている場合は、当該要素が指定された状態で表示されます。「要素IDを使用」「要素クラスを使用」にて指定された要素の表示形式を変更できます。
図３－３０：要素の選択
「要素セレクタ」に対象要素のID、クラス名を指定してください。カンマ区切りによる複数要素の指定も可能です。対象の要素を指定したら、「変更の追加」をクリックし、表示メニューより変更内容を選択してください。
図３－３１：一括編集メニュー
表２－５：一括編集
| メニュー | 説明 |
|---|---|
| テキスト | 選択した要素のテキスト部分を変更する場合に使用します。 テキストの編集画面にて、テキスト、編集方法を指定して、変更内容を登録してください。 【編集方法】 ・置換：既存のテキストを置き換えます。 ・要素内の先頭に挿入：新しいテキストを指定要素内の先頭に挿入します。 ・要素内の末尾に挿入：新しいテキストを指定要素内の末尾に挿入します。 ・前に挿入：新しいテキストを指定要素の前に挿入します。 ・後に挿入：新しいテキストを指定要素の後に挿入します。 ※指定要素配下に含まれるテキストが変更可能です。スタイル指定のため、子要素として設定されているテキストも含まれるため、「置換」をご利用の際はスタイルが変更される可能性があることにご注意ください。 ※画像など対象要素にテキストが含まれない場合は、指定可能な編集方法が異なります。 |
| HTML | 選択した要素のHTMLを変更する場合に使用します。 HTMLの編集画面にて、HTML、編集方法を指定して、変更内容を登録してください。 【編集方法】 ・置換：既存のHTMLを置き換えます。 ・要素内の先頭に挿入：新しいHTMLを指定要素内の先頭に挿入します。 ・要素内の末尾に挿入：新しいHTMLを指定要素内の末尾に挿入します。 ・前に挿入：新しいHTMLを指定要素の前に挿入します。 ・後に挿入：新しいHTMLを指定要素の後に挿入します。 |
| 属性 | 選択した要素の属性を変更する場合に使用します。 属性の編集画面にて、属性、値を指定して、変更内容を登録してください。 属性を指定した際、対象要素に既に設定されている場合はその値が表示されます。新たな属性を追加することも可能です。 |
| スタイル | 選択した要素のスタイルを変更する場合に使用します。 スタイルの編集画面にて、スタイルの属性、値、条件式(メディアクエリ)、編集方法、最優先で適用を指定して、変更内容を登録してください。 スタイルの属性を指定した際、対象要素に既に設定されている場合はその値が表示されます。新たな属性を追加することも可能です。 【編集方法】 ・CSSルールを追加：指定した内容をCSSルールとして設定します。 ・要素のスタイルを変更：要素のスタイルとして設定します。 ※条件式(メディアクエリ)は、編集方法「CSSルールを追加」を指定時に利用できます。 ※最優先で適用にチェックが付いている場合は、ルール上書きのため「!important」を付与します。 |
| 並び替え |
選択した要素を並び替える場合に使用します。 ターゲット要素セレクタに複数要素を指定することができます。対象要素、ターゲット要素の指定状態により、並び替えの条件が異なります。 ※対象要素とターゲット要素が同じ要素の場合は登録できません。 |
| JavaScript | 選択した要素に対し、JavaScriptを実行する場合に使用します。 JavaScriptの追加画面にて、JavaScript、実行オプション(追加位置)を指定して、変更内容を登録してください。 【実行オプション】 ・開始タグの後：対象要素の開始タグの後に追加されます。 ・終了タグの後：対象要素の終了タグの後に追加されます。 |
| クリック計測 | 選択した要素に対し、クリック計測のコンバージョンポイントを追加する場合に使用します。 登録画面にて、クリック計測のコンバージョンポイント登録に必要な情報を設定し登録してください。 ・計測ラベル（コンバージョンポイント名）：コンバージョンポイント名を設定してください。 ・計測範囲：「全クリエイティブ」または追加対象のクリエイティブを選択してください。 ※コンバージョンポイント名には、判別しやすい名称を設定することをお勧めします。コンバージョンポイント名は、半角英数字、または「_」（アンダーバー）にて設定してください。なお、大文字小文字は区別されません。 |
【各編集画面】
・テキストの編集
インラインテキスト編集、挿入を行う場合に使用します。
テキストを編集、編集方法を指定し「テキスト登録」をクリックしてください。
図３－３２：テキストの編集
・HTMLの編集
新しいHTMLに置換、挿入する場合に使用します。
HTMLを編集、編集方法を指定し「HTML登録」ボタンをクリックしてください。
図３－３３：HTMLの編集
・属性の編集
対象要素の属性を編集する場合に使用します。
属性、値を指定し「属性登録」ボタンをクリックしてください。
図３－３４：属性の編集
・スタイルの編集
対象要素のスタイル属性を編集する場合に使用します。
スタイル属性、値、条件式(メディアクエリ)（任意）、編集方法、最優先で適用（チェックボックス）を指定し「スタイル登録」ボタンをクリックしてください。
図３－３５：スタイルの編集
・並び替えの編集
対象要素を並び替える場合に使用します。
ターゲット要素セレクタ、移動方法を指定し「移動」ボタンをクリックしてください。
図３－３６：並び替えの編集
・JavaScriptの追加
対象要素に対しJavaScriptを追加する場合に使用します。
JavaScript、実行オプション（追加位置）を指定し「JSタグ登録」ボタンをクリックしてください。
図３－３７：JavaScriptの追加
・クリック計測
対象要素に対し、クリック計測のコンバージョンポイントを追加する場合に使用します。
計測ラベル（コンバージョンポイント名）、計測範囲を設定し、「登録」をクリックしてください。計測範囲で指定したクリエイティブに対し、クリック計測用のコンバージョンポイント生成スクリプトを追加します。追加したクリック計測は、全体編集メニュー > イベント計測より確認、編集、削除が可能です。
※コンバージョンポイント名には、判別しやすい名称を設定することをお勧めします。コンバージョンポイント名は、半角英数字、または「_」（アンダーバー）にて設定してください。なお、大文字小文字は区別されません。
図３－３８：クリック計測
■Visual拡張機能で編集
Chrome拡張機能を利用した、ビジュアルエディターで編集することができます。
予め、Chromeウェブストアの拡張機能「DLPO」をインストール頂き、対象クリエイティブのサブメニューより「Visual拡張機能で編集」をクリックしてください。
対象クリエイティブが別タブで表示され、ビジュアルエディターでの編集が可能となります。
DLPO管理画面内のビジュアルエディターでは編集できなかった、以下サイトにてご活用いただけます。
- CORS設定によるセキュリティ制限が施されたサイト
- サイト内のログイン機能やポップアップ/バナー表示機能などにより、対象ページを表示する際に何かしらの操作が必要になるサイト
図３－３９：Chrome拡張機能のビジュアルエディター
Chrome拡張機能のビジュアルエディターは、DLPO管理画面内のビジュアルエディターと同等の機能を提供しておりますが、一部変更点がございます。
| 機能 | DLPO管理画面 | Chrome拡張 | 説明 |
|---|---|---|---|
| URLにリダイレクト | ○ |
× |
ページ全体のデザイン・UIをスプリットランテストする場合に使用する「URLにリダイレクト」はChrome拡張機能で提供しておりません。引き続きDLPO管理画面より設定してください。 詳細は「URLにリダイレクト」をご覧ください。 |
| モード設定 | × |
○ |
モード設定にて「編集モード」「操作モード」を切り替えることが可能になりました。 詳細は「モード設定」をご覧ください。 |
| 複数要素の一括編集 | ○ |
○ |
「クリエイティブ一括編集」にて、要素選択時に「変更内容の選択」を選択後、編集する操作に変更になりました。 変更内容についてはDLPO管理画面と同等になります。 詳細は「クリエイティブ一括編集」をご覧ください。 |
| クリック計測 | ○ |
× |
未実装 |
・モード設定
Chrome拡張機能のビジュアルエディターでの操作モードを設定します。「編集モード」または「閲覧モード」より選択してください。
図３－４０：モード設定
【操作モード】
◆編集モード
ビジュアルエディターにて、編集対象要素を選択し、編集、追加、削除ができます。Chrome拡張機能のビジュアルエディター起動時は「編集モード」に設定されています。
◆閲覧モード
表示されているサイトでクリック、入力などの操作ができます。サイト内のログイン機能やポップアップ/バナー表示などにより、編集対象要素が選択できない場合は、「閲覧モード」にてクリック/入力操作を行い、「編集モード」に切り替えることで対象要素の選択および編集作業が可能となります。
※ソーシャルアカウントを利用したOAuth認証など、サイト外でのログイン機能を利用している場合、ログイン後のページが正しく読み込めません。その場合は予め対象ページでログインを実行し、その後Chrome拡張機能をご利用ください。保持されたログイン情報より、ログイン後のページが表示可能になります。
・クリエイティブ一括編集
複数要素の一括編集ができます。アドレスバーの左端に表示されているアイコンをクリックしてください。「要素の選択」、「変更内容の選択」を指定し、編集ボタンをクリックすると、「変更内容の選択」ごとに設定画面が表示されます。
変更内容の詳細は「複数要素の一括編集」をご覧ください。
図３－４１：クリエイティブ一括編集
図３－４２：クリエイティブ一括編集（変更内容の選択）
■変更履歴について
クリエイティブごとに、対象ページへ追加した変更内容を一覧で確認できる、変更機能をご利用いただけます。
変更の確認・編集・表示名の変更・表示のオン/オフ・削除などを、一覧からまとめて行えます。
※当該機能は「ビジュアルエディターで編集」、またはChrome拡張機能にて行った変更内容に限り利用できます。「クリエイティブ一覧から選択」および「URLにリダイレクト」で作成した変更は対象外です。
画面上部のメニューに「○件変更」と表示されている項目があります（○には、現在の変更件数が入ります）
「○件変更」をクリックすると、画面右側に変更履歴のパネルが表示されます。
変更がまだない場合は「0件変更」と表示され、パネル内には「変更がありません」と表示されます。
パネルを閉じる際は、変更履歴の見出し横の × ボタンをクリックしてください。なお、表示クリエイティブを変更する度に変更履歴パネルは閉じます。
変更履歴には、HTML・テキスト・スタイル・画像・CSS・JavaScriptなど、クリエイティブに登録した変更内容が一覧で表示されます。
| 機能 | 説明 |
|---|---|
| 変更クリック | 変更対象のテスト要素が選択されます。 |
| 表示制御 | 目のアイコンをクリックすると、当該変更内容を表示/非表示を切り替えます。 ※非表示の状態でクリエイティブを保存すると、クリエイティブ配信時に当該変更内容は反映されません |
| 編集メニュー | 縦三点リーダーをクリックすると、編集メニューが表示されます。 【メニュー】 ・編集 ・表示名変更 ・削除 ※テスト要素を削除した変更内容の場合は、「編集」は表示されません |
| 編集 | 変更内容に応じて編集画面が表示されます。変更内容を確認・編集する際にご利用ください。 編集画面では、対象要素(CSSセレクタ)の入力欄がロックされています。対象要素(CSSセレクタ)を変更する場合は、「対象を変更する」ボタンをクリックしてロックを解除してください。 ※テスト要素の削除に対する編集は行えません |
| 表示名変更 | 変更内容の表示名を変更できます。 |
| 削除 | 変更内容を削除します。 |
変更内容を上書きした場合や、削除によって一覧から除外された変更は、変更履歴には表示されません。
変更履歴とは別に、画面上部には「元に戻す」「やり直し」があります。編集操作の取り消しや再適用は、こちらの機能も併せてご利用ください。
(3)次へ
設定が完了しましたら、「次へ」ボタンをクリックしてください。「次へ」をクリックすると、クリエイティブ編集の設定内容が一時的に保持され、「3.詳細設定」画面へ進みます。
※この時点ではクリエイティブのDB保存は行われません。クリエイティブおよびキャンペーンの設定は「3.詳細設定」画面の「設定完了」をクリックした際に一括で保存されます。
3．詳細設定
「3.詳細設定」画面にて、コンバージョンポイントや表示率(配信率)などを設定します。
図４－１：「3.詳細設定」画面
(1)配信ON/OFF、表示率、サムネイル画像の設定
クリエイティブパターン毎に、「配信設定」のON/OFF、「表示率（必須）」、「サムネイル画像（任意）」を設定してください。
また、ターゲティングセグメント毎に配信対象とするかを設定することができます。
図４－２：クリエイティブパターン設定
クリエイティブパターン毎の設定項目は以下の通りです。
表３ー１：クリエイティブパターン設定項目一覧
| 項目名 | 設定内容 |
|---|---|
| 編集 | 「2.クリエイティブ編集」へ遷移します。 |
| 全体配信設定 | ターゲティングセグメント毎に配信対象とするかを設定してください。 全体配信設定を「ON」に設定すると、対象ターゲティングセグメント及び設定されているクリエイティブパターンは配信対象となります。 全体配信設定を「OFF」に設定すると、設定は残したまま、対象ターゲティングセグメントの場合にクリエイティブパターンを配信しないように設定できます。 |
| 配信設定 | クリエイティブパターン毎に配信対象とするかを設定してください。 配信設定を「ON」に設定すると、対象クリエイティブパターンは配信対象となります。 配信設定を「OFF」に設定すると、設定は残したまま、対象クリエイティブパターンは配信しないように設定できます。 |
| 表示率 | クリエイティブパターンの表示率(配信率)を設定してください。 ※小数点第二位まで設定できます。 ※ターゲティングセグメント内で表示率の合計が100％になるように設定してください。 |
| 均等 | 「均等」をクリックすると、ターゲティングセグメント内のクリエイティブパターンの表示率合計が100％になるように、個々のクリエイティブパターンの表示率を自動計算し設定します。 |
| サムネイル画像 | 「ここにサムネイルをドロップ」部分に画像をドロップしてください。 クリエイティブのキャプチャ画像をサムネイルとして登録する事ができます。サムネイルを登録すると詳細レポート画面にキャプチャ画像を表示する事ができます。(キャプチャ画像は別途ご用意ください) 登録されたサムネイルは サムネイルの削除は |
(2)キャンペーンの稼働日時、参加率、優先順位、オプション設定、グループの設定
キャンペーンの「稼働日時（必須）」、「参加率（必須）」、「優先順位（必須）」、「オプション設定（任意）」、「グループ（任意）」を設定してください。
図４ー３：キャンペーン基本設定
設定項目は以下の通りです。
表３ー２：キャンペーン基本設定項目一覧
| 項目名 | 設定内容 |
|---|---|
| 稼働日時 | キャンペーンを稼働させる期間を設定してください。 キャンペーン登録後に稼働ON/OFFを 稼働日時は 【設定方法】 ・日付の直接入力 ・カレンダーの日付をクリックして選択 ・期間などを選択 日時の選択後、「選択」をクリックして設定を完了してください。 ※「無期限」チェックボックスにチェックを付与すると、終了日時を指定せずにキャンペーンを稼働させることが可能です。 |
| 参加率 | LPを訪問したユーザーのキャンペーンへの参加率を設定してください。 LPへの全訪問者ではなく、一部の訪問者に対してのみキャンペーンを稼働(テストを実施)させたい場合に任意の参加率を入力してください。 設定例は「Standardキャンペーン作成による設定」の同項目の説明をご覧ください。 ※通常は初期値の「100％」から変更する必要はありません。 |
| 優先順位 | 同一エリアを使用した複数のキャンペーンを設定する際に「セグメントの判別条件が重複する可能性がある場合」に優先して稼働させるキャンペーンを決定するための順位を入力してください。 設定例は「Standardキャンペーン作成による設定」の同項目の説明をご覧ください。 ※通常は初期値の「1」から変更する必要はありません。 |
| オプション設定 | オプション設定では以下項目が設定できます。必要に応じて設定してください。詳細は「オプション設定」をご覧ください。 ・GA4連携（PUSH連携） ・Adobe Analytics連携 ・ヒートマップツール連携（Contentsquare、Microsoft Clarity） ・行動ターゲティング設定 ・IPアドレス制限 |
| グループ | キャンペーンをグループに入れて登録/管理する際に設定します。 ※グループは予め「キャンペーングループ一覧画面」で作成しておく必要があります。 ※キャンペーンの登録後にキャンペーングループ一覧からグループに移動させる事も可能です。 |
【オプション設定】
キャンペーンのオプション設定にて設定可能な内容は以下の通りです。
図４－４：オプション設定
表３－３：キャンペーンのオプション設定項目一覧
| 項目名 | 設定内容 |
|---|---|
| GA4連携（PUSH連携） | GoogleAnalytics4(GA4)に対して、キャンペーンの稼働時にキャンペーン、セグメント、クリエイティブ情報を連携することができます。 ご利用の際は、 ※GoogleAnalytics4のタグ設定は別途対応が必要となります。 ※本機能の利用には、事前に連携設定が必要となります。詳細は「GoogleAnalytics4連携設定（PUSH自動連携）」をご覧ください。 |
| Adobe Analytics連携 | AdobeAnalyticsに対して、キャンペーンの稼働時にキャンペーン情報を連携することができます。 ご利用の際は、 詳細は「Adobe Analytics連携設定」をご覧ください。 |
| ヒートマップツール連携 |
指定したヒートマップツールに対して、キャンペーンの稼働時にキャンペーン情報を自動的に連携することができます。 ご利用の際は、 |
| 行動ターゲティング設定 |
キャンペーンでセグメント「サイト内行動履歴」「過去広告パラメーター」「過去アクセス元URL」を使用する際に、セグメントの判別で参照する「行動履歴取得」キャンペーンを選択します。 ご利用の際は、 |
| IPアドレス制限 |
IPアドレスを指定して、特定のIPアドレス上にてキャンペーンを稼働させることができます。作成したキャンペーンを社内IPアドレス内で稼働させ検証したい、セグメント条件とは別にIPアドレスを指定してキャンペーンを稼働させたい場合などにご利用ください。 ご利用の際は、 また、IPアドレス入力欄は追加することも可能です。IPアドレスを複数指定したい場合に「入力欄追加」をクリックし、IPアドレス入力欄を追加してください。複数指定したIPアドレスは「OR」条件となります。 |
(3)コンバージョンポイント、セグメント別分析の設定
コンバージョンを計測するコンバージョンポイントを設定してください。
また、テストの結果をレポート画面にて「特定のセグメント軸で分析(閲覧)」する場合はセグメント別分析を設定してください。
図４－５：コンバージョンポイント設定、セグメント別分析設定
【コンバージョンポイント設定】
「コンバージョンポイント設定」をクリックすると、コンバージョンポイント選択画面が表示され、既に登録されているコンバージョンポイントが一覧表示されます。
利用するコンバージョンポイントの「選択」トグルを「ON」に設定し、「選択したコンバージョンポイントを設定」をクリックしてください。「3.詳細設定」画面に選択したコンバージョンポイントが表示されます。
なお、キャンペーンで使用されている(選択されている)コンバージョンポイント名の右には アイコンが表示されます。
アイコンをクリックすると使用されているキャンペーン名を確認できます。 稼働中のキャンペーン名は太字で表示され、キャンペーン名左に ● が表示されます。コンバージョンポイント使用状況のご確認にご利用ください。
※コンバージョンポイントは複数選択が可能です。
図４－６：コンバージョンポイント選択
図４－７：コンバージョンポイント選択後の「3.詳細設定」画面
コンバージョンポイントを新規で登録する際は、コンバージョンポイント選択画面にて「新規コンバージョンポイント登録」をクリックしてください。新規コンバージョンポイント登録画面が表示されるので、「表示名（必須）」、「コンバージョンページURL（必須）」、「マッチング条件（必須）」、「グローバル変数条件を有効にする（任意）」を設定し、「コンバージョンポイント登録」をクリックしてください。
なお、「コンバージョンポイント登録」をクリックした際に、「コンバージョンページURL」、「マッチング条件」と一致する発火条件が既に登録されているかを確認します。重複データが存在する場合は、重複チェック結果ダイアログを表示します。ダイアログの内容を確認し、コンバージョンポイントを登録する場合は「登録」ボタンを、中断する場合は「キャンセル」ボタンをクリックしてください。
※「コンバージョンページURL」に指定するページには、事前にDLPOタグを設置する必要があります。DLPOタグの詳細は「ページ設定とは」をご覧ください。
※新規作成したコンバージョンポイントの計測タイミングは「ページビュー」となります。計測タイミングを「クリック」「滞在時間」「スクロール」にて設定する場合は、「コンバージョン計測のタイミング設定」をご覧ください。
その後、コンバージョンポイント選択画面に、新規登録したコンバージョンポイントが表示されるので、対象コンバージョンポイントの「選択」トグルを「ON」に設定し、「選択したコンバージョンポイントを設定」をクリックしてください。
図４－８：新規コンバージョンポイント登録
コンバージョンポイントの新規登録時の設定項目は以下の通りです。
表３－４：新規コンバージョンポイント登録項目一覧
| 項目名 | 設定内容 |
|---|---|
| 表示名 | コンバージョンポイントを識別するための名称を設定してください。 登録後の名称変更も可能です。 |
| コンバージョンページURL | コンバージョンを計測するページのURLを設定してください。 ※対象ページにはDLPOタグの設置が必要です。登録前に必ず設置してください。 |
| マッチング条件 | 入力したURLを判別させる条件を「部分一致」「前方一致」「完全一致」「正規表現指定」から選択してください。 条件判別にURLの”?”マーク以降のパラメータを含めたい場合は「パラメータを含めて」のチェックボックスにチェックを入れてください。 |
| 条件合致確認 | 条件合致確認ダイアログが表示されます。 「コンバージョンページURL」、「マッチング条件」に設定する値が、対象ページに合致するか確認できます。 また、ダイアログにて確認した設定値を登録画面の「コンバージョンページURL」、「マッチング条件」それぞれに設定することができます。 |
| グローバル変数条件を有効にする | グローバル変数条件を使用する場合は「ON」にした上で「変数名」「値」「マッチング条件」を設定してください。 「入力欄を追加」をクリックするとグローバル変数条件を複数登録することができます。 |
【セグメント別分析設定】
「セグメント別分析設定」をクリックすると、セグメント選択画面が表示され、既に登録されているセグメントが一覧表示されます。
利用するセグメントの「選択」トグルを「ON」に設定し、「選択したセグメントを設定」をクリックしてください。「3.詳細設定」画面に選択したセグメントが表示されます。
※セグメントは複数選択が可能です。
図４－９：セグメント選択
図４－１０：セグメント選択後の「3.詳細設定」画面
新規でセグメントを登録する際は、画面右上の「新規セグメント登録」をクリックし、「セグメント名」「セグメント条件」を設定の上、「セグメント登録」をクリックしてください。
「新規セグメント登録」機能は「セグメント個別登録」機能を踏襲しています。設定方法などの詳細は「セグメント個別登録」をご覧ください。
図４－１１：セグメント登録
(4)設定完了
設定が完了した後、「設定完了」をクリックしてください。「設定完了」をクリックすると、「2.クリエイティブ編集」で設定したクリエイティブの情報と、「3.詳細設定」（コンバージョンポイント・表示率等）がまとめてDBに保存されます。
注意事項
- キャンペーン作成時にエリア、またはコンバージョンポイントを新規作成した場合、対象ページにDLPOタグを必ず設置してください。
- キャンペーン作成時にコンバージョンポイントを作成した場合、作成されたコンバージョンポイントの計測タイミングは「ページビュー」となります。計測タイミングを変更する場合は、コンバージョンを計測するページにDLPOタグと、計測用スクリプトを設置してください。
- 登録直後のキャンペーンは停止されています。キャンペーングループ一覧の「稼働ON/OFF」から
をクリックし
の表示に切り替えて稼働してください。
- 「1.配信ページ登録」の「保存して次へ」をクリックした際、キャンペーンが作成されます。(エリアを新規作成する場合はエリア登録、発火ルール設定も実施されます)
そのため、以降の操作でキャンセルを行ってもキャンペーン(場合によってエリア、発火ルール設定を含む)は作成された状態となりますので、不要な場合は手動にて対象データを削除してください。 - 「2.クリエイティブ編集」の「次へ」をクリックした段階では、クリエイティブの設定はDBに保存されません。「3.詳細設定」の「設定完了」をクリックすることで初めて保存されます。「設定完了」前にキャンセルした場合、「2.クリエイティブ編集」の編集内容は破棄されます。
- 発火ルール設定で「エリア」「コンバージョン」「トラフィック」に追加出来る条件はそれぞれ「100個」までとなります。この設定上限は各ユーザーに個別に適用されます。1アカウント内にて複数ユーザーで発火条件を管理する場合は、各ユーザーの設定での上限が100個となります。この上限は、キャンペーン作成時にエリア、またはコンバージョンポイントを新規作成した場合にも有効となります。