Google AdSenseを使っています。AdSenseは便利で、JavascriptのタグをAdSense広告設置箇所に書くだけでその場所に広告が配信されます。
Googleの広告配信プラットフォームはAdSenseだけではなく、DoubleClick for Publishers(通称DFP)もあります。こちらは、AdSenseのアカウントと紐付けてAdSenseを配信するだけではなく、自分で設定した広告を表示させることもできる高機能なものです。
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('/顧客番号/広告ユニット名', [[サイズ1], [サイズ2], [サイズ3]], 'タグ用のID').addService(googletag.pubads()); googletag.enableServices(); }); </script>
こんな感じのタグになっているはずです。スロットを2つ以上設置する場合には、
googletag.defineSlot('/顧客番号/広告ユニット名', [[サイズ1], [サイズ2], [サイズ3]], 'タグ用の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('/顧客番号/広告ユニット名1', [[250, 250], [300, 100], [300, 250], [336, 280]], 'タグ用のID1').addService(googletag.pubads()); googletag.defineSlot('/顧客番号/広告ユニット名2', [[728, 90], [234, 60], [468, 60]], 'タグ用のID2'). 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('/顧客番号/広告ユニット名1', [[250, 250], [300, 100], [300, 250], [336, 280]], 'タグ用のID1').collapseEmptyDivs().addService(googletag.pubads());
こんな感じ?
レスポンシブ表示
AdSenseのレスポンシブ広告ユニットほどの柔軟性はありませんが、何段階かに大きさを分けて表示することができます。
それを行っている部分が、
googletag.defineSlot('/顧客番号/広告ユニット名2', [[728, 90], [234, 60], [468, 60]], 'タグ用のID2'). 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の広告ユニットを表示)前は[[0,0]]と定義していたような気がしていたのですが、元々なのか、最近変わったのか、[]と中身を空っぽで定義します。 - それ以下の場合、広告を表示しない
という意味になります。表示側のタグはいじらなくても出しわけができます。
DFPの注意点
DFPを使う場合、広告表示用タグに
<div id="タグ用のID">....</div>
とIDが使用されています。AdSenseを直接使う場合には、同じタグを複数個所に設置できましたが、DFPではIDが重複すると表示されなくなりますので、設置するタグを全て違うものにしなくてはいけません。
これは一長一短です。
- 長所:AdSenseだと意図せずに広告が4つ以上表示されてしまうことがありうる(抑制されて表示されないはずですが)
- 短所:設定が面倒
コメント