📖

Nuxtで作成したアプリをNetlifyでデプロイし、GoogleAnalyticsを設定する方法

2022/01/03に公開約1,400字

Netlify無料版ではアナリティクス(訪問者数)などの確認ができないため、グーグルアナリティクスと連携しました。忘れないためにも残しておきます。

1.Nuxtで環境変数とアナリティクスを使用できるようにする



◆dotenvをインストール

npm install @nuxtjs/dotenv



◆nuxt.config.jsに下記を追加

buildModules: [
    '@nuxtjs/dotenv'
],



◆google-gtagをインストール

npm install @nuxtjs/google-gtag



◆nuxt.config.jsに下記を追加

  modules: ['@nuxtjs/google-gtag'],
  'google-gtag': {
    id: process.env.GOOGLE_ANALYTICS_TRACKING_ID,  //後ほどNetlifyに環境変数を追加します
  },






2.Netlifyでデプロイする



◆デプロイしたいGithubのレポジトリと連携しデプロイ

※npm run generateを選択
参照:https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/faq/netlify-deployment/





3.GoogleAnalyticsに登録し、デプロイしたサイトを設定idを取得



◆管理➡データストリームをクリック



◆ストリームを追加で種類を選択(ウェブ)



◆先ほどデプロイしたURLを設定すると測定IDが付与される






4.Netlifyに環境変数を設定



◆Netlifyの管理画面でsitesettings ➡ build&deployをクリック



◆Enviromentの欄でGoogleAnalyticsの測定IDを追加



以上の設定でGoogleAnalyticsでアクセス数などを確認できるようになりました!
ご参考程度に🙇‍♂️!

Discussion

ログインするとコメントできます