WING(AFFINGER5)

WING(AFFINGER5)でグーグルアドセンスのインフィード広告を挿入する

2018年5月30日

ブログを開設してのんびり記事追加を続けて半年。

記事も30近くになりました。

3月にもアドセンスに合格し、設定が楽だったので「自動広告」を貼り付けて3ヶ月。

広告クリックが2つ・・・(´д`;)

アカーン!(;゚Д゚)

というわけで広告のテコ入れします。

ブログに溶け込んだかのような憧れ(?)のインフィード広告を入れてみます。

私もクリックした記憶があります。

広告なので結構押したくなるような文言が書いてあるんですよね。

ワードプレステーマにWING(AFFINGER5)を使っていますがインフィード広告は管理画面で簡単に設定できました!

まずはGoogle Adsenseでインフィード広告を作成

まずはインフィード広告をアドセンスのページで作ります。

表示するものがないとどうしようもないですからね。

グーグルアドセンスのページに移動して「広告の設定」⇒「コンテンツ」⇒「広告ユニット」を表示します。

こんな画面出ます。

ここの左上「新しい広告」ボタンを押します。

広告ユニットの形式を選ぶ画面にいきます。

「インフィード広告」を選択します。

紹介ページ?が表示されます。右矢印押して「次へ進む」ボタンを押します。

「自動で広告スタイルを作成する」のほうに挿入したいページのURLを入れて「ページをスキャン」ボタンを押します。

ワードプレステーマにもよると思いますがモバイルを選べば問題ないかも。

モバイルのほうがレイアウトがシンプルなのでPCでも自然に表示されるのではと思います。

グリグリーっと読み込みます。1分もかかりませんでした。

読み込んだページイメージと広告のイメージが表示されます。

関連記事部分にひとまずいれたいのでこの部分を選択して「次へ」ボタンを押します。

しかし地味にすごいですねこの一連の機能。

実際プログラミングして作るのめっちゃめんどくさいと思いますよコレ。

Googleやりますなぁ。

広告のイメージが表示されます。

広告ユニット名を入れて「保存してコードを保存」を押します。

他の項目は自分好みで。選ぶと左側にイメージが出ます。

あと左側の青いバー(?マークあるとこ)をドラッグすると画面幅を替えた時のイメージがわかります。

インフィード広告の作成設定が終わりました。

右下の「作成完了」で終わりです。

一覧に戻っても即表示されませんでしたが、1分ほど待ってから再度表示したらできてました。

ブログで作成したインフィード広告を設定

アドセンス広告を作成したので実際にブログへの設定を行います。

先ほど作成したアドセンス広告の「コードを取得」を選択します。

すると先ほどの完了画面が出ますので左下のコードをコピーします。

「コード スニペットをコピー」でコピーされます。

ワードプレスの管理画面へログインして「外観」⇒「ウィジット」を開きます。

左側のカスタムHTMLを右側の広告・Googleインフィード広告へドラッグします。

ドラッグが終わるとコードを入力する欄が表示されます。

先ほどコピーしたコードをここに貼り付けます。

タイトルは「スポンサーリンク」とするのがGoogle規約的にいいようです。

「AFFINGER5 管理」に移動して「Google連携 / 広告」を開きます。

「インフィード広告の設定」の「関連記事に挿入」に広告を入れる間隔を数字で入力します。

ひとまず3と設定しました。3だと2つ関連記事のリンクが出た後に広告が挿入されます。

以下のような感じです。

関連記事
関連記事
広告
関連記事
関連記事
広告

確認すると、広告が表示されました!

(緑色になっているのはGoogle Publisher Toolbarの影響です)

なんにせよ

インフィード広告は簡単に設定できますね。

おさらいすると以下の手順であっさり作れます。

  1. グーグルアドセンスの管理画面でインフィード広告を作成
  2. ワードプレスの管理画面でウィジット「カスタムHTML」を作成
  3. AFFINGER5管理画面でインフィード広告表示間隔を設定

広告の表示間隔は随時確認する必要はありそうです。

3じゃ狭いような気もしております。

関連記事
WING(AFFINGER5)でWebフォント(Googleフォント)を設定する

続きを見る

  • この記事を書いた人

とま

1977年生まれ。大阪在住。フリープログラマ。1人の妻、2人の娘と同居。 2018年に独立。2021年にマイクロ法人設立。 仕事の時間を半分にしたいなぁ。 プロフィールへ

-WING(AFFINGER5)