皆様、こんにちは。
先日GoogleAdSenseの管理画面を見ていたら、「インフィード広告」のベータプログラムに選ばれました！という通知がきていました。
どうやら新しい種類の広告みたいです。このあたりの知識はあまりなかったのですが、せっかくの機会ということで色々試してみました。今はベータ版とのことですが、後々正式にリリースされると思いますので、試した結果や感想などについて書き残しておきたいと思います。
※ブログ要素中心なのでご了承ください。
インフィード広告とは？
まずインフィード広告って何やねんって話から軽く書いておきますか。
アドセンスのヘルプに載っている記載をそのまま引用させて貰うと以下のような感じです。
インフィード広告は、フィード内に広告を掲載してサイトの収益化とユーザー エクスペリエンスの向上を促進する、新しいフォーマットの広告です。
そもそもフィードって何やねんってのも載ってましたので引用。
フィードとは、スクロール可能な一連のコンテンツのことです。コンテンツは、デザインやスタイルがよく似たブロック状のスペースに連続して表示されます。フィードの例としては、編集コンテンツ（例: 記事やニュースの一覧）やリスティング（例: 商品やサービスなどの情報一覧）があります。
特にスマホなんかだとニュースサイトとかを見ると、記事が連続して同じデザインで並んでいたりしますよね。あれがフィードです。その中にニュースと思わせといて「実は広告でした！」って置いてあるのがインフィード広告ということになります。
同じデザインで紛れ込ませることによって、クリックする効果が上がり、ユーザにとっても違和感が少ないとのこと。でも「記事と思ったら広告かい！」って思われそうですけどね。まぁその辺は今回は置いといて。
アドセンスのインフィード広告ユニット詳細
インフィード広告の種類
それではGoogleAdSenseで使えるインフィード広告にはどんなものがあるかについて説明します。
まず管理画面から新しい広告の作成をしようとすると「インフィード広告」ってのが追加されています。ここをクリックすると4種類から選べます。
まず「上部の画像」がこちら。上に写真があって、下に文章があるようなフォーマットになっています。
2つ目は「横の画像」です。左に画像があって、右にタイトルと説明があるタイプ。ブログだとサイドバーにありそうなタイプですね。
次は「上部のタイトル」です。これは画像が左にあるのは先ほどと一緒ですが、タイトルが上に来ています。ブログだとトップページの記事一覧なんかが当てはまりそうです。
最後は「テキストのみ」です。あまりこのタイプはブログでは見ないかもしれません。
作成する際のポイント
では作成方法とそのポイントです。
広告作成画面は以下のようになっています。
右ペインで細かいオプションを変更しながら、左でイメージを確認していくような進め方になります。オプションはpaddingでのスペース指定やフォントの色、サイズなど細かく設定できるのですが、個人的に画像の縦横比率が決められないのがちょっと不満ですね。
終わったらコード取得ボタンを押します。デザインによってコードは変わらないので、設定を変更してもコードの再貼り付けは不要です。数十分程度で勝手に反映されます。これは便利だけど厄介でもありますね。
コード取得画面では、高さを固定するといけないよ、という注意点が書いてありました。
それから、広告の幅を250ピクセル以上にする必要があるそうです。
ブログでの運用を考える
私はブログを書いているので、これをブログで運用する際にどのように使えば効果的かを考えてみました。但し書いているブログがはてなブログなので、はてなブログの観点が多いと思いますがその旨ご了承ください。
まず、フィードの要素として「同じブロックが繰り返し発生する箇所」を挙げてみると、以下の部分が候補に入ると思います。
- サイドバーの新着記事、人気記事など
- トップ、アーカイブページの記事一覧
- フッターなどの関連記事
こんなところでしょうか。
この中で、フッターなどの関連記事については多くの方がAdSenseの「関連コンテンツ」型を導入していると思います。これも同じネイティブ広告です。そうなると除外。
次にサイドバーについてはそもそもあまり見られていないのではないかと思うので効果は薄そうです。レスポンシブデザインの場合、多くは最下部に追いやられると思うので、スマホデザインとしても大きな効果は望めないかもしれません。
残ったトップページ、アーカイブページの記事一覧はそこそこPVがありそうなので、これはアリでしょうか。
但し、少なくともはてなブログの場合は記事ページ以外のカスタマイズの難易度が個人的に結構高めだと思います。WordPressは割と簡単にいけるという噂がありますが。そこそこのPVのページのためにそんなに頑張れるかといわれると、微妙かもしれません。
……
じゃあ、ないじゃん……
でもこれじゃ悲しいので、一応もう1つ私が考えたのは、ヘッダにオススメ記事を入れてそこに反映するというものです。フィードかといわれるとどうなの？ってのはありますけど。
ヘッダは全てのページで表示されますし、カスタマイズもしやすいのでこれだったらやる価値はありそうかなと思いました。
実装のポイント
実装に関しては、はてなブログが前提となってしまいますが、参考サイトなどを挙げながら説明します。
記事一覧に含める場合
トップやアーカイブページの記事一覧に含めたい場合は以下が参考になりました。
スマホのみの対応で、タグマネージャを使用して実装しています。トップをアーカイブに飛ばしている場合はタグマネージャ内の設定をindex→archiveで対応できるのを確認しました。PCも条件（等しい、PC）とdiv要素を差し込むクラス名（.archive-entry.autopagerize_page_element）を変えて表示ができたのですが、サイズがうまく合わずに断念。これ以上の調査はコスパ悪そうなので諦めました。
デザインになじませるのは現時点ではかなり苦労しそうですね。できることは確認しましたが、私は一旦外しました。有力情報を待ちます。
オススメ記事に含める場合
そしてこちら。ヘッダにオススメ記事を追加して、そこに混ぜてみました。
参考にしたのは以下です。
flexboxで実装している記事です。flexboxは対応ブラウザに注意が必要かもしれません。私は切り捨てましたけど。
テーマによっては最初からヘッダのオススメ記事の機能が含まれているものもありますが、私が使っている「Brooklyn」では1から設定してみました。
結果はこんな感じです。この記事を書いている時点でPCサイトには実装してあるので、実際に見たほうが早いかも。
赤枠内がインフィード広告となっています。オススメ記事をインフィード広告に寄せてデザインしたので、見た目としてはそんなに変わらないかなと思います。インフィード広告の画像サイズはだいたい「幅:高さ=2:1」となっていました。
ポイントとしては、サイズの制限で250pxとありましたが、300pxあった方がいいような気がします。私はIEではみ出しました。
対応方法があるとは思うのですが調べるのも面倒なので、インフィード用のboxだけ広めにとりました。PC用は4つ表示でインフィード広め、タブレットは3つ表示にして全部300pxにしてサイズを確保しています。このあたりは元記事の仕様を大部分踏襲しています。
スマホ側にも入れてみたところ、高さのサイズを小さくしたくてもどうしてもできず（200px以下にできなかった）、しかもセンター配置になってしまって困っています。全くなじめず、ぼっち状態です。仕様なのか実力不足なのかは不明。
以下が画像。
ーーーーー
ーーーーー
浮いてますね。こうなる原因が知りたい。
※追記
その後AdSenseより警告が来て外しました。詳細は末尾のエントリーのリンクを貼っていますので気になる方はご覧ください。
レスポンシブデザインの場合は注意
この広告を採用する場合、レスポンシブデザインを採用していると注意しなければいけない可能性があります。
例えば私の例でいえば、オススメ記事への実装はPCが「上部の画像」タイプ、スマホが「横の画像」タイプです。オススメ記事のデザイン自体はCSS上で制御することでPCの場合とスマホの場合でデザインを変えられます。
但し、AdSenseは別々のコードを貼り付けないといけませんので、CSSではどうしようもありません。
その際の対応として、以下が参考になると思いました（違ってたらすみません）。
CSSのメディアクエリのブレイクポイントをjavascriptで実装する方法です。このブレイクポイントをCSSと一致させて、スマホの場合に横にするインフィード広告を差し込めばできそうです。色々方法ありますけど「window.matchMedia」がよさげですね。但し確認はしていません。
CSS側の書き方は先ほど紹介させていただいたflexboxのサイトにもありますのでそちらをご覧になれば大体把握できるかと思います。
ちなみに私のブログはレスポンシブにしていません。別々にコードを作って貼っているのでここは問題になりません。
一応紛らわしいので念のため書いておきますが、インフィード広告もレスポンシブ広告ではあります。ただそれはサイズがレスポンシブなのであって、タイプに関しては明示的に指定する必要があります。
ですので、私の例のようにPCタブレットとスマホでフィードのタイプが変わってしまう場合は注意が必要です。サイズだけが縮まって、タイプが変わらない場合は特に問題ないと思います（それでも画像の比率が変わったりするとやっぱり考慮が必要）。
まとめ
少し長くなってしまいましたが、現状私が検証してわかったGoogleAdSenseのインフィード広告のベータ版について記載しました。今のところ難易度の割に効果が期待できなさそうではありますが、しっかりデザインになじむのであれば私は取り入れたいと思ってます。
まぁ、閲覧者にとっては迷惑かもしれませんけどね。
せっかく調べたので、今後変更点があった場合はできるだけ追っていきたいです。
尚、ここに書いたものは私の検証結果と知識を元にしています。正直知識はかなり怪しいですので、正確性について保証するものではありません。逆に誤っている部分があれば指摘いただけると助かります。
※追記
この広告を表示していたら警告が来ました！詳細はこちらへ。
AdSense「紛らわしい広告」の規約はネイティブ広告への適用除外だってよ - イケメン息子とぐうたら猫の成長見守りブログ
最後までご覧いただきありがとうございます。
んだば、まだ。
