abstract analytics events

.vscode/settings.json

@@ -6,7 +6,6 @@
   "vetur.experimental.templateInterpolationService": true,
   "eslint.enable": true,
   "eslint.format.enable": true,
-  "eslint.packageManager": "yarn",
   "eslint.alwaysShowStatus": true,
   "eslint.validate": ["javascript", "javascriptreact"],
   "[javascript]": {

src/components/DownloadButton.js

@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import GetAppIcon from '@material-ui/icons/GetApp';
 import PropTypes from 'prop-types';
 import React from 'react';
-import firebase from '../config/firebase';
+import analyticsEvent from '../shared/analyticsEvent';
 import downloadPDF from '../shared/download-pdf';
 
 const useStyles = makeStyles((theme) => ({
@@ -25,7 +25,7 @@ const DownloadButton = ({ item }) => {
       onClick={() => {
         downloadPDF(item);
 
-        firebase.analytics()?.logEvent('download_pdf', {
+        analyticsEvent('download_pdf', {
           item_id: item.id,
         });
       }}

src/components/SaveButton.js

@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { connect } from 'react-redux';
 import firebase from '../config/firebase';
+import analyticsEvent from '../shared/analyticsEvent';
 import { axiosDelete, axiosGet, axiosPut } from '../shared/axios';
 import isBrowser from '../shared/browserCheck';
 import { deleteBookmark, setBookmark } from '../store/actions';
@@ -55,7 +56,7 @@ const SaveButton = ({
                 setSaved(false);
                 deleteUserBookmark(resourceSlug);
 
-                firebase.analytics()?.logEvent('remove_bookmark', {
+                analyticsEvent('remove_bookmark', {
                   content_type: 'resource',
                   item_id: resourceSlug,
                 });
@@ -82,7 +83,7 @@ const SaveButton = ({
                 }).then(() => {
                   setUserBookmark(resourceSlug);
 
-                  firebase.analytics()?.logEvent('add_bookmark', {
+                  analyticsEvent('add_bookmark', {
                     content_type: 'resource',
                     item_id: resourceSlug,
                   });

src/components/SearchModal.js

@@ -11,7 +11,7 @@ import {
 import { ArrowBack, Clear } from '@material-ui/icons';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import firebase from '../config/firebase';
+import analyticsEvent from '../shared/analyticsEvent';
 import { axiosGet } from '../shared/axios';
 import useWindowDimensions from '../shared/dimensions';
 import theme from '../styles/theme';
@@ -26,7 +26,7 @@ const Search = ({ shown, container, closeModal }) => {
   const getSearchResults = async (param) => {
     if (param.length >= 1) {
       setSearchStatus('searching');
-      firebase.analytics()?.logEvent('search', { search_term: param });
+      analyticsEvent('search', { search_term: param });
       const response = await axiosGet('resources', {
         params: {
           q: param,

src/components/SignUpWidget.js

@@ -10,6 +10,7 @@ import React, { useEffect, useState } from 'react';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { connect } from 'react-redux';
 import firebase, { uiConfig } from '../config/firebase';
+import analyticsEvent from '../shared/analyticsEvent';
 import { axiosGet, axiosPut } from '../shared/axios';
 import isBrowser from '../shared/browserCheck';
 import rollbar from '../shared/rollbar';
@@ -87,9 +88,9 @@ const SignUpWidget = ({
 
             // Analytics
             if (authResult.additionalUserInfo.isNewUser) {
-              firebase.analytics()?.logEvent('sign_up');
+              analyticsEvent('sign_up');
             } else {
-              firebase.analytics()?.logEvent('login');
+              analyticsEvent('login');
             }
 
             const successResponse = async () => {

src/pages/_app.js

@@ -17,6 +17,7 @@ import Head from '../components/Head';
 import Header from '../components/Header';
 import Loading from '../components/Loading';
 import firebase from '../config/firebase';
+import analyticsEvent from '../shared/analyticsEvent';
 import { axiosGet } from '../shared/axios';
 import isBrowser from '../shared/browserCheck';
 import useWindowDimensions from '../shared/dimensions';
@@ -123,7 +124,7 @@ function App({ Component, pageProps }) {
       setIsLoading(true);
     });
     router.events.on('routeChangeComplete', () => {
-      firebase.analytics()?.logEvent('page_view');
+      analyticsEvent('page_view');
       setIsLoading(false);
     });
     router.events.on('routeChangeError', () => {

src/pages/resources/[resourceSlug].js

@@ -10,6 +10,7 @@ import Head from '../../components/Head';
 import Item from '../../components/Item';
 import ResourceContents from '../../components/ResourceContents';
 import firebase from '../../config/firebase';
+import analyticsEvent from '../../shared/analyticsEvent';
 import { axiosGet } from '../../shared/axios';
 import isBrowser from '../../shared/browserCheck';
 
@@ -55,7 +56,7 @@ const ResourcePage = ({ propResource, propTheme, previewMode }) => {
 
   useEffect(() => {
     if (!previewMode && resource) {
-      firebase.analytics()?.logEvent('select_content', {
+      analyticsEvent('select_content', {
         content_type: 'resource',
         item_id: resource.slug,
       });

src/pages/resources/[resourceSlug]/items/[itemId].js

@@ -1,9 +1,9 @@
 import {
-    Box,
-    Card,
-    CardActionArea,
-    CardContent, Grid, makeStyles,
-    Typography,
+  Box,
+  Card,
+  CardActionArea,
+  CardContent, Grid, makeStyles,
+  Typography,
 } from '@material-ui/core';
 import LinkUi from '@material-ui/core/Link';
 import { ArrowBack, ArrowForward } from '@material-ui/icons';
@@ -15,6 +15,7 @@ import { useAuthState } from 'react-firebase-hooks/auth';
 import Head from '../../../../components/Head';
 import Item from '../../../../components/Item';
 import firebase from '../../../../config/firebase';
+import analyticsEvent from '../../../../shared/analyticsEvent';
 import { axiosGet } from '../../../../shared/axios';
 import isBrowser from '../../../../shared/browserCheck';
 
@@ -84,10 +85,12 @@ const ItemPage = ({ propResource, previewMode }) => {
 
   useEffect(() => {
     if (!previewMode && item) {
-      firebase.analytics()?.logEvent('select_content', {
-        content_type: 'resource_content_item',
-        item_id: `${resource.slug}/${itemId}`,
-      });
+      analyticsEvent(
+        'select_content', {
+          content_type: 'resource_content_item',
+          item_id: `${resource.slug}/${itemId}`,
+        },
+      );
     }
   }, [item, itemId, resourceSlug]);
 

src/pages/themes/[slug].js

@@ -19,6 +19,7 @@ import ResourceCard from '../../components/ResourceCard';
 import SearchModal from '../../components/SearchModal';
 import SignUpPrompt from '../../components/SignUpPrompt';
 import firebase from '../../config/firebase';
+import analyticsEvent from '../../shared/analyticsEvent';
 import { axiosGet } from '../../shared/axios';
 import isBrowser from '../../shared/browserCheck';
 import richTextHelper from '../../shared/rich-text';
@@ -112,7 +113,7 @@ const ThemePage = ({
 
   useEffect(() => {
     if (!previewMode && theme) {
-      firebase.analytics()?.logEvent('select_content', {
+      analyticsEvent('select_content', {
         content_type: 'theme',
         item_id: theme.slug,
       });

src/shared/analyticsEvent.js

@@ -0,0 +1,7 @@
+import firebase from '../config/firebase';
+
+export default function analyticsEvent(event, params) {
+  if (process.env.NEXT_PUBLIC_ENV === 'production') {
+    firebase.analytics().logEvent(event, params);
+  }
+}