WebストーリーでAdSenseをプログラマティック広告として配信可能に

[レベル: 上級]

Web ストーリーで AdSense 広告を配信できるようになりました。
コードを貼り付けるだけでよく、広告専用のページを作成する必要はありません。

アド マネージャーと AdSense のプログラマティック広告を Web ストーリーで配信

Web ストーリーでの広告配信はすでに可能でした。
ただし、広告専用のページを作成する必要がありました。
<html ⚡4ads> タグで構成します。

一方、プログラマティック広告では広告用のコードを既存の Web ストーリー のコードに挿入するだけです。
どんな広告をどこに表示するかは自動で決定されます。

プログラマティック広告は次の 2 種類の広告がサポートします。

  • アド マネージャー
  • AdSense

まだベータ版ではありますが、一般公開されすべてのパブリッシャーが利用できます。

AdSense のプログラマティック広告設定

Web ストーリーで AdSense のプログラマティック広告を配信する手順は次のとおりです。

  1. AdSense のダッシュボードから [ディスプレイ広告] を作成する
  2. [広告サイズ] セクションでは [レスポンシブ] を選択する(デフォルトのまま)
  3. Web ストーリーの head セクションに次のコードを挿入する
    <script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
  4. 広告ユニットのコードを Web ストーリーに埋め込む
    <amp-story>
     <amp-story-auto-ads>
      <script type="application/json">
       {
        "ad-attributes": {
         "type": "adsense",
         "data-ad-client": "ca-pub-0000000000000000",
         "data-ad-slot": "00000000"
        }
       }
       </script>
      </amp-story-auto-ads>
     ...
    </amp-story>

    data-ad-clientdata-ad-slot の 0000000…… は自分の番号に置き換える

もっと詳細な手順はヘルプ記事で確認できます。
とはいえ、Web ストーリーをもう公開しているなら、ほんの少しコードを編集するだけです。
とてもシンプルです。

なお、今のところはディスプレイ広告のみをサポートします。

アド マネージャーでのプログラマティック広告の設定方法は、こちらのヘルプ記事を参照してください。

Web ストーリーで簡単に広告を配信できるようになったのは、特に広告収益を重要なビジネスモデルにしているパブリッシャーにとっては嬉しいニュースです。
AdSense にも対応したので、個人運営のメディアでも Web ストーリーでコンテンツを作るモチベーションに繋がりそうです。