ダイレクトコード実装

ダイレクトコード実装とは

ワンコード実装では対応できない詳細な設定を行うために、用途に応じた各種タグを個別に設置することを「ダイレクトコード実装」と呼びます。
ダイレクトコード実装は以下の場合にご利用ください。

【ダイレクトコード実装利用ポイント】

・タグ設置URLが他ページと共通である場合(ワンコード実装で個別に設置URLが指定できない)

・計測タイミング"クリック"、"滞在時間"、"スクロール"のコンバージョンを計測する場合

ダイレクトコード実装の設定を行うには、設定メニューである「ダイレクトコード設定」をご利用ください。「ページ設定」＞「ダイレクトコード設定」をクリックしてください。
ダイレクトコード設定の「DLPO通信ファイルCDNアップロード」にて、DLPOを動作させるための通信ファイル(adlpo.js)をDLPOのCDNサーバーへアップロードした上で、ダイレクトコード実装用のタグを作成・設置してください。

図１：ダイレクトコード設定

ダイレクトコード用タグ作成

ランディングページ、コンバージョンページに設置する各種タグの作成を行います。

■エリアタグ作成

表示切り替え箇所に設置してエリアを設定する「エリアタグ」を作成します。
「エリアタグを作成する」をクリックし、表示された作成画面で必要事項を入力しタグを作成すると通信ファイルを読み込む「制御タグ」と「エリアタグ」が生成されます。
DLPOに認識されたエリアを確認する際は「>認識済みエリア一覧」から確認が可能です。

■コンバージョンタグ作成

成果となるページに設置してコンバージョンポイントを設定する「コンバージョンタグ」を作成します。
「コンバージョンタグを作成する」をクリックし、表示された作成画面で必要事項を入力し、タグを作成すると通信ファイルを読み込む「制御タグ」と「コンバージョンタグ」が生成されます。
DLPOに認識されたコンバージョンポイントを確認する際は「>認識済みコンバージョン一覧」から確認が可能です。

■カスタム設定用エリアタグ作成

セグメントでセグメント条件「カスタム設定」を使用する場合に表示切り替え箇所に設置する「カスタム設定用エリアタグ」を作成します。
「カスタム設定用エリアタグを作成する」をクリックし、表示された作成画面で必要事項を入力しタグを作成すると通信ファイルを読み込む「制御タグ」とページ上で取得した変数をDLPOに送信して表示を切り替える「カスタム設定用エリアタグ」が生成されます。

■IM連携用エリアタグ作成

IM連携のセグメントを使用する場合に表示切り替え箇所に設置する「IM連携用エリアタグ」を作成します。通信ファイルアップロード先パスを入力しタグを作成すると通信ファイルを読み込む「制御タグ」、IMからセグメントデータを取得する「IMデータ取得タグ」、IMのデータをDLPOに送信して表示を切り替える「IM連携用エリアタグ」が生成されます。

通信ファイル設置

DLPOを動作させるためにタグ設置ページに読み込む「DLPO通信ファイル」の設定を行います。

■DLPO通信ファイルCDNアップロード

DLPOを動作させるための通信ファイル(adlpo.js)をDLPOのCDNサーバーへアップロードすることができます。

設定手順

下記の手順で設定してください。

1．通信ファイル設置

DLPOはクリイエティブを配信して表示を切り替えるランディングページ、コンバージョンを計測するコンバージョンページに「通信ファイル」を読み込み、別途設置頂くタグと連動して動作します。
ダイレクトコード設定ページ下部の「通信ファイル設置」より設定してください。
※ワンコード実装ご利用時に計測タイミング「クリック」「滞在時間」「スクロール」のコンバージョンを計測する場合は、通信ファイルの設定は不要です。(ページで読み込むワンコードが通信ファイルを兼ねるため)　2．ダイレクトコード用タグ作成へ進んでください。

(1)通信ファイルアップロード
「DLPO通信ファイルCDNアップロード」の「JavaScript版アップロード」ボタンをクリックし、通信ファイル(adlpo.js)をDLPOのCDNサーバーへアップロードしてください。
「CDNファイルアップ先」にアップロードした通信ファイルのアップ先URLが表示されます。アップ先URLをコピーして制御タグに記載して下さい。
※ワンコードをご利用の際はワンコード用の通信ファイルのアップ先URLも表示されます。
・ファイル名が「adlpo.js」のもの
→「DLPO通信ファイルCDNアップロード」でアップロードされたファイルです。制御タグのsrc属性に聞死する場合はこちらをご利用ください。
・ファイル名が「smartadlpo.js」のもの
→ワンコード用の通信ファイルです。ワンコードを作成した際に発行されるタグに、自動的に反映されています。
※CDNへの通信ファイルのアップロードはユーザーごとに行います。複数のユーザーがアップロードを行った場合は、その数だけCDNアップ先に表示されます。
※システム設定メニューの「セッション管理設定」でCookie有効期間、タイムアウト時間、またはクロスドメイン計測を変更した場合は、再度アップロードしてください。詳細は「システム設定」をご覧ください。

