【はてなブログ】一覧ページにインフィード広告を設定しました
こんにちは。
GoogleAdscenceのはてなブログの記事一覧ページにインフィード広告を設定しました。
インフィード広告とは
記事一覧のページの「記事(コンテンツ)」と「記事(コンテンツ)」の間に挿入されている広告をインフィード広告といいます。
投稿記事の文中に表示される広告と違うのは、コンテンツの形式に合わせて馴染むように設定できる点です。
インフィード広告の設定
Google Adscenceのページから、「コンテンツ」→「新しい広告ユニット」をクリックします。
インフィード広告を選択します。
自動で広告スタイルを作成するを選択します。よくわからない人はこちらがおすすめです。
細部を自分で設定したい方は「手動で広告スタイルを設定する」を選択してください。
①URLにサイトアドレスを入れます。
②「モバイル」か「DESKTOP」か選択します。
③「ページをスキャン」をクリックします。
④ページスキャンが終わると、広告設定画面になります。
⑤サイトに合わせてお好みで詳細設定をしてください。
「グローバルオプション」で「選択したディスプレイ広告を許可する」は「ON」がおすすめです。
⑥設定後、「保存してコードを取得」をクリックしてください。コードが生成されました。
はてなブログに広告を入れる
通常、はてなブログに広告を設置する場合は、ダッシュボードから「デザイン」→「カスタマイズ」で「記事」や「フッタ」など広告を挿入したい個所にコードを貼り付けるだけでOKなのですが、インフィード広告のコードはどこに貼り付けたらいいのかわかりづらいです。
こちらの記事を参考にさせていただきました。
はてなブログで記事一覧ページにAdSenseを挟みこむカスタマイズ – naenote.net
「デザイン」→「カスタマイズ」→「フッタ」にお借りしたコードを貼り付けます。
自分のアドセンスIDと広告コードを書き換えました。
こちらのコードでは、広告の表示箇所の設定もできます。
デフォルトでは「5、15、25、35」と挿入箇所の設定がされています。それぞれの箇所に挿入する広告の設定でもできます。一番最初(5か所目)に広告コードを入力すると、ほかの箇所にも表示されます。
また、数字を変えて表示箇所を変えることもできます。
わたしはこの数字を少し変えました。
モバイル設定
インフィード広告はそれぞれの一覧表示に合わせて設定できるので、デスクトップとモバイル用と別のものを準備しました。
レスポンシブデザインを設定しているので、スマートフォン用にコードを記述しなくても、インフィード広告は表示されているのですが、デスクトップ用の広告表示になっているのが気になり、スマートフォン用の設定もしてみようと思います。
「デザイン」→「スマートフォン」→「フッタ」を選択します。
「スマートフォン用にHTMLを設定する」をクリックし、先ほどと同じコードを貼り付けます。広告コードをモバイル用にします。
サイトを開いて、広告が表示されるかチェックします。