Love Beautiful Code

Nuxt.jsでSSGのサイトを実装した際に、google analyticsを設定するのに手間取ったので共有

まず最初にやったこと

nuxt.jsのdocumentに記述されている nuxt/google-analytics というものを使用してみました。

結論から言うと最近リリースされたgoogle analytics 4に対応しておらず、headタグ配下に正しく表示されませんでした。

nuxt/google-analyticsの使い方は、こちらを参照ください。

google analyticsで新たにプロパティを作成する際に、ユニバーサル アナリティクス プロパティをOnにして作成すれば、従来と同じトラッキングIDが取得できるので、それを使えばうまく動作するようです。

2020年12月現在、nuxt-community関連のissueを漁ってみたが、現在も議論中をしているようです。

できるlibraryもあるように書かれているのですが、まだdocumentが充実しておらずコードを読まないと不明な部分が多いライブラリはできるだけ避けたいので、今回は、自分で実装してみました。

nuxt.config.jsのhead部分に記述してみた

ライブラリが使えないということで、独自実装することにしました。

まずは、安直にnuxt.config.jsのhead部分にgaに出力されるhtmlタグを記述してみました。

1export default {
2  ...(中略)
3
4  script: [
5    { src: "https://www.googletagmanager.com/gtag/js?id=G-XXX", async: true },
6    { innerHTML: "window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(\'js\', new Date());gtag(\'config\', \'G-XXX\');" }
7  ],
8  __dangerouslyDisableSanitizers: ['script']
9}

これで、うまくはいったもののコード的にイケてない。また、可読性が低いため編集が必要になった際にリファクタしづらい。また、GAのトラッキングIDを直書きする必要があるので、セキュリティ的に微妙。ということで、速攻でボツにしました。

gaタグを作成するplugin を作成

nuxt.jsのdocumentにもカスタマイズする際には、pluginを作成することを薦めていたので、それに則って実装してみました。

まずは、実装したコードは下記のとおりです。

1export default ({ app }) => {
2  if (process.env.NODE_ENV !== 'production') { return }
3
4  const gaScriptContent = (id) => {
5    return (
6      `
7      window.dataLayer = window.dataLayer || [];
8      function gtag(){dataLayer.push(arguments);}
9      gtag('js', new Date());
10      gtag('config', '${id}');
11      `
12    )
13  }
14
15  ((document) => {
16    const srcScriptElement = document.createElement('script')
17    srcScriptElement.async = true
18    srcScriptElement.src = `https://www.googletagmanager.com/gtag/js?id=${app.context.env.gaTrackingID}`
19
20    const firstLinkElement = document.getElementsByTagName('link')[0]
21    firstLinkElement.insertAdjacentElement('beforebegin', srcScriptElement)
22
23    const gaScriptElement = document.createElement('script')
24    gaScriptElement.text = gaScriptContent(app.context.env.gaTrackingID)
25
26    firstLinkElement.insertAdjacentElement('beforebegin', gaScriptElement)
27  })(document)
28}

今回のコードは、基本的にはgoogle analyticsから取得できるタグを参考に実装しています。下図参照。

下記ページへの行き方はこちらを参照

上記を踏まえた上で、念の為に詳しく解説しておきます。

1const gaScriptContent = (id) => {
2  return (
3    `
4    window.dataLayer = window.dataLayer || [];
5    function gtag(){dataLayer.push(arguments);}
6    gtag('js', new Date());
7    gtag('config', '${id}');
8    `
9  )
10}

こちらは、google analyticsから取得できるタグのうち、一番最後のscriptタグに記述されているものを使用しています。引数にはトラッキングIDを渡します。

1const srcScriptElement = document.createElement('script')
2srcScriptElement.async = true
3srcScriptElement.src = `https://www.googletagmanager.com/gtag/js?id=${app.context.env.gaTrackingID}`
4
5const firstLinkElement = document.getElementsByTagName('link')[0]
6firstLinkElement.insertAdjacentElement('beforebegin', srcScriptElement)

こちらは、google analyticsから取得できるタグのうち一番上のscriptタグを作成しています。

上３行でscriptタグの内容を記述しており、最後の２行でdocument内にappendしています。トラッキングIDは引数のappから環境変数を持ってきて取得しています。環境変数の設定方法は後述します。今回は、insertAdjacentElementメソッドを使用していますが、documentと同様insertBeforeでもできます。insertAdjacentElementメソッドの仕様はこちらを参照してください。

1const gaScriptElement = document.createElement('script')
2gaScriptElement.text = gaScriptContent(app.context.env.gaTrackingID)
3
4firstLinkElement.insertAdjacentElement('beforebegin', gaScriptElement)

ここでは、gaScriptContentを使用して、最後のscriptタグを作成しています。ここでも同様に環境変数からトラッキングIDを取得しています。

まだまだ、リファクタする余地はありますが、意外とうまくいったかなと思っています。documentにあるように汎用的に使えるように実装しても良いと思いますが、今回は静的なページでの使用目的で複雑なことをする予定はなかったのでシンプル実装してみました。

もし、もっとうまい書き方があれば共有いただけると嬉しいです。

余談

環境変数の反映に少しハマったので、自分の備忘録として記述しておきます。

今回は、ssgなので next generate するときに環境変数を読み込めるようにしてみました。

1NODE_ENV=production GOOGLE_ANALYTICS_ID=GA-XXXX nuxt-ts generate

また、nuxt.config.jsにもenvの設定を追加します。

1export default {
2  env: {
3    gaTrackingID: process.env.GOOGLE_ANALYTICS_ID || 'development'
4  }
5}

これで、読み込めるようになれると思います。

これももし、もっといい方法があれば共有いただければ嬉しいです。