This page looks best with JavaScript enabled

[Hugo][Zzo]Google AdSenseの広告設定に苦戦したお話

 ·   ·  ☕ 5 min read  ·  ✍️ Inomaso

昨日、Google AdSebseの審査に通過することができました！！


今年の5月頃から何度か申請していたのですが、コロナの影響で審査できないとの返答しか来ませんでした。
Googleサポートページを確認する限りは、期間を置いて何度か申請して欲しいとのことだったので、1~2週間に1回くらいの頻度で申請してました。


Webサイトの収益化が開始できるのでウキウキしながら広告設定したのですが、思いの外ハマってしまったので設定方法の記事を作成することにしました。

自動広告

審査時に下記のようにコードを設定していれば、Google AdSense側にて広告設定するだけで自動広告を表示することができます。

1

<script data-ad-client="ca-pub-xxxxxxxxxxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

1
2
3

<!-- override this file -->
<!-- Adsense -->
{{ partial "google/adsense" . }}

画面左上のメニューから「広告」→「サイトごと」→「該当サイトの鉛筆マーク」から設定します。
auto-advertisement-config

広告の種類は主に以下の3つとなります。
モバイル全画面はストレスだったので無効化しました。

  • ページ内広告
    ページ構成を把握し、ページのレイアウト、ページ上のコンテンツの量、既存の Google 広告といったさまざまな要素に基づいて、自動的に新しい広告を掲載します。
    広告ユニットと併用が可能です。
  • アンカー広告
    画面の端に固定される広告で、ユーザーが簡単に閉じることができます。
  • モバイル全画面広告
    サイトのページを読み込んでいる間に表示されるモバイル広告です。

アンカー広告とモバイル全画面広告は、モバイルかタブレットにしか表示されないようです。

ページ内広告は既存の広告ユニットと一緒に最適化が可能です。ページのレイアウトやコンテンツ量に応じて、記事の途中にも広告が表示されるようになります。
広告設定のプレビューで広告位置が確認できます。下記の広告ユニットの設定が完了しましたら、改めて広告位置を確認してみてください。

広告ユニット

固定位置に広告を表示させたいので、広告ユニットを作成することにしました。
設定画面でディスプレイ広告が推奨されており、他の広告ユニットと比較して設定が簡単そうだったので、こちらの広告ユニットに決めました。

display-unit

こちらの記事を参考に、広告サイズがレスポンシブのディスプレイ広告を作成し、/hugo_root/layouts/partials/配下に該当ファイルをコピー後に、広告ユニットのコードを埋め込んでみたのですが、広告は表示されませんでした。

そこで色々調べてみたところ海外の記事で、/hugo_root/themes/theme/layouts/_default/single.htmlを編集する方法が紹介されていたので試してみました。

何時間か試行錯誤して、記事内のヘッダーとフッターに広告を表示することができました。
コードは以下のようになります。

  • ディスプレイ広告用のhtmlファイル作成
    ディスプレイ広告のHTMLコード貼り付け
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- display-unit -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  • 記事内のヘッダーに広告表示
    {{ partial "google/display-unit" . }}を挿入
1
2
3
4
5
6

<main class="single__main {{ if or ($.Param "enableToc") ($.Param "toc") }}{{ if $.Param "hideToc" }}main{{ else if eq ($.Param "tocPosition") "outer" }}main{{ else }}main-main{{ end }}{{ else }}main{{ end }}">
  {{ if $.Param "enableBreadcrumb" }}
    {{ partial "body/breadcrumb" . }}
    {{ partial "google/display-unit" . }}
  {{ end }}
  {{ if $.Param "hideSingleContentsWhenJSDisabled" }}
  • 記事内のフッターに広告表示
    {{ partial "google/display-unit" . }}を挿入
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  <div class="single {{ if $.Param "hideSingleContentsWhenJSDisabled" }}hide{{ end }}">
    <div class="single__nojs">{{ i18n "nojs-message" }}</div>
    <script>document.querySelector('.single').classList.remove('hide'); document.querySelector('.single__nojs').classList.add('hide');</script>
    <h2 class="single__title" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ .Title }}</h2>
    <div class="single__meta">
      {{ partial "body/infos" . }}
      {{ partial "body/tags" . }}
    </div>
    <article class="single__contents" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
      {{ partial "body/toc" . }}
      {{ .Content }}
      {{ partial "google/display-unit" . }}
    </article>

サイドバーにも上記方法で広告を表示できるのですが、サイドバーとの表示が被ってしまいました。
そこで、/hugo_root/themes/theme/layouts/partials/sidebar/sidebar-single.htmlを、/hugo_root/layouts/partials/配下にコピーして編集することで、サイドバーの下に広告が表示されるようになりました。

  • 記事内のサイドバーに広告表示
    {{ partial "google/display-unit" . }}を挿入
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{{ if $.Param "enableSidebar" }}
{{ if and (or ($.Param "enableToc") ($.Param "toc")) (ne ($.Param "tocPosition") "outer") }}

<section class="sidebar hide">
  <script>document.querySelector('.sidebar').classList.remove('hide')</script>
  <div class="toc__flexbox" data-position="{{ if $.Param "hideToc" }}absolute{{ else }}fixed{{ end }}">
    <h6 class="toc__title" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ i18n "toc-label" }}</h6>
    {{ if $.Param "enableTocSwitch" }}
      <label class="switch" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
        <input id="toggle-toc" aria-label="Toggle TOC" type="checkbox" {{ if $.Param "hideToc" }}{{ else }}checked{{ end }}>
        <span class="slider round"></span>
      </label>
    {{ end }}
  </div>
  <div class="toc {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
    {{ .TableOfContents }}
    {{ partial "google/display-unit" . }}
  </div>
</section>

{{ end }}
{{ end }}

広告表示例

上記設定後に、PCで記事内に広告が表示されるようになりました。
headerad

まとめ

HugoのGoogle AdSense設定に関する記事が少なかったので、結構苦労しました。
もしかするとHugoのバージョンによっては設定方法が多少変更しないといけないのかもしれません。

私のようにフロントエンドに詳しくない方が、Google AdSenseの広告設定に困っているのであれば、この記事が少しでも助けになると幸いです。

Share on

comments powered by Disqus

See Also