AMPプラグインでAMP対応したサイトにGoogleアドセンスのAMP自動広告を設置する方法

AMPプラグインでAMP対応したサイトにGoogleアドセンスのAMP自動広告を設置する方法

AMPプラグインでAMP対応したサイトにGoogleアドセンスのAMP自動広告を設置する方法

WordPressサイトでは、AMPプラグインを使えば簡単にAMP対応することが可能です。ただ、AMPプラグインでAMP対応した場合、AMP対応ページは非常にシンプルな構造になるため、Googleアドセンスの広告は出力されなくなります。

AMP対応したことでアクセスが増えたとしても、AMPページに広告が表示されていないと収益は増えませんね。

そこで今回は、AMPプラグインを使ってAMP対応したページに、GoogleアドセンスのAMP自動広告を設置する方法をご紹介いたします。

GoogleアドセンスでAMP自動広告を有効化

事前準備として、GoogleアドセンスのAMP自動広告を有効化しておく必要があります。

Googleアドセンスにログインして、[広告] – [自動広告]にアクセスします。[AMP自動広告]のタブに移動して、「ステップ 1: ディスプレイ広告フォーマットをオンにします」のチェックをオンにします。

AMP自動広告

これでAMP自動広告の有効化ができました。「手順2」と「手順3」に書かれているコードは後ほど必要になるので、この画面は開いたままにしておきましょう。

AMPページにAMP自動広告のコードを設置

AMPページにAMP自動広告を設置するには、AMPプラグインのテンプレートファイルを編集して設置します。

FTPで「/wp-content/plugins/amp/templates」にアクセスして、html-start.phpをダウンロードします。

ダウンロードしたhtml-start.phpの<head>~</head>内に、「手順 2: このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます」に書かれているスクリプトを貼り付けます。

こんな感じです↓

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

さらに、「手順 3: この広告コードをコピーして、AMP HTML の本文に貼り付けます」に書かれているコードをhtml-start.phpの<body>のすぐ下に貼り付けます。

こんな感じです↓

<body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>">
<amp-auto-ads type="adsense"
              data-ad-client="ca-pub-1234567890123456">
</amp-auto-ads>

続いて、適用しているテーマのディレクリに「amp」というフォルダを作成して、編集したhtml-start.phpをアップロードします。

例えばTwenty Nineteenを使っている場合は、「/wp-content/themes/twentynineteen/amp」にhtml-start.phpをアップロードしましょう。

編集したhtml-start.phpは、そのままAMPプラグインのtemplatesフォルダにアップデートしても構いません。ただ、その場合はAMPプラグインを更新すると、変更したファイルが上書きされてしまいます。

AMPプラグインでは、テーマディレクトリ内にampフォルダがある場合、テーマディレクトリ内のファイルを読み込むようになります。テーマ側に編集したテンプレートファイルを設置することによって、AMPプラグインを更新してもファイルが上書きされずに済みます。

この辺りはよく考えられた作りになっていますね。

あとがき

AMP自動広告のコードを設置してもすぐに広告が表示され始めるわけではありません。Googleのキャッシュサーバー上で表示されるというAMPの仕様上、実際に広告が表示されるまではしばらく時間がかかります。気長に待ちましょう。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です