(2)制御タグの作成
通信ファイルをページに読み込むための制御タグを作成します。
制御タグは「ダイレクトコード設定メニューから取得」する方法と、「ダイレクトコード設定メニュー内の各種タグ作成画面から取得」する方法の2種類がございます。

【ダイレクトコード設定メニューから取得】
「DLPO通信ファイルCDNアップロード」の「JavaScript版アップロード」ボタンの上部に表示されている制御タグをコピーし、任意のテキストエディタに貼り付け、ディレクトリパスを設定してください。

例）制御タグ

<script src="***/adlpo.js" type="text/javascript"></script>

※"***"には「CDNファイルアップ先」のアップ先URLのパスを記載してください。

【ダイレクトコード設定メニュー内の各種タグ作成画面から取得】
ダイレクト設定メニュー内の各種タグを作成する際、「通信ファイルアップロード先パス」に、「CDNファイルアップ先」のアップ先URLのパスを入力すると、各種タグと併せて制御タグを作成できます。制御タグの下にある「コピー」ボタンをクリックすると、作成された制御タグをコピーできます。

図２－１：ダイレクトコード用各種タグ作成画面での制御タグの作成イメージ

(3)制御タグの設置
DLPOを使用するページ内の</head>タグ直前に、作成した制御タグを設置してください。
※制御タグを設置せずにエリアタグ、コンバージョンタグ、トラフィックタグなどを設置するとエラーとなりますので、ご注意ください。

図２－２：制御タグの設置イメージ

2．ダイレクトコード用タグ作成

各種タグを作成し、対象ページへ設置してください。

■エリアタグ作成
ウェブページでコンテンツの表示切り替えを行う箇所に設置する「エリアタグ」を作成します。

(1)エリアタグ作成画面へ遷移
「ページ設定」＞「ダイレクトコード設定」にて、「ダイレクトコード用タグ作成」の「エリアタグ作成」にある「エリアタグを作成する」ボタンをクリックしてください。
もしくは「ページ設定」＞「エリア一覧」にて「ダイレクトコード用エリアタグ作成」ボタンをクリックしてください。
いずれもダイレクトコード用エリアタグ作成画面が表示されます。

(2)必要事項入力後、作成
エリアタグ作成画面にて必要事項を入力し、「作成」ボタンをクリックしてください。

図３－１：エリアタグ作成画面

表１：設定項目一覧

<div class='ADLPODefault'>
<!--表示切替箇所-->
</div>
<script type='text/javascript'>adlpoMain('main','lc=os','ch=Shift-JIS');</script>

(3)作成されたタグをコピー
エリアタグが出力されますので、コピーしてLPへ設置してください。「コピー」ボタンをクリックすることにより、作成されたタグをコピーできます。設置方法は「3．ダイレクトコード用タグ設置方法」をご覧ください。

※タグ発行を行ってもサイト上に設定しない限りDLPOで利用できません。
※制御タグを設置していない場合は、作成時に通信ファイルアップロード先パスを設定し、同時に作成される制御タグをご利用ください。

図３－２：作成されたエリアタグ

■コンバージョンタグ作成
成果となるページに設置してコンバージョンポイントを設定する「コンバージョンタグ」を作成します。

(1)コンバージョンタグ作成画面へ遷移
「ページ設定」＞「ダイレクトコード設定」にて、「ダイレクトコード用タグ作成」の「コンバージョンタグ作成」にある「コンバージョンタグを作成する」ボタンをクリックしてください。
もしくは「ページ設定」＞「コンバージョン一覧」にて「ダイレクトコード用コンバージョンタグ作成」ボタンをクリックしてください。
いずれもダイレクトコード用コンバージョンタグ作成画面が表示されます。

(2)必要事項入力後、作成
コンバージョンタグ作成画面にて必要事項を入力し、「作成」ボタンをクリックしてください。

図４－１：コンバージョンタグ作成画面

表２：設定項目一覧

<script type='text/javascript'>adlpoMain('cv','pr=cv','img=beacon');</script>

(3)作成されたタグをコピー
コンバージョンタグが出力されますので、コピーしてコンバージョンページへ設置してください。「コピー」ボタンをクリックすることにより、作成されたタグをコピーできます。設置方法は「3．ダイレクトコード用タグ設置方法」をご覧ください。

図４－２：作成されたコンバージョンタグ

■トラフィックタグ作成
セグメントの「サイト内行動履歴」「過去検索キーワード」「過去広告パラメーター」「過去アクセス元URL」を使用するには訪問者の行動履歴を取得します。行動履歴を取得するために行動データ計測対象のページ内に設置する「トラフィックタグ」を作成します。
タグの作成、設置方法の詳細は「トラフィック登録・一覧」をご覧ください。

■カスタム設定用エリアタグ作成
セグメントでセグメント条件「カスタム設定」を使用する場合に表示切り替え箇所に設置する「カスタム設定用エリアタグ」を作成します。
タグの作成、設置方法の詳細は「カスタムセグメントの設定」をご覧ください。

