👋
GCP の Cloud Run で動く Nuxt3 に GA (グーグルアナリティクス) を設定する

2022/06/03に公開
 概要GCP (Google Cloud Platform) の Cloud Run で動作している Nuxt3 アプリにグーグルアナリティクスを設定しようとしたのですが、環境変数まわりで詰まってしまったので記録しておきます。
事前に Cloud Run へのデプロイや、サイトのグーグルアナリティクスの設定は終わっていて、測定ID(トラッキングID)を取得しているという前提で話を進めます。

 環境$ node --version
v16.15.0
$ yarn --version
1.22.18
package.json (必要なものだけです)
{
  "devDependencies": {
    "nuxt": "3.0.0-rc.3",
    "vue-gtag-next": "^1.14.0"
  },
}

 問題内容Nuxt3 のリファレンスでは、グーグルアナリティクスの設定に vue-gtag-next を使っていたました。
リファレンス:
https://v3.nuxtjs.org/guide/directory-structure/plugins#vue-plugins
もちろんこのリファンスの通りに進めればすぐにできるのですが、
トラッキングIDをgit管理下に入れたくなかったので、Nuxt3 の環境変数として使うように設定したいです。
また、途中 Cloud Run へのデプロイ時に環境変数を渡すことができなかったので、その問題も解決しようとしました。

 設定手順
 ローカルでの設定vue-gtag-next  をインストール
yarn add --dev vue-gtag-next
.env にGA(グーグルアナリティクス)の測定IDを追記
(環境変数名は NUXT_PUBLIC_ をつけるようにしてください)。
NUXT_PUBLIC_GA_ID=G-XXXXXXXXXX
nuxt.config.ts の設定
.env の環境変数を読み込みます。
runtimeConfig 以下を追記してください。
環境変数の NUXT_PUBLIC_ 以下を変更した場合は、NUXT_PUBLIC_ 以下を lowerCamelCase に変更した変数名を記入してください。
値は '' で大丈夫です( nuxt.config.ts  が自動で読み込んでくれます)。
...
export default defineNuxtConfig({
  ...,
  runtimeConfig: {
    public: {
      gaId: ''
    }
  },
  ...,
})
plugins/vue-gtag.client.ts を作成し、次のようにします。
(js でも大丈夫です)
// plugins/vue-gtag.client.ts

import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: config.public.gaId
    }
  })
})
const config = useRuntimeConfig() とすることで nuxt での runtimeConfig を読み込み、
config.public.gaId で先ほどの nuxt.config.ts で作成した変数を読み込んでくれます (変数名を変更した場合は適宜変更してください) 。
ディレクトリでの作業はここで終わりです。
適宜ビルド・デプロイ等をしてください。
これで yarn dev では値を読み込んでくれるのですが、Cloud Run では測定IDを読み込んでくれません。
試行錯誤した結果、 Cloud Run 側で環境変数を設定すればいいことがわかりました。

 Cloud Run での設定Cloud Run で環境変数を設定します。
.env で書いた変数と測定IDを入力します。
記入後 デプロイ を押します。
これで Cloud Run 上でも環境変数を読み込んでくれるようになりました。

 結果グーグルアナリティクスで無事測定できるようになりました！

 終わりに今回は Cloud Run で動く Nuxt3 でグーグルアナリティクスの設定をすることができました。
読んでくださりありがとうございました。
概要

環境

問題内容

設定手順

ローカルでの設定

Cloud Run での設定

結果

終わりに

Discussion
