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

概要

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 でグーグルアナリティクスの設定をすることができました。

読んでくださりありがとうございました。