WING(AFFINGER5)で見出し上にグーグルアドセンスの広告を挿入する

WING(AFFINGER5)でグーグルアドセンスのインフィード広告を挿入する で関連記事部分にインフィード広告を入れてみましたが、見出し上にもGoogleアドセンスの広告を入れたい！

ということで設定してみました。

最初の見出しに広告を入れる

見出しはワードプレスでいうところの「見出し２」の上ですね。

その中でも最初の見出しの上に入れようと思います。

記事を表示したときにパッと目に入ることからクリック率が高いようです。

インフィードより先にやるべきですね・・・(´д`;)

※現状は1つ目と3つ目の見出し上に広告を入れてます(n*´ω`*n)

広告の作成

まずは表示させる広告を作る必要があります。

Googleアドセンスの管理画面で「広告の設定」⇒「コンテンツ」⇒「広告ユニット」を表示します。

こんな画面出ます。

先日追加したインフィード広告が表示されていますね。

「新しい広告ユニット」ボタンを押します。

広告の種類を選びます。

今回は一番右の「記事内広告」を選びます。

記事内広告は画面幅に合わせて広告サイズを自動で調整してくれるもので、PCでもスマホでも意識せずにスマートに表示されます。

また、「広告！」という感じを減らした溶け込んだデザインになっているようです。

記事内広告の設定画面です。

広告ユニット名を入れます。

プレビュー欄の青い線をドラッグして違う横幅サイズで確認することもできます。

幅を狭めたイメージです。

こんな感じで勝手にサイズ調整してくれます。

この細さだとスマホぐらいでしょうか。

「保存してコードを取得」ボタンを押します。

最後の確認画面？です。

コードは後でも表示できるのでひとまず「作業完了」ボタンを押します。

少し待って一覧画面を再表示すると・・・、できました！

WING(AFFINGER5)で設定する

実際に設定していきます。

まずは先ほど作成した広告のコードが必要なので、一覧から「コードを取得」のリンクを押します。

先ほどの確認画面と同じ画面が出るのでここから「コード スニペットをコピー」をクリックします。

ワードプレスの管理画面に入ります。

「AFFINGER5 管理」画面を表示して「Google連携 / 広告」を開きます。

「見出し前に広告挿入」の場所で先ほどコピーしたコードを貼り付けます。

固定記事には広告はいらないので投稿記事のみ表示しています。

あとは記事上の広告なので１番目のみチェック入れてます。

保存して完了です。

広告が表示されました！

（緑色なのはGoogle Publisher Toolbarの影響です）

※アフィンガー５のアップデートのためか、現状は目次の下に表示されるようになっています。

なんにせよ

色んなサイトを見ていると必ず見だし上に広告がありますので、見出し上は結構クリック率が高いと思われます。

WING(AFFINGER5)だと見出し上の広告設定が簡単に設定できます。

ひとまずレイアウトが崩れる自動広告を表示しないようにして様子を見てみます。