[無料WordPressテーマ] CocoonのAMPページで横長のバナー広告をレスポンシブ表示する方法

2019/03/21WordPressテーマ

Cocoonの広告ウィジェットを利用してGoogle AdSenseの広告ユニットを設置すると、AMPページには自動でAMP用にタグ変換したコードを貼ってくれるという非常にすばらな機能がありますが、今回その広告ウィジェットを利用して横長のバナーを表示しようとしたところ、AMPページではレスポンシブレクタングル表示になってしまうという現象に遭遇しました。

調べてみるとどうやら現在のCocoonの仕様ではそうなるのが正解のようです。そこで当エントリーではCocoonのAMPページに横長のバナー広告をレスポンシブ表示する方法について調べてみました。

コンテンツ

1. 現在のCocoonの仕様
2. カスタムHTMLウィジェットを使う
- 2.1. AMPページに表示するウィジェットの設定
3. AMPページで横長バナーをレスポンシブ表示する方法でした

現在のCocoonの仕様

これは元々AMPページで広告ユニット（と言うか画像？）にサイズが設定されていないとAMPエラーになってしまうのを防ぐ為だったと思いますが、Cocoonではその対策としてウィジェットに貼られたコードと広告フォーマットからamp-adタグにメディアクエリを使用して広告サイズをセットするという処理を行っているようです。

その結果、data-ad-format="horizontal"にしていても広告フォーマットをバナーにしていてもAMPページではレスポンシブレクタングルに変換されてしまうんですね…これが。

Cocoonのソースを追ってみましたが、関連コンテンツユニットとリンク広告ユニット以外は全てレクタングルかレスポンシブレクタングルになる感じでした。

メインカラムに貼る広告なら私もこの自動変換の仕様にお任せするんですが、今回はどうしても横長のバナーで広告を表示させる必要があったので、このCocoonの自動変換機能を使用しないで自分でAMP用のレスポンシブ広告コードを書くしか方法は無さそうでした。

カスタムHTMLウィジェットを使う

とは言うものの、自分でAMP用のレスポンシブ広告コードを書いたところで自動変換されちゃうんですよね…これ一体どうすりゃいいのよ？とか思ってたら、広告ウィジェットを使わずに普通のカスタムHTMLウィジェットを使えばいい事に気が付きました。

AMPページに表示するウィジェットの設定

私が今回使いたいのは高さ100px固定のバナー広告なのでコードはこんな感じになります。

幅が可変で高さが固定のAMP広告

<amp-ad
   layout="fixed-height"
   height="100"
   type="adsense"
   data-ad-client="ca-pub-1234567891234567"
   data-ad-slot="1234567890">
</amp-ad>

参考レスポンシブ AMP 広告コードを修正する方法 – AdSense ヘルプ

AdSenseのヘルプページのコードはwidthやheightの値を""で括ってないのが微妙に気になりますが一応ちゃんと効いてるようです…私は心配なのでつけておこうと思いますけど。

このコードをカスタムHTMLウィジェットにコピペして、data-ad-clientとdata-ad-slotの内容を自分のIDに置き換えればOKです。

AMPページだけに表示するにはウィジェットの一番下にある表示設定をクリックし、プルダウンメニューからチェック・入力したページで表示を選択、ページタブの一番下にあるAMPページにチェックを入れます。もちろん保存するのを忘れないで下さいね？