ブログにGoogleAnalyticsを導入してみる
アクセス解析のためにサクッと導入してみました。
■ 参考にさせて頂いたサイト様
Google アナリティクス用のトラッキングコードを埋め込む
■ 目次
- GoogleAnalyticsアカウント作成
- トラッキングID設定
- トラッキングコード追加
■ 内容
1. GoogleAnalyticsアカウント作成
2. トラッキングID設定
# config.toml
googleAnalytics = "UAで始まる自分のID"
3. トラッキングコード追加
利用するテンプレートによってディレクトリ構造等は若干異なる気がしますので、適宜読み替えて下さい。
やることは以下になります。
- トラッキングコードを記載したhtmlを新規作成
- 作成したhtmlを全画面で読み込ませる
3-1. analytics.htmlを作成する
ポイントは2点
- ローカルでの起動はカウントされないようにする
- トラッキングIDはconfig.tomlの値を読み込むようにする
layouts/partials/analytics.html
{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ . }}');
</script>
{{ end }}
{{ end }}
3-2. 全画面で読み込まれているパーツに読み込み処理を追加する
参考サイトでは、layouts/_default/baseof.htmlでしたが、私のテンプレートにはないので。
layouts/partials/head.htmlの記載を編集します。
ただし、組み込みのテンプレートは、ローカルサーバ動作させているときのコード出力抑制に対応していませんし、Google の変更に柔軟に対応することもできないので、できればパーシャルテンプレートは自作してしまった方がよいでしょう。
とのことなので以下記載を削除します。
{{ if .Params.ga.async }}
{{ template "_internal/google_analytics_async.html" . }}
{{ else }}
{{ template "_internal/google_analytics.html" . }}
{{ end }}
そして、以下記載を追加しました。
{{ partial "analytics.html" . }}
3-3. 確認する
-
layouts/partials/analytics.html
-
layouts/partials/head.html
上記ファイルをプッシュして確認してみます。
はい、イイ感じ。
アナリティクスのサイトで見てみるとカウントされていることも確認出来ると思います。