AMPページでGoogle Adsenseの記事内広告ユニットは使える？

記事内広告ユニットも他のユニットとコードはほぼ同じ

Google Adsenseの「記事内広告ユニット」は、ディスプレイ広告ユニットなどと違って、管理画面でAMP用のコードが提供されていません。

しかし、ユニット自体は別のものになっていますが、基本的にはディスプレイ広告ユニットなどの他の広告ユニットと同じなので、AMPページの広告コンポーネント「amp-ad」が使えるはずです。

通常広告コードの違いをチェックする

Google Adsenseの管理画面で「記事内広告ユニット」を作成すると、下記のようなコードが表示されます。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-XXXXXXXXXXXXXX"
     data-ad-slot="xxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

一方、ディスプレイ広告ユニットは、

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- cbn-topi-toc -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-XXXXXXXXXXXXXX"
     data-ad-slot="xxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

です。

大きく違う点はスタイルの違いと「data-ad-layout」と「data-ad-format」がある点です。

amp-adは「data-xxx」を設定可能なので、そちらを挿入します。また、amp-adではstyleはHTMLヘッダで「style amp-custom」として合算して指定する必要があるので、ユニットに個別にstyleが設定できないので、div要素などで囲ってスタイルを適用させます。

またレイアウトは「fluid」がamp-adでサポートされているので、fluidに指定すれば良さそうです。

amp-adコンポーネントを使って記事内広告ユニットを配置してみると・・・

ここまで見てきた違いを考慮した上で、amp-adを使ってGoogle Adsenseの記事内広告ユニットのコードを作成すると下記のようになります。

<div class="pagead">
  <amp-ad
       layout="fluid"
       type="adsense"
       data-ad-layout="in-article"
       data-ad-format="fluid"       
       data-ad-client="ca-pub-XXXXXXXXXXXXXX"
       data-ad-slot="xxxxxxxxx">
  </amp-ad>
</div>

この形式で記事内広告ユニットをAMPページに挿入してみると、広告が表示されません。

これは記事内広告ユニットがAMPに対応していないためと思われ、実際に広告選択画面でAMPマーク（稲妻マーク）が表示されていません。

Google Adsenseの広告選択画面で記事内広告ユニットにはAMPアイコンがない