トレンドブログをAMP対応にする際の課題のひとつ、アドセンス広告の設置方法についての続報です。
これまでの方法でも対応できたものの、PC表示の際に「スポンサーリンク」の文字だけが消え残っていたりして不完全でした。
それが今回の方法で解消されましたので、取り急ぎご紹介しておこうと思います。
以前、下記の記事ににて、少々ややこしい設定方法をご紹介しました。
その際の表示には、かなり納得のできない部分がありつつも、ほかにアイデアが浮かばないので放置しておりました。
ところが、今回新しいブログを立ち上げるにあたり、今一度検証してみたところ、意外にあっさりと問題が解決できたみたいなんです。
広告が表示されていないのに「スポンサーリンク」という文字列だけが消え残ることもありません。
今回の方法では、プラグイン「Quick Adsense」のリニューアル版「Quick Adsense Mobile」を利用して設置します。
そこで、下記の記事にて、代用できるプラグインをご紹介しておりますので、そちらを参考にしてください。
使い方は「Quick Adsense」とほとんど同様で、当記事でご紹介している作業にも対応できます。
このプラグイン１つで、PC表示もモバイル表示も、そしてAMP対応も解決してしまいます。
目指したのは、
「通常表示の場合と同じ位置にアドセンス広告を表示させること」
です。
Googleアドセンスのポリシーに反することなく、理想的な配置をAMP表示でも実現できるはずなので、参考にしてみてください。
アドセンス広告コードの取得と加工
■レスポンシブのアドセンス広告コードを、記事上、記事中、記事下用として３つ取得します。
例えば、記事上用のコードだったら、下記のように「記事上レスポンシブ」のように名前を付けておくと区別しやすいですね。
<!– 記事上レスポンシブ –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″
data-ad-format=”auto“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></pre>
■それぞれ、「”auto”」の記載を「”rectangle”」に書き換えます。
<!– 記事上レスポンシブ –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″
data-ad-format=”rectangle“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></pre>
こうすることで、常に読者の目に止まりやすいレクタングルタイプの広告が表示されることになり、クリック率の向上にも期待できます。
■続いて、AMP用として使うアドセンス広告コードを取得して、AMP対応に変換します。
ここでは設置例だけを記載しておりますので、プラグインのインストールや設定方法、AMP用コードへの変換方法については下記をご参照ください。
変換したコードは下記のようになります。
type=”adsense”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″>
</amp-ad></pre>
■次に、先ほどのレスポンシブコードと、このAMP用コードを組み合わせて、
と、
で挟みます。
完成形は下記のようになります。
<p style=”text-align: center;”>スポンサーリンク<br />
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 記事上レスポンシブ –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″
data-ad-format=”rectangle”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<amp-ad width=”300″ height=”250″
type=”adsense”
data-ad-client=”ca-pub-0000000000000000″
data-ad-slot=”1111111111″>
</amp-ad>
</p><br />
■これを、記事上用、記事中用、記事下用の３つ作り、メモ帳やフリーエディターにメモしておきましょう。
「Quick Adsense Mobile」にセットする
■プラグイン「Quick Adsense Mobile」をインストール＆有効化します。
■WordPress管理画面（ダッシュボード）のサイドメニューから、
［設定］⇒［Quick Adsense Mobile］
と進みます。
■表示画面で、デフォルトで入っているチェックを外しておきます。
■「Quicktag :」項目の、
[ Show Quicktag Buttons on the HTML Edit Post SubPanel ]
にチェックを入れます。
■「Adsense Codes」項目の「Ads on Post Body :」にある枠に、先ほど作成してメモしておいたアドセンス広告コードをコピペで設置します。
「Ads1 :」⇒ 記事上用
「Ads2 :」⇒ 記事中用
「Ads3 :」⇒ 記事下用
という感じです。
■設置が完了したら、画面左下の［変更を保存］をクリックして完了です。
記事へのアドセンス広告コードの設置方法
WordPressの記事投稿用エディター画面で、「テキスト」モードにすると下図のようにクイックタグが表示されています。
これらをクリックすることで、記事本文中の任意の場所にアドセンス広告を表示させることができます。
以前の記事では、記事上のアドセンス広告は「moreタグ」を使うことで表示させるようにしていました。
しかし、今回のセッティングでは、「moreタグ」を使うとAMP表示ができないみたいなんです。
なので、従来「moreタグ」を使っていた部分には「Ads1」で広告を表示させます。
これで、PCやモバイルの通常表示にはレスポンシブのレクタングル広告が、AMP表示ではAMP用の広告が、それぞれ表示されるようになります。
以前のように「スポンサーリンク」という文字だけが消え残って表示されるようなこともないはずです。
また何か気づいたことがあったら追記していきますが、まずはお試しくださいませ♪
その場合の対処法については、下記の記事が参考になるかもしれません。
コメントを残す