AMP対応したページにグーグルアドセンスの広告を表示させる方法

AMP対応したページにグーグルアドセンスの広告を表示させる方法
サイトやブログ運営においてAMPに対応させることでモバイルページの表示を高速化することが可能となり、訪問者に対して快適に利用してもらうことができます。

ただ表示が速くなる半面、AMPページの表示はCSSでカスタマイズされたデザインがはずれて簡素なページになってしまいます。
さらにワードプレスにおいてはウィジェットはもちろん、関連記事など一部プラグインで設置した機能もはずれてしまいます。
最大のデメリットはGoogle AdSense(グーグルアドセンス)の設置した広告が表示されなくなることです。

これだけの問題をかかえてまでわざわざモバイルページをAMPに対応させる必要があるのか?という疑問はあると思います。
そうは言っても現在はともかくこの先モバイルページのAMP対応はSEO的に関係ないともいえません。

それに私の場合はAMP対応してからモバイルページの訪問者数、訪問時間がグングンと上がってきたのを実感してます。
直接的な因果関係は定かではないですが、少なくとも「AMP対応したからページビューが下がった」という悪い結果は出ていないのでこのままいくことにしました。

今回はワードプレスをご利用されてる方に向けてAMPを適用したモバイルページにグーグルアドセンスの広告を表示させる方法をご紹介させていただきます。

AMPとは?AMPを適用させるには?

まず「AMPて何?」「どうやってサイトにAMP対応させるの?」と思われる方は先に下記内容をご覧ください。

モバイルページをAMP対応し高速表示させるプラグイン「AMP」

AMP対応

サイトやブログのモバイルページをAMP化することでデザインをシンプルにし高速表示を実現できます。
ワードプレスのプラグイン「AMP」をインストールすることで簡単にモバイルのAMP対応ページを生成することが可能となります。(19/02/02)
記事を読む

次項からは上記のワードプレスのプラグイン「AMP」をインストールしてモバイルページがAMP化されてる状態を前提に操作をご案内させていただきます。

AMP用アドセンス広告ユニットの作成手順

AMPのページでアドセンス広告を表示させるためにはスクリプトを設置し、AMP用アドセンス広告ユニットを作成する必要があります。

AMP用アドセンスのスクリプトの設置方法

まず最初に専用のスクリプトをAMP HTML内に貼り付ける操作を説明します。
ここで使用するファイルは通常のHTMLではなくAMP用のHTMLです。

例としてワードプレスにプラグイン「AMP」をインストールしてる場合は以下の場所になります。

グーグルアドセンスのAMPスクリプト設置管理画面の「プラグイン」→「プラグイン編集(Plugin Editor)」をクリックします。
次に右上の「編集するプラグインを選択」から「AMP」を選び「選択」をクリックします。
※「選択」も必ずクリックしてください

するとその下の「プラグインファイル」に「AMP」関連のファイルが表示されます。
その中の「templates」を開き、「html-start.php」をクリックします。こちらがスクリプトを設置するファイルになります。

AMP用アドセンススクリプトの設置表示されてるコードの中で<head>~</head>を見つけ、中に以下のコードを貼り付けます。

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

最後に「ファイルを更新」をクリックしてください。
これでスクリプトの設置は完了です。

AMP用アドセンス広告ユニットの作成方法

それではいよいよAMPで表示されるアドセンス広告ユニットの作成方法を説明させていただきます。
AMP用は通常の広告ユニットのコードを改良する形になります。

使用する広告ユニットは普段使っているものではなく、「AMP用」と名前をつけた新たな広告ユニットを作成することをおすすめします。
理由はアドセンス広告がクリックされ報酬が発生した場合、通常ページかAMPページかどちらの成果か区別をつけるためです。

AMP用アドセンス広告ユニットの作成方法まずはグーグルアドセンス管理画面で「AMP用~」などの名前をつけた広告ユニットを任意に作成します。
(広告ユニットの作成方法は通常と同じなので省略します。)
そして広告コードを取得する画面で以下の二カ所のID番号をメモ帳などにコピペしてください。

・data-ad-client=”ca-pub-1234567891234567
・data-ad-slot=”1234567890

「data-ad-client」はサイト運営者IDとなり、「data-ad-slot」は作成された広告ユニットIDになります。
つまりAMP用アドセンス広告は「誰の」「どの広告」を適用するか判別するためのID番号が必要ということです。

