【簡単】プラグイン「Advanced Ads」を使ったAMP対応アドセンス広告の貼り方
こんにちは。キング・ブログ・スライムです。
ワードプレスでサイトを運営している方の中には、AMPページにアドセンスが表示されず、困っている方が多いのでは？
有名どころのプラグインで「Facebook Instant Articles & Google AMP Pages by PageFrog」を使えば一応AMP対応のアドセンスを貼ることはできますが、貼る場所を指定することができません。
このプラグインでは文字数ごとにアドセンスを貼っていくスタイルだったので、変なところに挿入される可能性も。
個人的にはこのプラグインを使ったアドセンスのAMP対応はオススメできません。
私はAMPを導入してから１か月ほどの間、アドセンスのAMP対応をどうするかがずっと悩みの種でした。
しかし最近になってやっと、プラグイン「Advanced Ads」をうまく使えば貼れることを発見しました！
ということで今回は、プラグイン「Advanced Ads」を使ったgoogle adsenseのコードの貼り方についてご紹介したいと思います。
なお、このブログはプラグインを使ってAMPを導入しました。プラグインの名前はそのままで「AMP」です。検索すればトップに出てきます。
このプラグインを使って既にAMPを導入しているブログ運営者の方も多いでしょう。
AndroidのChromeではすでに検索結果にAMPページが出てくるようになっています。「⚡」のマークがあるとAMPページだという証拠です。
なぜなのかよく分かりませんが、AMPページが常に表示という訳ではなく、通常ページが出るときもあります。
まだ完全に導入されたというわけではなく、導入段階なのでしょう。
真ん中が私のページです
今後はAMPの検索表示が増えるとともに、一般の利用者への認知度も高まると予想されます。
そうなると一般利用者の中では、『「⚡」マークのサイトはメチャクチャ早いからいいよね』という意識が生まれ、AMP対応サイトは自然と有利になりますよね。
ということで、AMPをこれから導入する予定の方も多いはず。
スポンサーリンク
今回はこんな内容
通常のアドセンスはAMPページでは表示されない
AMPプロジェクトはGoogleが昨年から全力で取り組んでいるモバイル高速化プロジェクト。当然アドセンスもAMPに対応してくれるのかと誰もが思います。（対応は当然すぎて考えることすらしない）
と思いきやまだ未対応です(笑)。
つまり、AMPページが表示されてもadsenseは全く表示されないということ。
「その辺しっかり連携して～泣」と思ってしまいますが、泣いていても仕方ありません。
Google先生「あんたらで対応しろ。ワシはしらん（唖然）」ということでしょう。
自分で対応しなければいけないということですが、アドセンスをAMP対応にするためには、取得したコードを書き換える必要があります。
通常のコードは以下の通りです。（３００×２５０のレクタングル広告、非同期ロード）
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!–（自分がつけた広告名）–>
<ins class=”adsbygoogle”
style=”display:inline-block;width:300px;height:250px”
data-ad-client=”ca-pub-0000000000000000”
data-ad-slot=”0000000000“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
AMP対応のアドセンスのコードは以下の通り。
<amp-ad width=300 height=250
type=”adsense”
data-ad-client=”ca-pub-0000000000000000”
data-ad-slot=”0000000000“>
</amp-ad>
AMP対応のアドセンスコードを作成するのに必要な情報は
data-ad-client=”ca-pub-0000000000000000”
data-ad-slot=”0000000000”
の黄色マーカーの部分です。
この部分をそっくりそのままAMP対応のコードの赤色マーカーが引いてある部分と書き換えます。
AMPは高速で表示するために作成されただけあって、コードも非常にシンプルですね。
なお、広告のサイズは自分で指定しなければいけません。私の場合はモバイル対応を意識しているので、「width=300 height=250」と指定しました。
幅が３００で縦が２５０という意味です。広告サイズはご自身で好きなサイズに指定してください。
ただし、AMPはモバイルユーザーを意識して作成されていることや、まだAMPに対応した広告を提供している広告主が少ないことを考えると、「width=300 height=250」などのモバイル向けかつ無難なサイズがいいと思います。
大きすぎるとユーザビリティを損ないますし、主流ではないマイナーなサイズを選ぶと広告主がおらずに空白になる可能性もあります。
ここまでの流れをまとめると、、、
アドセンスコードを取得
↓
取得した通常のコードから黄色でマーカーを引いた箇所をコピー
↓
黄色でマークした箇所を赤マーカーの部分に張り付ければオッケー
さてここまででAMP対応のアドセンスコードを作成することができました。
次はプラグインを利用したアドセンスの貼り方について見ていきましょう。
【設定編】プラグイン「Advanced Ads」を利用してAMPページにアドセンスを表示させる
まずプラグイン「Advanced Ads」をインストールしてください。
すると横のバーに「Advanced Ads」の欄が現れます。（下の写真を参照してください）
通常のAdsenseは「advanced ads→placements」からすべてのページに機械的にアドセンスを表示させることができます。
例えば、記事の最初や最後に広告設置するのをデフォルトにしたい場合、この設定を利用するとすべての記事に一発で貼り付けられます。
しかし、AMP対応ページの場合はこの設定を利用することができません（２０１６年１０月２０日現在）。
そのため、AMP対応のアドセンスはすべてのページに１つ１つ手打ちで入れていくことになります。
手打ちといえども、ショートカット用のコードが用意されているので、それほど苦痛ではありません。
以下ではその方法を紹介していきます。
①Advanced Ads→Adsで「Ads」のページを開く
②「New Ads」から新しい広告を作成する
画面左上にボタンがあります。
③アドセンスコードを張り付ける
「タイトル」はご自身が分かりやすいと思うものを任意でつけてください。
その下の大きなボックス（「Insert plain text or code into this field.」）に先ほど作成したAMP用のアドセンスコードを張り付けます。
<amp-ad width=300 height=250
type=”adsense”
data-ad-client=”ca-pub-0000000000000000”
data-ad-slot=”0000000000“>
</amp-ad>
上で作成したAMP用コードです。なお、黄色マーカーの箇所は各々違います。
④その他の設定
基本設定どおりで大丈夫です。
特にいじるところはありませんが、私はアドセンス広告が端によるのが嫌いなので、「Position」のところを左から３番目の「真ん中」に設定しています。
他には広告周辺にスペースをとりたい場合、その下にある「Margin」を調整します。
数字が大きくなるほど距離をとることができます。因みに「top」は上、「right」は右、「bottom」は下、「left」は左です。
例えば上とスペースをとりたい場合は、「top」に適当な数字を挿入します。
スポンサーリンク
【実践編】プラグイン「Advanced Ads」を利用してAMPページにアドセンスを表示させる
さて準備ができたら、すぐに広告を貼ってみましょう。
貼り方は簡単です。
①貼りたい部分にカーソルを持ってきます。
②写真の「ここ」と記した先に「Ad」という文字が見えると思います。これをクリックしましょう。
③貼りたいアドセンスを選ぶ
スクロールすると、先ほど設定したアドセンスが表示されると思います。
この中から貼りたいものを選んでください。
因みに、私は通常アドセンスかAMP対応か区別しています。沢山作ってごっちゃになると後で大変なことになるからです（経験者は語る）。
④コードが貼れたか確認する
赤字で囲んだ部分がアドセンスのショートカットコードです。
今回はしっかり張れていることが確認できましたので大丈夫でした。
因みに本文（＝ビジュアル）にそのままぶちこんでオッケーです。記事として公開されるときには完全に消えていますのでご安心を。
⑤広告が実際に表示されているか確認する
アドセンスはすぐに表示されない場合があります。取得したコードが有効になって広告が表示されるまでに、１時間程度かかる場合がありますので注意してください。
その場合は忍耐強く待つしかありません。
このコードの優秀な点は、AMPページには表示される一方、通常ページでは全く表示されないこと。
実際にプレビュー画面で確認してみましょう。
下が通常のプレビュー表示です。赤線が入っているところにコードを挿入したはずですが、広告は表示されていません。
下がAMPモードです。
表示されていますね。（※広告箇所は黒塗りにしました）
因みに、プレビュー表示でAMP画面に入る方法を書いておきます。
例えばプレビューのURLが「https://king-blog-slime.com/?p=1192&preview=true」だった場合、
「https://king-blog-slime.com/?p=1192&=1&preview=true」のように「&=1」を追加すると、AMPページに移動できます。
もしくは「/amp/」を挿入する場合もあります。
このページも最後に「&=1」を挿入すれば、AMPページに移動することができます。
これで好きなところに貼ることができますね。どんどん書いていきましょう！
【参考記事】
AMP対応してから感じたメリットとデメリットをまとめています。
king-blog-slime
ではでは、、、
関連記事もどうぞ
1件の返信
[…] 残念ながら無料版ではAMPには対応していません。 Advanced Ads を使ってAMP対応広告を貼る方法はありますが、投稿する際にアドセンスあるいはアフィリエイト広告を入れる際に個別設定する必要があります。 特に問題なのはアフェリエイト サービスのほうで、そのまま貼り付けることは容易ではありません。 参考：【簡単】プラグイン「Advanced Ads」を使ったAMP対応アドセンス広告の貼り方 […]