13 January 2019 / #ブログ #テクノロジー

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

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

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

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

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

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のページに解析結果が表示されます。

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のフォローをお願いします。

Follow @freemotio

ブログの著者：IT業界10年以上のベテランフリーランスエンジニア。
会社員時代に比べ年収2.5倍にUP。
AWSとGCPの両方でゲーム系インフラの構築,運用と
C#とPHPでのサーバープログラミングの二刀流で絶賛稼働中。
有益なIT情報を発信出来きるように日々IT情報収集が日課です。
ブログではフリーランスやIT情報を毎日更新中です。

自分のスキルレベルと経歴をまとめたページを作りました。
お仕事のご依頼の際には参考にしていただければと思います。
クラウドランス望月のポートフォリオサイト
またブログに関する感想やご意見、応援などがありましたら、
こちらから自分宛てにTweetして頂ければと思います。

Tweet to @freemotio

Tweets by freemotio

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

目次

1. 登録の前に

2. Google Analytics

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

まとめ

もっと早く教えて欲しかった勉強になるエンジニア系YouTube

新人エンジニアへ捧ぐ！絶対に怒られない質問の仕方とチーム環境の作り方

目次

1. 登録の前に

2. Google Analytics

3. Google Adsense

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

まとめ