ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

はてなブログに AdSenseの『AMP 自動広告』を設置してみる【追記あり】

SPONSORED LINK

AMP自動広告のイメージ01

ガジェレポ!@gadgerepoです。こんにちわ。

Google AdSense の広告ユニットに、サイトのAMP用ページにAdSenseの広告が自動的に表示される『AMP 自動広告』が追加されました。

さっそく設定してみます。

専最適化された広告がAMP化ページでも自動挿入

 

2017年10月から当ブログは「Accelerated Mobile Pages(以下、AMP)」化しています。

AMPについての説明はコチラの記事をご参照ください。

www.gadgerepo.com

 

これまで、AMP化されたページで AdSense広告を表示するためには、記事内に手動で広告コードを貼り付ける必要がありました。

今回追加された「AMP自動広告」では、通常の自動広告と同じくAMP 自動広告のタグをサイトのヘッダーに挿入することで、AMP用のページにも最適化された広告が最適な場所に自動で表示されるようになります。

はてなブログで「AMP自動広告」を表示させる設定ですが、

まずは Google AdSense にログイン。

www.google.com

 

左側のメニューバーから「広告の設定」→「コンテンツ」から「自動広告」へ移動。

AMP自動広告のイメージ02

 

「AMP 自動広告」をクリック。

AMP自動広告のイメージ03

 

テキスト広告とディスプレイ広告のフォーマットをオンにします

「新しいフォーマットを自動的に取得する」はオンのままでOK。

AMP自動広告のイメージ04

 

その下の「AMP 自動広告のスクリプト」をコピーし、はてなブログの管理画面から「設定」→「詳細設定」の「headに要素を追加」 に貼り付けます。

続いて、「AMP 自動広告コード」をコピー。

レスポンシブデザインの場合、コピーしたコードをはてなブログの管理画面「デザイン」→「カスタマイズ」から「ヘッダ」の「タイトル下」、あるいは「フッタ」にペースト。

そうでない場合は、はてなブログの管理画面「デザイン」→「スマートフォン」から「ヘッダ」の「タイトル下」、あるいは「フッタ」にペーストします。

追記(2018.07.12)

当ブログAMP化でご協力いただいた うれしデザイン@ureshidesignさんからご教示いただいたところ、はてなブログのデザインカスタマイズ、ヘッダ・フッタ・記事上下の設定はAMPでは反映されないらしく、記事本文に直接書かなければいけないようです。

しかし、それでも AMP用ページに自動広告が表示されません。

あれやこれやと調べている過程で、以前は問題なく表示されていた普通の AdSense 自動広告も、2018年5月初旬から表示されなくなっていました。

ググってみたところ、同時期に「はてなブログでAdSenseの自動広告が表示されなくなった」という事例が何件か報告されています。

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=9&cad=rja&uact=8&ved=0ahUKEwjl2Kryq5jcAhWIv7wKHd_uCGsQFgh0MAg&url=https%3A%2F%2Fproductforums.google.com%2Fforum%2F%23!topic%2Fadsense-ja%2Fe50ZjHRwsps%3Bcontext-place%3Dforum%2Fadsense-ja&usg=AOvVaw0zeZsVKXIGuKpTxj2V9zlE

もしかすると、「AMP 自動広告」も同様の理由で反映されないのかもしれません。

原因究明・検証いたしますのでしばらくお待ち下さい。

 

まとめ

 

中途半端になってしまいましたが、結果は後日ご報告します!