/ #tech 

hugoブログにGoogle AnaliticsとGoogle Adsenseを設置した時のTips

HugoブログにGoogle Analyticsや
Google Adsenseの設定仕方がわからない。
Postはマークダウンファイルで作成するけど広告貼れるの？
こんな疑問を解決します。

自分のこのブログはHugoで作成しています。
そしてGoogle AnalyticsとGoogle Adsenseを設定しましたので、
その時のポイントを紹介します。

結論としてはGoogle Analyticsはテーマが対応していればIDを入力するだけ。
Google AdsenseはマークダウンファイルにJavaScriptを貼り付けることができます。

設定の詳細を以下で説明します。

目次

  1. 登録の前に
  2. Google Analytics
  3. Google Adsense

1. 登録の前に

登録の前に、やるべき事があります。

それはブログURLをサブドメインじゃなく、メインのドメインにする事です。

例：https://cloudlance-motio.work/

理由はGoogle Adsenseの初期登録がサブドメインが許可されていないからです。
サブドメインを設定する方法もあるようですが、今回はメインのドメイン指定でいきます。

2. Google Analytics

まずはGoogle Analyticsのページで[無料で利用する]をクリックします。

touroku

入力項目の説明

  • アカウント名: 任意の名前を登録します。 例:cloudlance
  • ウェブサイトの名前:　ブログの名前　例:札幌のフリーランスブログ
  • URL: 自分のドメイン

IDが発行されるので、メモります。 例：UA-XXXXXXXXXX-X

hugoブログのconfig.tomlに googleAnalytics = "UA-XXXXXXXXX-X" と設定。

設定はこれだけです。
数時間するとGoogle Analyticsのページに解析結果が表示されます。

3. Google Adsense

Google Adsenseのページを開いて[お申し込みはこちら]をクリックします

analytics

サイトURL指定

  • サイトのURL: メインのドメイン。サブドメインは不可です
  • メールアドレス
  • メルマガ設定：どちらでもOK

他、登録時に入力する項目

  • 国の指定:日本
  • 規約に同意
  • アカウントの種類：個人
  • 住所・名前・電話番号を入力します

登録完了したらトラッキングコードが表示されます。
これが表示されたら登録完了です。

Hugoのindex.htmlに最初のトラッキングコードの設置の仕方

ここが最初に迷った箇所なのですが、
Hugoではindex.htmlはビルドする事によって生成されるので、
テーマのレイアウトファイルを修正する必要があります。

そして、Hugoの公式Docの通りに進めていると、テーマファイルはgit submoduleでaddされているので、それを解除して普通にcloneする必要がありました。テーマファイルは後々編集したい事が出てくるのであれば、最初からcloneで追加するのがおすすめです。

それでは、トラッキングコードをレイアウトファイルに埋め込みます。
修正するファイルは hemes /hugo-casper-two /layouts /partials /head.html です

<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}" />
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>{{ if .IsHome }}{{ .Title }}{{ else }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}</title>

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="{{ "favicon.ico" | absURL}}" />
    <link rel="canonical" href="{{ .Permalink }}" />

    {{ if .IsPage }} <meta name="description" content="{{ .Description | default (substr .Summary 0 160) }}" /> {{ else }}
    <meta name="description" content="{{ .Site.Params.metadescription | default .Site.Params.description }}" /> {{ end }}

    {{ partial "meta-twitter" . }}
    {{ partial "meta-facebook" . }}

    {{ .Hugo.Generator }}

    {{ "<!-- Stylesheets -->" | safeHTML }}
    <link rel="stylesheet" type="text/css" href="{{ "built/screen.css" | absURL}}" /> 
    <link rel="stylesheet" type="text/css" href="{{ "css/casper-two.css" | absURL}}" /> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" />
    {{ range .Site.Params.customCSS }} <link rel="stylesheet" href="{{ . | absURL }}" /> {{ end }}

    {{ if .Site.Params.RSSLink}}<link href="{{.Site.Params.RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" /> {{else}}{{ if eq .URL "/" }}<link href="{{ "index.xml" | absURL}}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" /> {{ end }} {{ end }}

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "ca-pub-XXXXXXXXXXXXXXXXXXX",
        enable_page_level_ads: true
      });
    </script>
</head>

あとはGoogle Adsenseのページから、トラッキングコードが読めてるかを確認をします。

自分のPostした記事に広告を表示したい場合は、
マークダウンファイルに直接トラッキングコードを張り付ける事ができます。

mark-ad

広告の審査が通過したら、Post記事に広告が表示されるようになります。
審査は数週間はかかるそうなので、気長に待ちましょう。

まとめ

以上、Google AnalyticsとGoogle Adsenseの設置方法とTipsでした。 サブドメインが初期登録は不可とか、テーマのsubmoduleでの追加ではできないなど、ちょっとしたポイントがありましたね。分析、広告を設定するときは参考にして頂ければと思います。

このブログではフリーランス情報やプログラミング情報の発信を続けていこうと思うのでぜひ応援お願いします。また、Twitterでも日々の為になる技術情報やフリーランスについての有益な情報をつぶやくので、いいなと思ったかたはTwitter 札幌のフリーランス@クラウドランス望月のフォローをお願い致します。

フォローする