Next.js + Firebase Hosting で構築したサイトにGoogleアナリティクスを導入する 📈

f:id:kimizuka:20200615114604p:plain

Firebase HostingにはGoogleアナリティクスとの連携機能がついています。

firebase.google.com

僕はこれまで連携機能を使ったことがなく、Firebase Hostingを使っていても、タグやnpmでアナリティクスを導入していたのですが、この度初めて使ってみました。連携機能というやつを。

基本的には、上記ドキュメントの通りに進めていけば問題ないのですが、Next.jsと組み合わせて使ったときに、2点引っかかったので、メモを残しておきます。

import firebase from 'firebase';

const config = {
  apiKey: 'XXXXXXXX',
  authDomain: 'XXXXXXXX',
  projectId: 'XXXXXXXX',
  storageBucket: 'XXXXXXXX',
  messagingSenderId: 'XXXXXXXX',
  appId: 'XXXXXXXX',
  measurementId: 'XXXXXXXX'
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
  firebase.analytics();
}

当初はこのようなコードで連携しようとしていました。

❶ TypeError: firebase__WEBPACK_IMPORTED_MODULE_1___default.a.analytics is not a function

デプロイしようとすると、まず、

TypeError: firebase__WEBPACK_IMPORTED_MODULE_1___default.a.analytics is not a function

というエラーが発生しました。文言から察するに、firebase.analyticsが見つからないようです。

import firebase from 'firebase';
import 'firebase/analytics'; // 追加

const config = {
  apiKey: 'XXXXXXXX',
  authDomain: 'XXXXXXXX',
  projectId: 'XXXXXXXX',
  storageBucket: 'XXXXXXXX',
  messagingSenderId: 'XXXXXXXX',
  appId: 'XXXXXXXX',
  measurementId: 'XXXXXXXX'
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
  firebase.analytics();
}

という形で、firebase/analyticsを読み込むことで一見解決しました。
（のちに解決していないことに気づく）
　

❷ ReferenceError: navigator is not defined

❶を修正してデプロイしようとすると、

> Build error occurred
ReferenceError: navigator is not defined
at Object.areCookiesEnabled (/Users/XXXXXXXX/node_modules/@firebase/util/dist/index.node.cjs.js:656:5)

というエラーが発生しました。

「あれ？navigatorにアクセスしていたかな？」と思ったのですが、よく見ると、firebase内でのエラーです。

Next.jsはサーバサイドでも同じコードが走るので、window.navigatorなど、ブラウザにしかないオブジェクトにアクセスする際は、クライアント側のみで処理が走るようにする必要があります。

なので、

import firebase from 'firebase';
import 'firebase/analytics';

const config = {
  apiKey: 'XXXXXXXX',
  authDomain: 'XXXXXXXX',
  projectId: 'XXXXXXXX',
  storageBucket: 'XXXXXXXX',
  messagingSenderId: 'XXXXXXXX',
  appId: 'XXXXXXXX',
  measurementId: 'XXXXXXXX'
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
  if (process.browser) { // 追加
    firebase.analytics();
  }
}

という感じで、アナリティクスはブラウザのみで実行するように修正することで、デプロイできるようになりました。

❸ ❶の改修を削除する

❷で一件落着なのですが、❶で追加した箇所を消してもデプロイできました。
結局、アナリティクスをサーバサイドで実行しようとしていることが原因だったようです。

なので、最終的には、

import firebase from 'firebase';

const config = {
  apiKey: 'XXXXXXXX',
  authDomain: 'XXXXXXXX',
  projectId: 'XXXXXXXX',
  storageBucket: 'XXXXXXXX',
  messagingSenderId: 'XXXXXXXX',
  appId: 'XXXXXXXX',
  measurementId: 'XXXXXXXX'
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
  if (process.browser) {
    firebase.analytics();
  }
}