■IM連携用エリアタグ作成
IM連携のセグメントを使用する場合に表示切り替え箇所に設置する「IM連携用エリアタグ」を作成します。
タグの作成、設置方法の詳細は「IntimateMerger連携設定」をご覧ください。

3．ダイレクトコード用タグ設置方法

各種タグの設置方法は以下をご覧ください。

■エリアタグ設置方法
作成(発行)したエリアタグは、LPのクリエイティブ配信箇所(表示切り替え箇所)のHTMLソースを囲むように設置してください。
下記例のエリアタグで囲まれた青字部分は「デフォルト」と呼び「DLPOのキャンペーン非稼働時」、キャンペーンでセグメント設定時は「セグメントに合致しない場合」に表示されます。また、通信環境の遅延や、何らかの原因でDLPOサーバーから応答がない場合もこのデフォルトが表示されますので必ずデフォルトのHTMLは記載してください。

※クリエイティブとしてCSSやJavaScriptなどを使用する場合は、デフォルトの記載が不要な場合があります。例えば通常は<head>で読み込まれるCSSファイルのスタイルが適用され、クリエイティブが配信された際にはエリアタグ部分に吐き出されたスタイルが適用される、という動作をさせる場合はデフォルトは空にし、エリアタグのみを設置する事でご対応頂けます。またJavaScriptを使用したリダイレクトによるスプリットランテストを行う場合などは<body>開始直後にデフォルトは空にしてエリアタグのみを設置してください。

例）エリアタグ設置
【エリアタグ設置前のクリエイティブ配信箇所(表示切り替え箇所)】

<a href="/test.html"><img src="img/main_bnr.jp" alt="メインバナー"></a>

↓
【エリアタグ設置後のクリエイティブ配信箇所(表示切り替え箇所)】

<div class='ADLPODefault'>
<a href="/test.html"><img src="img/main_bnr.jp" alt="メインバナー"></a>
</div>
<script type='text/javascript'>adlpoMain('main','lc=os','ch=Shift-JIS');</script>

※エリアタグ設置時はタグの設置により表示崩れが発生しないかどうか必ずご確認ください。既存の<div>タグをまたいだり、<table>の<tr>や<td>タグをまたいでエリアタグを設置すると表示が崩れますのでご注意ください。
※LPには必ず「制御タグ」を設置してから(もしくは同時に)エリアタグを設置してください。制御タグを設置せずにエリアタグを設置するとエラーとなりますのでご注意ください。

■コンバージョンタグ設置方法
作成(発行)したコンバージョンタグは、計測タイミングにより設置方法が異なります。クリック時に計測した場合はクリック計測箇所に、それ以外はコンバージョン計測ページの</body>の直前に設置してください。
計測タイミングについての詳細は「コンバージョン計測のタイミング設定」をご覧ください。

※コンバージョンタグ設置ページには必ず「制御タグ」もしくは「ワンコードタグ」を設置してから(もしくは同時に)コンバージョンタグを設置してください。制御タグを設置せずにコンバージョンタグを設置するとエラーとなりますのでご注意ください。

※計測タイミング「スクロール」では、別途jQuery(バージョン1.2.5以上)が必要となります。コンバージョンタグ設置ページでjQueryが読み込まれていることを確認してください。

例）コンバージョンタグ設置：計測タイミング「ページビュー」
【設置箇所：</body>直前に設置】

<script type='text/javascript'>adlpoMain('cv','pr=cv','img=beacon');</script>
</body>

例）コンバージョンタグ設置：計測タイミング「クリック」
【設置箇所：クリック計測箇所に設置】

<a noadlpo href="form.html" onclick="adlpoMain('cv','pr=cv','img=beacon');">お申込み</a>

例）コンバージョンタグ設置：計測タイミング「滞在時間」
【設置箇所：</body>直前に設置】
［黒字部分］setTimeoutの第2引数「30000」は滞在時間をミリ秒で設定してください。「30000」ミリ秒は「30」秒となります。

<script type="text/javascript">
setTimeout(function(){ adlpoMain('cv','pr=cv','img=beacon') }, 30000);
</script>
</body>

例）コンバージョンタグ設置：計測タイミング「スクロール」
【設置箇所：</body>直前に設置】
［黒字部分］if文の判定に使用している値（係数）「1」はスクロール位置のパーセンテージを数値で示しています。「1」の場合は「100」%になり、「dlpocvScrollCv」の表示位置までスクロールが到達した場合に計測する仕組みとなります。

<div id="dlpocvScrollCv" style="display:none;"></div>
<script type="text/javascript">
$(function(){
$(window).bind("scroll.dlpocvscrollcv resize.dlpocvscrollcv", function(){
if($(window).scrollTop() + $(window).height() >= $("#dlpocvScrollCv").position().top * 1){
$(window).unbind("scroll.dlpocvscrollcv resize.dlpocvscrollcv");
adlpoMain('cv','pr=cv','img=beacon');}});});
</script>
</body>