ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

AMPページ用のAdSense リンクユニットのコード作成設定方法

AMPページ用のAdSense リンクユニットのコード作成設定方法

AdSense リンクユニットは、AMPページにも対応しています。AMPページ用の広告ユニットは、通常の広告ユニットのコードを元に作成します。リンクユニットも通常の広告ユニットと同様にAMP用のコードを作成して掲載することができます。

AMPページ用のAdSense リンクユニットの作成手順

Googleは、レスポンシブユニットを使用することを推奨しています。通常ページ用のレスポンシブ リンクユニットを作成し、AMPページ用のコードを作成、設置を行います。以下、手順を紹介します。

広告ユニット表示用のAMP スクリプトの設置

AMPページの<head>タグ内に以下のコードを設置します。

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

このスクリプトは、amp-adの必要なライブラリーをロードする機能です。AMPページで既にAdSenseの広告を掲載されている場合、既に設置済みとなっています。

amp-adについて、詳しくはAMPのドキュメント をご覧下さい。

新たにAMP用のレスポンシブの広告ユニットを作成する

新しく、レスポンシブのAdSense リンクユニットを作成し、コードを入手します。リンクユニットの作成方法は、以下の記事をご参照下さい。

AdSense リンクユニットの特徴と作成・設置の仕方

リンクユニットのコードは以下の様な形式になっています。

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– AMP リンクユニット –>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-1234567890123456
data-ad-slot=”1234567890
data-ad-format=”link”></ins>;
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

AMP用の広告コードを作成するためには、上のコード内のパブリッシャー(運営者)IDと広告ユニットIDを使用します。

AMP レスポンシブ リンクユニットのコード作成

作成したレスポンシブ広告ユニットの運営者IDと広告ユニットを、以下のコードの該当部に差し替えます。

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

上記コードは、幅300、縦250の基本サイズ(縦横比として使われます)でレスポンシブで表示する設定です。お好みに合わせて、サイズを調整します。ページ内のリンクユニットのサイズ別表示例を以下に紹介します。

上のコードをコピーして、AMPページ内のリンクユニットを設置します。設置は、AMP化している方法などによってやり方が異なります。

AMP ページでの広告コード設置方法

AMP ページでの広告コードの設置方法は、AMP化の方法によって異なります。以下は、プラグイン AMP for WordPressを使用してAMP化したサイトにAd Inserterを使用して、AMPページ内に広告コードを挿入する方法を紹介した記事です。

プラグイン Ad Inserterを使用してAMPページに広告を挿入する方法

レスポンシブ AMP リンクユニットのモバイル端末での表示例

AMPページを表示して、設置したリンクユニットが適切に表示されるか確認します。

レスポンシブレイアウト、300×250の設定での表示例

幅300、縦250でレイアウトをレスポンシブに設定した場合の表示例です。画面の幅に合わせて大きくなって表示されます。

レスポンシブ AMP リンクユニット表示例

レスポンシブレイアウト、300×150の設定での表示例

上の表示では少し大きすぎる(縦が長すぎる)と思う場合は、縦のサイズを小さくします。以下では、縦を150に変更しています。

<amp-ad
layout=”responsive”
width=300
height=150
type=”adsense”
data-ad-client=”ca-pub-1234567891234567″
data-ad-slot=”1234567890″>
</amp-ad>

上記コードの表示例です。

レスポンシブ AMP リンクユニットの表示例 (300x150)

サイズを変更して、実際に表示してみて、ページ内の他のコンテンツと調和し程良いと思われる大きさにします。異なるサイズでA/Bテストを行なって、収益パフォーマンスの比較を行なってみるのも一案だと思います。AMPページ専用の広告ユニットで作成していれば、パフォーマンスレポートで収益の各指標を簡単に確認することができます。

リンクユニットは、サイトによっては意外なほど収益パフォーマンスが良い場合があります。通常ページで、リンクユニットを使用していて、パフォーマンスが良い場合は、AMPでもリンクユニットを試してみることをお勧め致します。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top