DoubleClick for PublishersでGoogle AdSenseを使う

アフィリエイト
2016.01.11

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

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

AdSense

advertisement-on-rooftop

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のコードを配置するには、

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

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

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

DFPの注意点

DFPを使う場合、広告表示用タグに

<div id="タグ用のID">....</div>

とIDが使用されています。AdSenseを直接使う場合には、同じタグを複数個所に設置できましたが、DFPではIDが重複すると表示されなくなりますので、設置するタグを全て違うものにしなくてはいけません。

これは一長一短です。

  • 長所：AdSenseだと意図せずに広告が4つ以上表示されてしまうことがありうる（抑制されて表示されないはずですが）
  • 短所：設定が面倒

コメント

タイトルとURLをコピーしました