BloggerにAdSenseを設定していて躓いたこと

AdSense関連のデザインとか配置とかをいじっていたときに躓いたことについてです。

配置していない位置にAdSense広告がでてくる

原因は、「ページ単位の広告のフリークエンシーを向上」を有効にした状態でAdSense認証時のコードを配置していたため、問題現象が発生しました。いわゆる、ページ単位の広告（自動広告）を表示していました。

AdSense認証時に</head>上部に配置したコードを削除することで問題が解決しました。

AdSenseコードサンプル<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
  google_ad_client: "ca-pub-XXXXXXXXXXXXXXXX",
  enable_page_level_ads: true
});
</script>

CSS変更後にAdSense広告が表示されなくなった

AdSenseのinsタグまたは上位タグのCSSを変更した場合、AdSenseが表示しなくなりました。広告の種類によっても表示するしないの挙動が異なるようです。また、すべてのCSS変更で広告が消えるわけではないようです。

失敗パターン

失敗パターンins {
  border: 1px solid #e5e5e5;
  background: #fff;
  -moz-box-shadow: 0px 2px 0px #eee;
  -webkit-box-shadow: 0px 2px 0px #eee;
  box-shadow: 0px 2px 0px #eee;
}

上記を指定した場合、広告の表示が消えました。上記を取り除いた結果、再度広告を表示しました。

成功パターン

成功パターンins {
  background: #fff;
}

上記の指定であれば、広告の背景を黄色から白色に意図した通リ変更できました。

特殊パターン

広告で動作が異なるパターン.article-ad {    /* insの上位のdivタグのクラス */
  border: 1px solid #e5e5e5;
  background: #fff;
  -moz-box-shadow: 0px 2px 0px #eee;
  -webkit-box-shadow: 0px 2px 0px #eee;
  box-shadow: 0px 2px 0px #eee;
}

上記の場合、インフィールド広告は表示出来ましたが、記事内広告は表示出来ませんでした。

まとめ

AdSense広告付近のデザイン変更による誤クリック誘導を警戒している仕様だと考えられます。ですが、背景色を変更する程度であれば許可されているようです。AdSense周辺のCSSを変更する際は、AdSenseの表示が消えることがあると意識して作業したほうが無難なようです。