CocoonのAMPページに関連コンテンツユニットを設置する

スポンサーリンク
スポンサーリンク

Cocoon 関連コンテンツAMP

いわしブログのAMPページにGoogleアドセンスの関連コンテンツユニットを設置したので、その方法をご紹介します。

いわしブログでは、ブログテーマに「Cocoon」を利用しています。このテーマは無料とは思えないほど多機能で、AMPの対応もチェック一つで完了します。

Googleアドセンス広告の設置も、基本的にブログテーマ内の機能だけで完結しますが、AMPページで広告をカスタマイズする場合は、コードの修正等が必要になります。

関連コンテンツユニットの設置も同様で、そのままではAMPページで正しく表示されませんが、広告コードを修正してウィジェットを作成すると、ちゃんと表示されるようになります。

関連コンテンツユニットは収益性が高いと言われています。スマホアクセスの収益を向上させるなら、ぜひAMPページに関連コンテンツユニットを追加してください。

Cocoonに関連コンテンツユニットを設置する方法は以下を参照してください。

Cocoon 関連コンテンツユニットの設置方法
ブログテーマ「Cocoon」に、Googleアドセンスの広告ユニット「関連コンテンツユニット」を設置する方法です。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ページ」にチェックを入れて「保存」してください。

AMPページで広告表示

これで関連コンテンツユニットのウィジェットは、PC用とAMP用の2種類になりました。相互干渉しないように、PC用のウィジェットはAMPページで非表示に変更してください。

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を入力してチェックしてみましょう。

AMP テスト - Google Search Console

Cocoon独自の機能として、ログインすると投稿ページ下部にGoogle AMPテストへのリンクが表示されます。各種AMPページのテストに便利ですよ。

Cocoon AMPテスト

エラーが出たら、コードのどこかが間違っています。AMP広告ではレスポンシブ用のタグが使えない場合もあるので注意してください。

AMPテスト

あと、AMPページの構造上、すぐ外部のキャッシュに反映されるわけではないので、広告コードを修正した場合は、時間をおいてからチェックしてください。

関連コンテンツユニットの表示

関連コンテンツユニットがこんな感じでスマホのAMPページに広告が表示されたらOKです。あとは自分のブログに合わせてカスタマイズしてください。

AMPページ関連コンテンツ

コード内のheightを変更するとユニットの縦幅が変わり、広告と記事のコマ数を増減させることができます。好みの問題ですが、800 ~ 1000ぐらいが適当でしょうか。

関連コンテンツユニットの広告は収益性が高いと言われています。スマホのアクセスを全て収益化するなら、AMPページにも関連コンテンツユニットを追加してください。

以下のページでCocoonのカスタマイズ方法をいろいろ紹介しています。

ブログテーマ Cocoonの使い方とカスタマイズ
いわしブログで利用中のブログテーマ「Cocoon」の記事一覧です。このテーマは無料とは思えないほど多機能で、SEO・ページ表示の高速化・モバイルフレンドリー。アドセンス広告追加といった機能はもちろん、AMPの対応もチェック一つで完了します。
タイトルとURLをコピーしました