【WordPress】AMPページにアドセンス広告を入れる方法【AdSense】

モバイルサイトの超高速化を実現するAMP。

モバイルサイトを高速化することはできても、
そこに広告を埋め込めなければ、
広告収入を目的にブログを書いている人にとっては導入ができません。

そこで、
Google AdSenseの広告をAMPページに導入する方法について解説します。

なお、
WordPressサイトのAMP化方法については、

【超高速化】WordPressサイトのAMP化方法を解説【賛否あれど】

をご参照ください。

手順をまとめると

1.AMPスクリプトをAMPページに埋め込む
2.AMP広告ユニットをつくる
3.AMP広告をAMPページに埋め込む

の3ステップです。

公式ガイダンス

AdSenseヘルプページに、

AMP 対応広告ユニットの作成方法

というページがあります。

このページを参考にしながら、
AMPページへのAdSense広告の挿入方法を解説します。

ステップ1： AMPスクリプトを追加

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

こちらのコードをAMPページのhead内に埋め込みます。

「プラグイン」 > 「プラグイン編集」

「AMP」 > 「選択」

「templates」

「html-start.php」

このファイルに、
AMPスクリプトを埋め込みます。

「ファイルを更新」をクリックして、
ステップ1は終了です。

ステップ2: AMP広告ユニットを作成

Google AdSenseのホームへいきます。

Google AdSense

「広告の設定」 > 「広告ユニット」

「＋新しい広告ユニット」

作成する広告の種類を選択してください

「記事内広告」が一般的には使いやすいと思います。

「保存してコードを取得」

広告ユニットの名前だけは入力しましょう。

コードが表示されますので、
コピーしておきましょう。

ステップ2はこれで終了です。

ステップ3: AMP広告ユニットを貼り付け

最後に、
先ほどコピーしたコードをAMP内に埋め込みます。

「プラグイン」 > 「プラグイン編集」

「AMP」 > 「選択」

「templates」

single.php

ここに先ほどコピーしたコードを貼り付けます。
貼り付ける場所はあなたの広告を表示したい場所でけっこうです。

よくわからないという方は、
私が利用しているsingle.phpを掲載しますので、

「data-ad-client」と「data-ad-slot」

部分をあなたの広告ユニットに置き換えてご利用ください。

<?php
/**
 * Single view template.
 *
 * @package AMP
 */

/**
 * Context.
 *
 * @var AMP_Post_Template $this
 */

$this->load_parts( array( 'html-start' ) );
?>

<?php $this->load_parts( array( 'header' ) ); ?>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
	 style="display:block; text-align:center;"
	 data-ad-layout="in-article"
	 data-ad-format="fluid"
	 data-ad-client="ca-pub-ここはあなたのものをご利用ください"
	 data-ad-slot="ここはあなたのものをご利用ください"></ins>
<script>
	(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<article class="amp-wp-article">
	<header class="amp-wp-article-header">
		<h1 class="amp-wp-title"><?php echo esc_html( $this->get( 'post_title' ) ); ?></h1>
		<?php $this->load_parts( apply_filters( 'amp_post_article_header_meta', array( 'meta-author', 'meta-time' ) ) ); ?>
	</header>

	<?php $this->load_parts( array( 'featured-image' ) ); ?>

	<div class="amp-wp-article-content">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<ins class="adsbygoogle"
			 style="display:block; text-align:center;"
			 data-ad-layout="in-article"
			 data-ad-format="fluid"
			 data-ad-client="ca-pub-ここはあなたのものをご利用ください"
			 data-ad-slot="ここはあなたのものをご利用ください"></ins>
		<script>
			 (adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		<?php echo $this->get( 'post_amp_content' ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?>
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<ins class="adsbygoogle"
			 style="display:block; text-align:center;"
			 data-ad-layout="in-article"
			 data-ad-format="fluid"
			 data-ad-client="ca-pub-ここはあなたのものをご利用ください"
			 data-ad-slot="ここはあなたのものをご利用ください"></ins>
		<script>
			 (adsbygoogle = window.adsbygoogle || []).push({});
		</script>
	</div>

	<footer class="amp-wp-article-footer">
		<?php $this->load_parts( apply_filters( 'amp_post_article_footer_meta', array( 'meta-taxonomy', 'meta-comments-link' ) ) ); ?>
	</footer>
</article>

<?php $this->load_parts( array( 'footer' ) ); ?>

<?php
$this->load_parts( array( 'html-end' ) );

これでステップ3も終了です。

広告表示の確認

あなたのブログの特定ページのURL末尾に

「/amp」

をつけて表示を確認してみましょう。

こんな風にヘッダー部分とフッター部分に広告が表示されて入ればオッケーです。

さいごに

どうでしたか？

AMPページに広告挿入ができたでしょうか？

AMP以外のページへの広告挿入に比べ、
挿入位置などは柔軟性がありません。

ただ、
毎日多数の記事を投稿するニュースサイトなどは、
AMP化の必要性が高いです。

是非とも広告が挿入できないという理由で、
AMP対応を怠らないでください。

カテゴリー: プログラミング

執筆者: みーぷー