pc版ブログにadsense広告を追加する!

· ☕ 2
🏷️
  • #hugo
  • #adsense
  • 先日adsenseに合格し、自動広告のみ設定しているのですが、ページビュー286に対し、広告表示数が66…。

    5回に一回しか表示すらされていないじゃないか…

    ということで、ヘッダーやサイドバーに広告を追加していきたいと思います。

    pcから見たページを確認

    こんな感じ

    広告追加前

    この黄色い部分に広告を追加したい!

    広告ユニットを作成

    adsenseのページでタグを取得

    ここで、広告ユニットを作成します。「広告」⇒「広告ユニット」⇒「ディスプレイ広告」

    設定方法1

    ↓のマーク部分を設定し作成。

    設定方法2

    すると、タグが表示されます。コピーしておきます。

    私はヘッダーように横長。サイドバー用にスクエア。の二つを作成しました。

    タグを設置

    テーマの中にlayouts/partials/googleフォルダを作り、その中に新しいhtmlファイルを作成。

    その中にコピーしたタグを設置します。

    とりあえず、layouts/partials/google/adsense_big.htmlにスクエアを。

    layouts/partials/google/adsense_small.htmlに横長を設置。

    タグの設置位置を確認

    どこに追加すれば、いい感じに位置に入るのか、とりあえずいろんなところにpタグを追加して、確認してみる。

    いつかちゃんとまとめるかもしれないけど、今日は細かい調査結果は割愛。

    そろそろ仕事行かないとだし…

    結果だけ書きます。

    custom-xx.htmlでは欲しい場所に入ってくれなかったので、直接本体を書き換えました。

    ヘッダー

    layouts/partials/header/header-text.html

    サイドバー(topページ)の頭

    layouts/partials/sidebar/sidebar-home.html

    サイドバー(topページ)の真ん中

    layouts/partials/sidebar/custom-home.html

    サイドバー(記事ページ)

    layouts/partials/sidebar/sidebar-single.html

    ↑のそれぞれのページに

    {{ partial "google/adsense_big" . }}
    

    を追加しました。(ヘッダーだけはsmall)

    お昼か夜にちゃんとまとめるかも!

    スマホ版の全画面広告を無効に

    表示数稼ぐために設定してたけど、やっぱり、どう考えてもこれうざい!

    全画面広告

    だから、消しました!

    この全画面広告出ると、続き見る気なくなるもんね…ww

    ここで消します。

    adsenseから、「広告」⇒「サイトごと」で、対象サイトを選択後、↓のチェックボックスを外します。

    消し方

    独り言

    よし、多分できた!

    仕事行ってきます!


    るな
    るな
    エンジニア