はてなブログのAMPでAdSenseを表示させてみた - いろいろブログカスタマイズメモ

　はてなブログはAMPにしてもAdSenseが表示できないという話がずっとあったのですが、ふとしたところから実は表示できるのでは、という話があったので対応してみました。

AdSenseのAMP対応

　参考にした記事は以下の二つ。

www.weblog-life.net

30cm.xyz

あと、Google AdSenseのAMP対応ページ。

support.google.com

AdSenseコードの取得

　ひとまずGoogleのページを参考に、AdSense用のタグを作ります。

　レスポンシブの広告ユニットを作成して、そこから「data-ad-client」と「data-ad-slot」の値を取得。
(例示している値はAdSenseのページにあったものです)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
   style="display:inline-block;width:120px;height:600px"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

　既存のコードでも動くとは思いますが、一応分けて作ります。

　それを、ページにあるタグに合わせます。スクロールなし(ファーストビュー)とスクロール有りで若干コードが違うみたい。

・スクロールなし

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

・スクロールあり

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

　このコードをベースにして、はてなブログ向けに修正をします。

はてなブログ向けに修正

　参考サイトにあった修正を加えていく前に…Googleのページを見ると、

AMP 広告ユニットが含まれるページにも AdSense プログラムポリシーが適用されることを忘れないようにしてください。

　適用されるのか…ということは上に「スポンサーリンク」つけないといけなくない？

　でも通常ページでスポンサーリンクだけ出てくるとおかしいしな…というところも含めて、次のようにしてみました。

・スポンサーリンクを消すためのCSS

<!-- AMPタイトルを通常は表示しないようにする -->
<style type="text/css">
.amp-ad-title { display: none};
</style>

　まずこのCSSを、「デザイン設定 > カスタマイズ > ヘッダ > タイトル下」あたりに設定します。

(通常ページに表示される場所であればどこでもかまいませんが、一例として)

　このCSSはAMPページでは無効になるので、逆にこれが有効になっている通常ページではamp-ad-titleが表示されなくなるという寸法。

・スクロールしなくても見える位置(トップビュー)

<div class="amp-ad-title"><center>スポンサーリンク</center></div>
<div>
<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
<!-- adsense -->
</amp-ad>
</div>

・スクロールしなければ見えない位置

<div class="amp-ad-title"><center>スポンサーリンク</center></div>
<div>
<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
<!-- adsense -->
</amp-ad>
</div>

　そしてこの二種類のタグは、参考サイトにあった内容を取り込んで、「見たまま編集」「はてな記法」「Markdown」のどれにも対応しています。

　「data-ad-client」と「data-ad-slot」には、自分のAdSenseの広告ユニットから取得した値を入れて下さい。

　「見たまま編集」ではコメントがないと、タグ自体が無効と判断されて？　勝手に消されてしまうみたい。Markdownではdivタグで囲んでいないとサニタイズされてしまうようでした。

　うちでは基本的にMarkdownなのですが、昔の記事などで「見たまま」で書いてあったりするものがあるので、使い分けるのも面倒だから纏めてしまった。

　あと、amp-ad-titleでスポンサーリンクの文字を入れました。これは先のCSSで、通常ページでは無効になるクラスです。

　centerタグは効いてそうだったので一応入れてみたのですが、どのみちAMPはデザインが簡素になるし、ダメならダメでいいかなという感じ。

　本当はセンタリングと文字の縮小がしたかったのですが…AMPでのデザイン指定がよくわからず、とりあえずこれで。

　
　
　後は、上のコードを記事にペーストしていくだけです。手動で。

　…はてなブログでは一括で設定する手段がないので、アナリティクスでURLにamp=1が付いているアクセスを調べて、多そうなページに差し込んでみました。

　私は、基本的に記事の上部にスクロールなし、記事の下部にスクロールありのほうのコードを差し込みました。

AMP対応後の確認

　AMP対応後は、URL末尾に「&amp=1」を付けて確認します。

　これはChromeでも確認できますが、ただこれだけではAMP向け広告は出てこないようで、「その他のツール > デベロッパーツール」からスマホサイトとして確認してみると、ちゃんと出てきました。

　AMP向けデザインの確認、どうすればいいのかよくわからないので良い方法があれば追記したいとは思います…

　現在、AMPのアクセスが23%程度を占め始めているので、そろそろ対応しておきたい…と思っていたタイミングの話でした。

　行うこと自体はそう難しくありませんでしたがでも手動はマジつらい…はてなさん、ほんと早めの対応を…AMP向けヘッダとフッタの設定だけでいいからとりあえずは…

(2019/05/05追記) amp-auto-adsタグはエスケープされてしまった

　AdSenseの管理画面を見ていたら、いつのまにか自動的にAMP広告を設置してくれるような機能が増えていました。

AMP 自動広告について - AdSense ヘルプ

　試しに設定してみようとしましたが…はてなブログのMarkdownだと、amp-auto-ads タグがエスケープ(無効化)されてしまうようでした。

これが

<amp-auto-ads type="adsense"
              data-ad-client="xxxx">
</amp-auto-ads>

ソースで見るとこう

<div class="paragraph"> &lt;amp-auto-ads type="adsense"
              data-ad-client="xxxx">
 &lt;/amp-auto-ads></div>

　「<」だけ置き換わっているあたりバグっぽい感じもしますけど、ともかくうまくいきませんでした。

　これ以上は追っていませんがひとまずメモとして。

AdSenseのAMP対応

AdSenseコードの取得

はてなブログ向けに修正

AMP対応後の確認

(2019/05/05追記) amp-auto-adsタグはエスケープされてしまった

© 2016 はてなブログカスタマイズメモ