AMP導入でアドセンスが非表示に・・ AMPページ用アドセンスを表示させる方法!

AMP導入でアドセンスが非表示に・・ AMPページ用アドセンスを表示させる方法! - Mechalog

前回の記事でAMPの導入からアナリティクスの設定手順までを紹介しました。

関連記事 : 【WordPress】これでわかった!AMPの導入とアナリティクス対応手順

AMPはモバイルページの高速化を図るためにGoogleやTwitterが参加している最新プロジェクトで、AMPを導入することでAMPページがインデックスされやすくなるというもの。WordPressの場合、プラグインを有効化するだけで導入できますが、デフォルトのままでは従来のアドセンスが表示されません。

SPONSORED LINK

目次

  1. アドセンスをAMPページに設定
  2. コードの追記について
  3. まとめ

せっかくPVが増加してもアドセンスが表示されないのならアフィリエイトで生計を立てている人は真っ青になってしまいますよね。早急な対処が必要です。

ここはAMPページにもアドセンスをしっかり対応させておきたいところです。ということで、今回はAMPページにアドセンスを設定する手順を設定しますのでその様子を紹介したいと思います。

アドセンスをAMPページに設定

これについてはアドセンスのヘルプページにて解説されているので、確認してみましょう。

 Accelerated Mobile Pages(AMP)は、高速表示されるコンテンツ ページを作成することでユーザーのモバイルウェブ体験の向上を目指すオープンソース プロジェクトです。AMP ページに AdSense 広告を掲載するお客様は、このガイドで AMP 対応の広告ユニットの作成方法をご確認ください。

AMP ページは AMP HTML で作成します。AMP HTML は標準の HTML に似ていますが、パフォーマンスの信頼性に一定の制約があり、リッチ コンテンツを作成できる、簡易 HTML 以上の拡張機能を備えています。そのため、AMP 広告ユニットには通常の AdSense タグとは異なる独自のタグが必要になります。


出典 : AMP 広告ユニットを作成する | AdSenseヘルプ

このように、AMPはモバイルページ高速化のために従来のHTMLではなく、AMP HTMLという特殊な基準で作成されているとのことです。そのため通常のHTMLへの出力のために設定されたアドセンスは表示されないことになります。

スクリプトをAMP HTMLに追加

さきほどのアドセンスヘルプを見ると、スクリプトについてこのように書いてあります。このスクリプトを設定することでAMP用アドセンスが読み込まれ表示されるとのこと。

<head>要素内に記述すればいいみたいです。

AMP HTML の <head> と </head> タグの間に記述されている以下のコードをコピーして貼り付けます。

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

ですが、これだけではどこに追加していいのか私のような素人同然のユーザーからしたらまったくもってわかりません。

これについては少し戸惑いましたが、すぐに解決しました。AMP内の「amp/templates/single.php」です。といってもわかりづらいかもしれませんが、AMPのファイル編集はWordPressのダッシュボード操作で行うことができます。

左メニューから「プラグイン」→「インストール済みプラグイン」を選択。プラグイン一覧からAMPを探し、「編集」を選択します。

【WordPress】AMPを編集

テーマ編集からファイルを編集するような画面に切り替わります。

AMP - プラグインファイル一覧

この中から「amp/templates/single.php」を探して選択。<head>内の「<meta charset=”utf-8″>」真下に先ほどのスクリプトコードを貼り付けて更新します。

念のためエラーが出てないのか確認しておきましょう。問題なければAMP用アドセンスを表示させるためのスクリプト準備は完了です。

新しい広告ユニットを作成

続いて任意の場所にAMP用アドセンスを表示させるための記述といきたいところですがAMPにアドセンスを設定する場合、従来の広告ユニットではなく新規にAMP用の広告ユニットを作成する必要があります。気になる広告サイズの方は、AMPについて言及しているアドセンスヘルプを見るとレスポンシブ広告の作成を推奨しているような感じですので今回は当サイトもレスポンシブ広告AMP用広告ユニットを作成したいと思います。

まずはアドセンスのアカウントページにログイン。コンテンツの広告ユニットページから「新しい広告ユニット」を選択します。

「新しい広告ユニット」を選択 - アドセンス

レスポンシブのサイズを選択し、広告ユニットを新規作成します。広告ユニットの名前は「通常アドセンスの広告ユニット名+AMP」としておけばパフォーマンスの確認時などにわかりやすいかと。

広告ユニットの作成 - アドセンス

AMP用の広告ユニットができたら、以下の画面をそのまま表示させておくなりいったんメモ帳などにコピペして控えるなどしておきます。

AMP用アドセンスコードを取得

