Merge pull request #30 from GwonHeeJun/feature/firebase-analytics

Connect Firebase Analytics

next.config.js

@@ -1,2 +1,13 @@
-const withImages = require('next-images')
-module.exports = withImages()
+const withImages = require('next-images');
+module.exports = withImages({
+  env: {
+    FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
+    FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
+    FIREBASE_DATABASE_URL: process.env.FIREBASE_DATABASE_URL,
+    FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
+    FIREBASE_STORAGE_BUKET: process.env.FIREBASE_STORAGE_BUKET,
+    FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
+    FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
+    FIREBASE_MEASUREMENT_ID: process.env.FIREBASE_MEASUREMENT_ID
+  },
+});

pages/_app.js

@@ -1,7 +1,13 @@
-import '../styles/globals.css'
+import { useEffect } from 'react';
+import { analytics } from '../utils/firebase';
+import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  useEffect(() => {
+    analytics();
+  }, []);
+
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

utils/analytics.ts

@@ -1,6 +1,7 @@
-import firebase from "./firebase"
+import { firebase } from './firebase';
+
+const LOG_CTA_GET_STARTED = 'LOG_CTA_GET_STARTED';
 
-const LOG_CTA_GET_STARTED = "LOG_CTA_GET_STARTED"
 export function logCtaGetStartedClick() {
-    firebase.analytics().logEvent(LOG_CTA_GET_STARTED)
-}
+  firebase.analytics().logEvent(LOG_CTA_GET_STARTED);
+}

utils/firebase.ts

@@ -1,21 +1,23 @@
-import firebase from "firebase"
-import "firebase/analytics"
+import firebase from 'firebase/app';
+import 'firebase/analytics';
+
 
 const config = {
-    apiKey: process.env.FIREBASE_API_KEY,
-    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
-    databaseURL: process.env.FIREBASE_DATABASE_URL,
-    projectId: process.env.FIREBASE_PROJECT_ID,
-    storageBuket: process.env.FIREBASE_STORAGE_BUKET,
-    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
-    apId: process.env.FIREBASE_APP_ID,
-    measurementId: process.env.FIREBASE_MEASYREMENT_ID
+  apiKey: process.env.FIREBASE_API_KEY,
+  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+  databaseURL: process.env.FIREBASE_DATABASE_URL,
+  projectId: process.env.FIREBASE_PROJECT_ID,
+  storageBuket: process.env.FIREBASE_STORAGE_BUKET,
+  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.FIREBASE_APP_ID,
+  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
+};
+
+if (!firebase.apps.length) {
+  firebase.initializeApp(config);
 }
 
+const analytics = firebase.analytics;
 
-if (typeof window !== "undefined" && !firebase.app.length) {
-    firebase.initializeApp(config)
-    if ('measurementId' in config) firebase.analytics()
-}
+export { firebase, analytics };
 
-export default firebase