いわしブログのAMPページにGoogleアドセンスの関連コンテンツユニットを設置したので、その方法をご紹介します。
いわしブログでは、ブログテーマに「Cocoon」を利用しています。このテーマは無料とは思えないほど多機能で、AMPの対応もチェック一つで完了します。
Googleアドセンス広告の設置も、基本的にブログテーマ内の機能だけで完結しますが、AMPページで広告をカスタマイズする場合は、コードの修正等が必要になります。
関連コンテンツユニットの設置も同様で、そのままではAMPページで正しく表示されませんが、広告コードを修正してウィジェットを作成すると、ちゃんと表示されるようになります。
関連コンテンツユニットは収益性が高いと言われています。スマホアクセスの収益を向上させるなら、ぜひAMPページに関連コンテンツユニットを追加してください。
Cocoonに関連コンテンツユニットを設置する方法は以下を参照してください。
AMPページ向け広告コード修正
では、広告コードをAMPページで使えるように修正しましょう。ただし、関連コンテンツユニットは誰でも使えるわけではなく、PV数などの条件を満たしたサイトのみ使用可能になります。
「新しい広告ユニットの作成」に関連コンテンツがあれば設置可能です。
新たに関連コンテンツ広告を作成して、「保存してコードを取得」すると、こんな感じになると思います。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>このコードの5行目と6行目にある赤い部分「サイト運営者ID」と「広告ユニットID」をコピーしてください。
data-ad-client=”ca-pub-1234567890123456”
data-ad-slot=”1234567890”
続いてAMPページ用コード内のサイト運営者IDと、広告ユニットIDを自分のIDに変更します。
<amp-ad
layout="fixed-height"
height="800"
type="adsense"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890">
</amp-ad>上記の広告コードは自分のIDを入れると、そのまま利用できます。
ウィジェットに広告コードを追加
次に関連コンテンツユニットの広告コードをウィジェットに追加しましょう。Cocoonには独自のウィジェットがたくさん用意されているので、アドセンス広告を設置するときに便利です。
ダッシュボードの左メニューから「外観」→「ウィジェット」に進み、利用するウィジェットを選びます。広告は記事本文のすぐ下に配置するので「投稿本文下」に追加します。
カスタムHTMLのウィジェットを投稿本文下までドラッグ&ドロップします。
もしくは、ウィジェットを開いて位置を指定します。ここで広告のウィジェットを使うと、関連コンテンツが全て表示されないので、必ずカスタムHTMLを使ってください。
ウィジェットが開いたら、「内容」に広告コードを貼り付けます。広告ラベルを表示させたい場合は「タイトル」に入力しますが、関連コンテンツユニットは無しでも構いません。
この広告コードはAMPページ用なので、「表示設定」でAMPページだけ表示するようにします。
「ウィジェットの表示」を「チェック・入力したページで表示」に変更して、「ページ」のタグから「AMPページ」にチェックを入れて「保存」してください。
これで関連コンテンツユニットのウィジェットは、PC用とAMP用の2種類になりました。相互干渉しないように、PC用のウィジェットはAMPページで非表示に変更してください。
これでAMPページ用関連コンテンツユニットの設置は完了です。広告はすぐに配信されないので、しばらく空白になりますが、30分～1時間ほど待てば表示されるようになります。
関連コンテンツユニットのカスタマイズ
AMPページ用の関連コンテンツ広告は「fixed-height」で高さを固定し、heightで縦幅を「800」にしています。これで広告が2コマ、記事へのリンクが6コマの計8コマになります。
layout=”fixed-height”
height=”800”
関連コンテンツユニットで表示できる記事や広告の合計数は30までとなっています。heightの数値を変更して、好みのコンテンツ数にしてください。
広告コードを修正してもうまく表示されない場合は、Google Search Console のAMPテストにURLを入力してチェックしてみましょう。
Cocoon独自の機能として、ログインすると投稿ページ下部にGoogle AMPテストへのリンクが表示されます。各種AMPページのテストに便利ですよ。
エラーが出たら、コードのどこかが間違っています。AMP広告ではレスポンシブ用のタグが使えない場合もあるので注意してください。
あと、AMPページの構造上、すぐ外部のキャッシュに反映されるわけではないので、広告コードを修正した場合は、時間をおいてからチェックしてください。
関連コンテンツのサイト設定
アドセンスの管理画面から、関連コンテンツの詳細設定ができるようになりました。
左メニューの「サイト」→「コンテンツが一致」に進み、関連コンテンツのサイト設定に表示されているサイト名をクリックします。
ここで関連コンテンツの設定ができます。設定項目は「新しさ」「ブロックリスト」「優先コンテンツ」の3つで、各項目の「設定」をクリックすると設定が表示されます。
新しさ
関連コンテンツに表示される記事の新しさを指定します。期間は「期間指定なし」を選ぶと全期間の記事が対象になり、「新しい順」は新しい記事を優先して表示します。
サイトの記事数によって対象期間は変わり、トピックの類似性などを元に自動で最適化されます。
ブロックリスト
関連コンテンツに表示したくないページやサブドメイン、セクションをブロックします。
URLを追加する時は「このページだけをブロック」でURLが一致するページだけブロック、「このページと、このセクションやサブドメインに属するすべてのページをブロック」で、同じURLパスを使うページやサブドメイン全てをブロックします。
関連コンテンツ設定
優先コンテンツのリストに記事のURLを登録すると、関連コンテンツユニットで頻繁に記事を表示させることができます。
登録したURLが複数ある場合は、最低でもリスト内の1記事が表示されます。
関連コンテンツユニットの表示
関連コンテンツユニットがこんな感じでスマホのAMPページに広告が表示されたらOKです。あとは自分のブログに合わせてカスタマイズしてください。
コード内のheightを変更するとユニットの縦幅が変わり、広告と記事のコマ数を増減させることができます。好みの問題ですが、800 ～ 1000ぐらいが適当でしょうか。
関連コンテンツユニットの広告は収益性が高いと言われています。スマホのアクセスを全て収益化するなら、AMPページにも関連コンテンツユニットを追加してください。
以下のページでCocoonのカスタマイズ方法をいろいろ紹介しています。
