Google

はしがき 1つ前の記事でGoogle Analyticsを仕込みたいと言いましたが、早速導入しました。 自分のGoogle Analyticsを導入する目的は、単純に閲覧数が知りたいってだけです。 おそらく他にも色んな情報が取れると思いますが、それらをどう利用するかは全く考えていません。 （今後何かしらの参考にする可能性はあります） 導入方法 この記事で説明している内容のGitHub上のコミットはこちらを参照ください。 Google Analytics 4を利用する前提で記載します。サイトに埋め込む測定IDはG-XXXXXXXXXXの形式のものになります。 Google Analyticsから測定IDを取得するまでの手順は省略します。 導入に当たって、セキュリティや誤使用防止の観点から測定IDをコードに直接書くのを避けています。 測定IDは、ビルド&デプロイのワークフローの手順の中で埋め込むようにしました。 追加した設定 今回、追加または更新したファイルは以下です。 hugo.yaml layouts/_internal/google_analytics.html .github/workflows/deploy-hugo.yaml hugo.yaml Hugoの設定例を参考に、Analyticsの設定を追加します。 services: googleAnalytics: id: __GA_MEASUREMENT_ID__ ここで、キーidの値に測定IDをベタ書き(ハードコード)せず、変数みたいな値を入れ込んでいます。使い方は後述します。 layouts/_internal/google_analytics.html このファイルには、Google Analyticsで測定IDを発行した後に「このコードをあなたのサイトに埋め込んでください」と示されるコードを貼り付けます。 そして、測定IDを埋め込む部分を{{ site.Config.Services.GoogleAnalytics.ID }}に置き換えます。 <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.Config.Services.GoogleAnalytics.ID }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag("js", new Date()); gtag("config", "{{ site.Config.Services.GoogleAnalytics.ID }}"); </script> {{ site.Config.Services.GoogleAnalytics.ID }}はHugoのサイト変数と呼ばれるものです。この変数はhugo.yamlに対応しています。 変数を使うことで、測定IDを色んな場所にハードコードしなくてもいいようにしています。 .github/workflows/deploy-hugo.yaml GitHub Pagesへデプロイするためのワークフローに、測定IDを埋め込むための処理を加えています。 追記した部分を抜粋: jobs: build: steps: ... - name: Replace Google Analytics Measurement ID run: | if [ -f hugo.yaml ]; then sed -i "s/__GA_MEASUREMENT_ID__/${{ vars.GA_MEASUREMENT_ID }}/g" hugo.yaml fi ... ここで、先ほどhugo.yamlに入れ込んだ値__GA_MEASUREMENT_ID__を、GitHubリポジトリ側で設定してある変数に置き換えるようにしています。 ...