AMP用の表示コードを作るさいに必要なのが以下の2つの値です。

ca-pub-xxxxxxxxxxxxxxxx
date-ad-slot=”xxxxxxxxxx“」

「ca-pub-xx…」は固定ですが、「date-ad-slot=”xx…」は作成する広告ユニットによって違うので設定するさいは間違えないように気を付けましょう。

コードは2種類

スクリプトの設定とAMP用アドセンスの準備ができて、これでようやく任意の場所にAMP用アドセンスを表示させるためのコード設定をすることができます。

AMP用アドセンスの広告ユニットは表示場所によって2種類のコードがあります。「スクロールせずに見える範囲」と「スクロールしなければ見えない範囲」です。

「スクロールせずに見える範囲」というのは、ファーストビューのことでしょう。ユーザーが記事に訪問した時に目にする最上部の位置です。ここにAMP用アドセンスを設定する場合は、「スクロールせずに見える範囲」。

▼スクロールせずに見える範囲 (高さ100px)

<amp-ad
layout=”fixed-height”
height=100
type=”adsense”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxx”>
</amp-ad>

それに対し記事中や記事下部に表示させるAMP用アドセンスは「スクロールしなければ見えない範囲」になります。今回は記事中に設定するので、「スクロールしなければ見えない範囲」のコードを選択します。

▼スクロールしなければ見えない範囲 (レスポンシブ… 幅300px 高250px)

<amp-ad
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxx”>
</amp-ad>

この「xxxxxxxx..」の部分を先ほどAMP用で作成した広告ユニットの値にそれぞれ置きかえます。これを通常のテーマ編集操作で広告を表示させたい任意の場所にコードを追記すればOKです。

コードの追記について

さきほどのコードの追記場所は例えば、モバイルの通常ページと同じ場所にAMP用アドセンスを表示させたいのであれば通常アドセンスと同じ場所に追記することでAMPページにもアドセンスを表示させることができます。

このような感じで通常のアドセンスコードの真下に追記すればOKです。

//↓通常アドセンスコード
……
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
//AMP用アドセンスコード
<amp-ad
layout=”responsive”
width=300
height=250
type=”adsense”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxx”>
</amp-ad>

当サイトは記事内にショートコードを設定していますが、その場合も通常のアドセンスコードの隣にAMP用アドセンスコードを追記するだけで問題なく作動します。

ちなみにショートコードというのは、2008年以降のWordPressに備わっている機能で「functions.php」にショートコードの関数を予め指定することで短いショートコード名を書くだけで動作してくれるというもの。

関連記事 : 「WordPress」ショートコードとは?記事中にアドセンスを設置する

例えば[sc]というショートコード名に「functions.php」からアドセンスコードを設定しておけば記事内の任意の場所に[sc]と入力するだけでアドセンスを表示させることができるという仕組みです。

記事内に3つアドセンスを設置したいとしましょう。この場合は[sc][sc2][sc3]と3つのショートコード名にアドセンスコードを予め設定することで表示させたい場所にそれぞれ表示させることができるという大変便利なものです。

このショートコードでもAMP用アドセンスのコードを設定することができるので、設定している場合はやってみるといいかもしれません。

通常のレスポンシブ広告(300×250)をAMPの同ページ内に3つ設置したのですが、上の広告だけが表示され他の広告は読み込みが遅かったり表示されないことがありました。広告の設置で読み込みが遅くなってはAMPの意味があまりないような気がしますのでレクタングルサイズは同ページ内に1つ、または2つまでがいいのかもしれません。

また、リンクユニットや関連コンテンツであればそれほど遅延することなく表示されました。ちなみにAMP設置の関連コンテンツの同サイトへのリンク先はAMPページではなく通常ページになるようです。

表示されない

他にも色々試してみましたが、ウィジェットからのAMP用アドセンスは設定することができないようです。そのうちWordPressがアップデートされウィジェットからAMP用アドセンスが設定できるようになるかもしれませんが、現状では表示されないようでした。

まとめ

AMP用アドセンスを設定した数時間後、アドセンスの「広告ユニット」を確認するとAMPの設定からまだ2、3日しか経っていませんが既にPV全体の1割ほどがAMPページのPVになっているとAMP用アドセンスの広告表示回数から推測できました。

まだ一部のインデックスで1割のPVですから、今度はもっとAMPページのPVの割合が多くなるかもしれません。このようにAMPページは思っているよりも需要がありそうなので、AMPを有効化したらアドセンスの設定は一日でも早く済ませておいた方がいいといえるでしょう。


SPONSORED LINK



この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでMechalogをフォローしよう!



トップへ戻る