そして以下のコードの「data-ad-client」と「data-ad-slot」のマーキングされてる箇所を先ほどメモ帳にコピペしたあたなのIDにそれぞれ置き換えてください。

<amp-ad width=”100vw” height=320
type=”adsense”
data-ad-client=”ca-pub-1234567891234567
data-ad-slot=”1234567890
data-auto-format=”rspv”
data-full-width>
<div overflow></div>
</amp-ad>

非常に重要な箇所なので間違えのないように貼り付けましょう。

<amp-ad width=”100vw” height=320
type=”adsense”
data-ad-client=”ca-pub-あなたのID
data-ad-slot=”あなたの広告ユニットのID
data-auto-format=”rspv”
data-full-width>
<div overflow></div>
</amp-ad>

これでAMP用アドセンスコードが完成です。
お好みの位置に配置してご利用ください。

当然ですが、AMP対応したモバイルページのみ表示されます。

AMP対応したページで自動広告を表示させる方法

AMPにアドセンス広告を表示させるために「AMP用広告を作成するのが面倒臭い」「広告の位置は特に気にしないのでとにかく早く表示させたい」という方にはグーグルアドセンスのAMP対応の自動広告の設定方法をお伝えします。

自動広告はグーグルアドセンスに備わっている機能で特に広告ユニットを作成しなくてもランダムで最適な位置にアドセンス広告が表示されるようになっています。
ただ「最適」とはいうもののあくまで「自動」なので時には意図しない位置に挿入されることもあるのでご了承ください。

自動広告設定の適用とコードの取得

グーグルアドセンスAMP自動広告の設定まずグーグルアドセンスの管理画面を開き、メニューから「自動広告」「AMP自動広告」を選択します。
続いて「手順1」のスイッチをクリックしてONにします(右側へ)。

※「新しいフォーマットを自動的に取得する」のチェックは文字通り、AMPの新しいフォーマットが追加された時に自動的に取得するかどうかということなのでお好みでチェックしてください。

グーグルアドセンスのコード取得続いて「手順2」のスクリプトと「手順3」の広告コードをそれぞれ「コードをコピー」をクリックしてメモ帳などに貼り付けておいてください。

手順2のスクリプト

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

手順3の広告コード(●はご自身のサイトIDが表示されます)

<amp-auto-ads type="adsense"
              data-ad-client="ca-pub-●●●●●●●●●●●●">
</amp-auto-ads>

AMP用自動広告のスクリプトと広告コードの設置方法

ワードプレスプラグイン編集続いてワードプレス管理画面の「プラグイン」→「プラグイン編集(Plugin Editor)」をクリックします。
次に右上の「編集するプラグインを選択」から「AMP」を選び「選択」をクリックします。
※「選択」も必ずクリックしてください

するとその下の「プラグインファイル」に「AMP」関連のファイルが表示されます。
その中の「templates」を開き、「html-start.php」をクリックします。こちらがスクリプトと広告コードを設置するファイルになります。

AMP用アドセンス広告のスクリプトの設置方法表示されてるコードの中で<head>~</head>を見つけ、中に手順2のスクリプトを貼り付けます。
(上記画像では前項の自動広告以外の広告ユニットのスクリプトと併用しています。)

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

 

アドセンス広告コード続いて同ファイル内の<body>の下に手順3の広告コードを貼り付けます。

<amp-auto-ads type=”adsense”
data-ad-client=”ca-pub-●●●●●●●●●●●●”>
</amp-auto-ads>

最後に「ファイルを更新」をクリックしてください。

以上でAMP自動広告の設定が完了です。
この操作が終わって20分くらい経てばAMP対応したモバイルページに自動広告が表示されます。

ここまで読んでいただいて誠にありがとうございます。
「AMP対応アドセンス広告の作成」、「AMP自動広告の設定」いずれかを実行することであなたのサイトのAMP化されたモバイルページでもグーグルアドセンスの広告が表示されるようになります。

私のブログでもAMPのモバイルページからの方が広告のクリックが多い記事もあるので表示させないまま放置するのは非常にもったいないことです。

今回の記事が皆様のお役に立てればうれしく思います。







スポンサーリンク

考察TOPへ
HOMEへ

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください