DoubleClick for PublishersでGoogle AdSenseを使う

Google AdSenseを使っています。AdSenseは便利で、JavascriptのタグをAdSense広告設置箇所に書くだけでその場所に広告が配信されます。

Googleの広告配信プラットフォームはAdSenseだけではなく、DoubleClick for Publishers（通称DFP）もあります。こちらは、AdSenseのアカウントと紐付けてAdSenseを配信するだけではなく、自分で設定した広告を表示させることもできる高機能なものです。

記事の内容

1 AdSense
- 1.1 AdSenseの表示崩れ
2 DFPでAdSense表示
- 2.1 GPTのヘッダ用コード（基本）
- 2.2 GPTの広告ユニット設置場所のコード
3 DFPの追加設定
4 DFPの注意点

AdSense

DFPとAdSense本体を比べると

AdSenseコードの長所
- リンクユニット・広告検索ユニットが設置できる
- 広告設置場所だけに置けば配信できる
- レスポンシブユニットが作れる

とAdSense単体のほうが良いことだらけなのですが、レスポンシブのAdSenseには少しだけ弱点もあります。

AdSenseの表示崩れ

私のサイトでは、たまに表示が大きく崩れてしまうことがあります。サーバーのキャッシュが切れて表示に時間がかかったり、接続状態が悪い時、

横250サイズのサイドバーに768サイズが配信されてしまう（多分、レスポンシブ表示をするCSSが読み込まれる前にAdSenseが配信されてしまって、起こっている）
記事が表示された後に、AdSenseが被って表示されてしまう（規約違反になるので、改善しないとマズイ）

ということが起こっていました。

BootstrapやJavascriptのタグで色々イジることで、なんとかなるのですが結構面倒です。

DFPでAdSense表示

一方、DFPでは「AdSenseを有効」（Enabled for AdSense: YES ）に設定すると作った広告枠にAdSenseが表示されます。

独自の広告についてはとりあえず置いておくとして、DFPを使うとAdSenseを表示できるのです。

DFPのコードを配置するには、

DFP上でGoogle Publisher Tag（GPT）を生成（ユーザーIDとAd Unit名がわかれば、自分で作っても大丈夫）
ドキュメントヘッダ用の部分をHTMLの<head>セクション内に設置
広告ユニット表示部分にAd Unitの部分を設置

すれば終わりです。そんなに大変でもありません。

GPTのヘッダ用コード（基本）

DFPで生成した時、<head>用の部分は2つの<script>にわかれています。

前半部分はDFPを使うための基本の設定で、おまじないです。複数設置するときも一つで構いません。GPTのAPIリファレンスを読めば理解できるのかもしれませんが、気にしないことにします。

<head>の後半部分が広告の動作を決める重要な部分です。

<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/顧客番号/広告ユニット名', [[サイズ１], [サイズ２], [サイズ３]], 'タグ用のID').addService(googletag.pubads());
googletag.enableServices();
});
</script>

こんな感じのタグになっているはずです。スロットを２つ以上設置する場合には、

googletag.defineSlot('/顧客番号/広告ユニット名', [[サイズ１], [サイズ２], [サイズ３]], 'タグ用のID').addService(googletag.pubads());

この部分を別のユニット用に定義すればいけます。

GPTの広告ユニット設置場所のコード

広告ユニットの設置箇所には、

<!-- /顧客番号/広告ユニット名 -->
<div id='タグ用のID'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('タグ用のID'); });
</script>
</div>

というコードが表示されます。

このうち、

<!-- /顧客番号/広告ユニット名 -->

の部分はコメントなので消しても動作しますが、<div>のIDを削除すると広告枠の場所が出来ず表示されなくなります。

DFPの追加設定

以上の設定で、DFPを通じてAdSense広告を表示することができました。でも、このままではDFPとGPTを使っている意味がありません。

（必要に応じて）さらにドキュメントヘッダ部分を設定します。

<script type='text/javascript'>
googletag.cmd.push(function()
{
 googletag.defineSlot('/顧客番号/広告ユニット名１', [[250, 250], [300, 100], [300, 250], [336, 280]], 'タグ用のID１').addService(googletag.pubads());
 googletag.defineSlot('/顧客番号/広告ユニット名２', [[728, 90], [234, 60], [468, 60]], 'タグ用のID２'). defineSizeMapping( [[[640,40],[[728,90]]],[[468,20],[[468,60]]],[[0,0],[[234,60]]]]). addService(googletag.pubads());
 googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs();
 googletag.enableServices();
}
);
</script>

シングルリクエスト

googletag.pubads().enableSingleRequest();

広告スロットの定義の外側に配置されています。

これを使うと、DFPの広告配信サーバーとの通信が一回で済ませられますので、表示の高速化が図れます。デメリットもあり、現状ではAdSense経由のリッチメディア広告が配信されなくなります。他の種類の広告も表示されないという情報は、少し古いようです。

空のDIVを削除

   googletag.pubads().collapseEmptyDivs();

これも広告スロット定義の外側に配置されます。

何かの原因で配信されるべき広告がない場合、<div id=タグ用のID>…</div>を非表示にしてくれます。

まだ試していないのでわかりませんが、たぶん広告定義の中に埋め込むこともできそうですので、そうすれば空にしたくないスロットを作れる気がします。

 googletag.cmd.push(function() {
 googletag.defineSlot('/顧客番号/広告ユニット名１', [[250, 250], [300, 100], [300, 250], [336, 280]], 'タグ用のID１').collapseEmptyDivs().addService(googletag.pubads());

こんな感じ？

レスポンシブ表示

AdSenseのレスポンシブ広告ユニットほどの柔軟性はありませんが、何段階かに大きさを分けて表示することができます。

それを行っている部分が、

 googletag.defineSlot('/顧客番号/広告ユニット名２', [[728, 90], [234, 60], [468, 60]], 'タグ用のID２'). defineSizeMapping( [[[640,40],[[728,90]]],[[468,20],[[468,60]]],[[0,0],[[234,60]]]]). addService(googletag.pubads());

強調表示している部分です。

定義内に、

defineSizeMapping()関数を入れ込みます。（改訂：2016年3月12日）

関数内では、

[
- [
  - [640,40],[[728,90]]
- ],
- [
  - [468,20],[[468,60],[250,250]]
- ],
- [
  - [250,250],[]
- ]
]

こんな感じの入れ子構造になっています。見難いです。

中身の[468,20],[[468,60],[250,250]]部分が設定内容で、

表示領域が640×40ピクセル以上のサイズの場合に、728×90サイズの広告ユニットを表示
同468×20ピクセル以上では、468×60サイズ、250×250サイズの広告ユニットを表示
同250×250ピクセル以上では、広告を表示しない~~（サイズ０×０の広告ユニットを表示）~~前は[[0,0]]と定義していたような気がしていたのですが、元々なのか、最近変わったのか、[]と中身を空っぽで定義します。
それ以下の場合、広告を表示しない

という意味になります。表示側のタグはいじらなくても出しわけができます。