WordPressでAMPにGoogle Adsenseを設置する方法

0

まずはそもそものAMP対応が未実施の場合は、以下の記事を参考にWordPressサイトをAMP化してください。

参考：WordPressサイトをAMP化する4つの手順まとめ

AMP（Accelerated Mobile Pages Project）は結構特殊でjavaScriptが制限されていたり、AMP HTMLを利用したりと通常のHTMLとは異なるルールが存在します。Google Adsenseも例外ではありません。通常Google Adsense用の広告コードはJSで発行されますので、その通りに貼り付けるとAMPのテストで余裕のエラーとなり表示もされません。

この手助けとなるのが以下のマニュアルページでしょう。

参考：AMP 広告ユニットを作成する ｜ AdSenseヘルプ
参考：amp-ad｜AMP公式

でもマニュアルとか見るの面倒くさいぞ！よくわからんぞ！端的に設置方法だけ教えて！という方の為に、AMPにGoogle Adsenseを設置する方法をご紹介しましょう。

AMPにGoogle Adsenseを設置する3Step

AMPにGoogle Adsenseを設置する方法は、理解してしまえば難しいものではありません。以下の3ステップで完了です。

  1. AMPにAdSenseを貼る為のライブラリを読み込む
  2. Google Adsenseにてレスポンシブの広告ユニットを作成する
  3. 任意の場所にAMP用の広告コードを設置する

それでは1つずつ見ていきましょう！

1.AMPにAdSenseを貼る為のライブラリを読み込む

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

AMPにAdSenseを設置する場合にamp-adライブラリを読み込む必要があります。headタグ内に上記の記述を追加します。もし上記のAMPプラグインを利用して、AMP化を行った方は「single.php」の「meta name=”viewport”~」の直下辺りに記述すれば大丈夫です。こんな感じですね。5行目が今回足したライブラリです。別にこの箇所が絶対ではないですが。

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
	<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

2.Google Adsenseにてレスポンシブの広告ユニットを作成する

Google Adsenseの「広告の設定」⇒「広告ユニット」から、レスポンシブ広告ユニットをAMP用に作成しましょう。2017年4月の現状は1ページに3箇所までという規定はもうなくなっている用ですが、私の場合はとりあえず3つの広告ユニットを作成にしました。

この後広告ユニットのコードを確認しましょう。以下のようなコードとなっているかと思います。AMPページでなければこの広告コードを貼るだけで完了ですが、AMPの場合はそういきません。amp-adタグを利用する必要があります。以下にある「data-ad-client」「data-ad-slot」の2箇所の情報をこの後に利用します。

ちなみに「data-ad-client」はサイトの運営者IDであり、ここはどの広告ユニットでも運営者が同じであれば不変です。
「data-ad-slot」は広告ユニット事に異なりますので、特に注意しましょう。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
     data-ad-slot="YYYYYYYYYYY"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3.任意の場所にAMP用の広告コードを設置する

次に自分の好きな箇所にAMP用の広告コードを設置していきましょう。Adsenseの公式ページでは以下のような注意点とおすすめ点の記述があります。

  • ファーストビューの時は高さ100pxにしろよ
  • ファーストビューじゃなきゃ300px × 250pxがおすすめだぜ

サイズは自分たちで好きに指定できますが今回は高さ100pxの場合、300px × 250pxの場合の広告コードのの設置方法をご紹介します。

高さ100pxのAMP用広告コードの設置方法

ファーストビューの場合には、以下の通りlayoutに「”fixed-height”」を指定し、heightに100を指定します。

そして「data-ad-client」「data-ad-slot」は、事前に作成した広告ユニットからコピペしましょう。

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

300px × 250pxのAMP用広告コードの設置方法

続いてファーストビューでなければ、300px × 250pxのAMP用広告コードを設置しましょう。layoutに「”responsive”」を指定し、widthに300、heightに100を指定します。

同じく「data-ad-client」「data-ad-slot」は、事前に作成した広告ユニットからコピペしましょう。「スポンサーリンク」の表記もあった方が良いと私は思います。

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

念の為AMPテストを実行しておくのがおすすめ

最終的に本当にAdsense広告が表示されるかを目視でチェックしますが、広告ユニット自体作成したばかりだと表示までに少し時間はかかりますのでご注意ください。

また最終的には1記事だけでもAMPテストを実行しておくことをおすすめします。

AMPテストページ｜Google公式

最終的以下のように「有効な AMP ページです」という結果になれば問題なしです。

以上でAMPページにAdsenseを設置することができました！っと。

スポンサーリンク

URL :
TRACKBACK URL :

コメントはこちらへ！

*
*
* (公開されません)