「AMP」ページに「Google AdSense」を表示させてみた

技術情報

先日、WordPressの「Simplicity」テーマ内に、AMPデザインテンプレートの「Simp」を導入する方法をご紹介いたしました。

WordPressの「Simplicity」テーマ内にAMPデザインテンプレートの「Simp」を導入してみた

今回はAMPタグを用いて、「AMP」ページに「Google AdSense」を表示させる方法をご紹介いたします。

「AMP」ページ用の広告を作りコードを取得する

AMPページ用の広告を「Google AdSense」で作り、コードを取得します。

広告を作る

Google AdSense 「広告の設定」から「新しい広告ユニット」を押下

  1. 「広告の設定」を押下。
  2. 「新しい広告ユニット」を押下。

Google AdSense

  1. 名前:任意の名前を入力。
  2. 広告サイズ:「300px × 250px」のレクタングル広告を選択。
  3. 「保存してコードを取得」ボタンを押下。

コードを取得する

「保存してコードを取得」ボタンを押下すると、コードが表示されます。コードに記述されている「ca-pub-」の後に続く値と、「data-ad-slot」の「””」内にある値を控えておきます。

Google AdSense
「ca-pub-」と「data-ad-slot」の値を控える

以下は「300px × 250px」のレクタングル広告のコード例です。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AMPページ用広告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記コードの5行目の「ca-pub-」の後に続く値と、6行目にある「data-ad-slot」の「””」内にある値が必要な部分になります。

「AMP」ページでAdSenseを表示する際に使用するタグでは、横幅(width)と縦幅(height)を記述する必要があるので、値が明記されている広告ユニットが必要になります。

「amp-ad」タグを張り付けて広告を表示する

下記がAMP用のアドセンスタグになります。

<amp-ad width=300 height=200
    type="adsense"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxxxxxxxxxxxx">
</amp-ad>

上記コードに記述されている3行目の「ca-pub-」の後に続く値と、4行目にある「data-ad-slot」の「””」内にある値を「Google AdSense」で取得した値に差し替えます。また、widthとheightを「Google AdSense」で設定した広告と同じ値にします。

「amp-ad」タグの編集が終わった後、AMPページ用のファイルに広告を表示したい場所に貼りつけます。

「amp-ad」タグを張り付けた後に「AMP」ページにアクセスし、広告の表示が確認できれば終了です。広告の表示は多少時間がかかるので、待ちましょう。私の場合は1時間ほどで表示されました。

「Google AdSense」の広告が表示される
「Google AdSense」の広告が表示される

まとめ

  • AMPページ用の広告を「Google AdSense」で作り、コードを取得する。
  • 広告は横幅(width)と縦幅(height)が明記されているユニットを選択する。
  • 「amp-ad」タグで表示する場合、「ca-pub-」の後に続く値と、「data-ad-slot」の「””」内にある値が必要。

「AMP」ページ内での「Google AdSense」表示はコードを取得して、「amp-ad」タグを編集して張り付けるだけなので気軽にできます。

「AMP」ページで「Google AdSense」を表示してみたい、といった方は導入を検討してみてはいかがでしょうか。

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
PC ウェブログ

コメント