はじめに
amp-storyで作成されたページを収益化するにはどうすればいいのか考えてみた
気をつけること
amp-storyを使うとbodyの直接の子要素は、amp-storyタグのみになるので、amp-story外にdivなどをおいてGoogle AdSenseの広告を設置するなどはしてはいけない。
タグ自体はかいても表示はされるが、バリデータを通すとエラーになるため、ampの恩恵を受けれなくなる。
また、amp-story-pageamp-story-grid-layer の中にamp-ad の使用は許されていないので、通常のページのようにバナー広告を出すことは基本的にはできない。
amp-story-auto-ads を使う方法
amp-adが使えない代わりに、amp-story-auto-ads というコンポーネントが用意されている。ただ、広告もストーリーと同じで一ページ分でデザインされたものを挿入しなくてはならない。Google AdSenseで使用している広告ユニットなどでは現在はまだ非対応になっており、実現するにはAdマネージャーを使用して広告を作る、もしくは、スポンサーの広告を表示する必要がある
関連ドキュメント
上記のドキュメント類を読んでいると、まだまだ試験段階というか、コンポーネントのリンクを間違えていたり（2018/12/18現在）、examplesのデモを開いても正しくページが動作してなかったりと散々な状態だったりする。
やり方としては、
- adマネージャーでカスタムクリエイティブを使って広告を入稿
- 広告ユニットを作成
- タグを作成して、ユニットIDを調べる
- amp-storyにad用のJSONを足す
という流れ。
adマネージャーを使って今のところあまりメリットを感じない。というのも、amp-story-auto-adでは下の図のように、ストーリの途中で広告用ページが挿入される。挿入される場所は、2ページ目以降〜から最後のページ前まで。一応、広告を表示したくないページ間はoptionで指定できるらしいが、ストーリーは流れがあってのストーリーなので、いいのだろうか、という疑問がある。
YouTubeの動画のように途中で広告が入るのは、割りとストレスのたまることなので、考慮しないといけないだろう。ただ、海外ではニュース配信いストーリーを使用している例があるらしい。ニュースのリストのような形で使う場合には、途中で広告が入っても違和感なく行えるのかもしれない
当サイトのような個人サイトではあまりメリットはないかもしれない。スポンサーがあるサイトや、自社製品をストーリで広告したい場合などは、ドキュメント類に方法例が記載されているので試してみる価値はあるかもしれない。
テキストリンクを使う
では、個人サイトやブログでストーリーを使った場合の収益化はどうすればいいだろうか？ ほかのページでは出せるGoogle AdSenseなどのバナー広告が出せない分、収益化を行いたいのであれば、テキストリンクなどで誘導するしかない
当サイトでは、Amazonアソシエイトに参加しているので、ブログで書こうと思っていた「ぶんぶんチョッパー」を試験的にamp-storyとして作成し、最後のページとブックエンドにアソシエイトのテキストリンクを設置した。
amp-storyではstory-page内ではaタグの使用は許可されていないが、amp-story-cta-layerを使えばaタグもしくはbuttonタグが使えるようになるので、それを併用することで実現することができる。amp-cacheページからのアクセスも計測できていたので問題ないだろう。
最後に
storyだと画像が中心になるので、テキストが少なくなる。ただ、画面いっぱいに領域が広がるので、没入感は普通のブログよりも高い。ビジュアルで訴えやすいもの（料理や道具）を紹介する場合は、選択肢の一つとして考えていいのではないだろうか。