From 0aec55f7d04c911e2abdcb5c27a6e23981344c56 Mon Sep 17 00:00:00 2001 From: annarhughes Date: Tue, 24 Oct 2023 21:40:14 +0100 Subject: [PATCH] add hotjar --- package.json | 1 + src/pages/_app.js | 198 +++++++++++++++++++------------------ src/styles/hotjarNPS.css | 205 +++++++++++++++++++++++++++++++++++++++ yarn.lock | 5 + 4 files changed, 316 insertions(+), 93 deletions(-) create mode 100644 src/styles/hotjarNPS.css diff --git a/package.json b/package.json index e7796e1..befd94b 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react-device-detect": "^1.14.0", "react-dom": "17.0.2", "react-firebase-hooks": "^2.2.0", + "react-hotjar": "^6.1.0", "react-html-parser": "^2.0.2", "react-player": "^2.6.2", "react-redux": "^7.2.1", diff --git a/src/pages/_app.js b/src/pages/_app.js index ecfcb03..995bb09 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,64 +1,57 @@ -import { - Box, Button, makeStyles, Typography, -} from '@material-ui/core'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import LinkUi from '@material-ui/core/Link'; -import { ThemeProvider } from '@material-ui/core/styles'; -import 'firebaseui/dist/firebaseui.css'; -import dynamic from 'next/dynamic'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import PropTypes from 'prop-types'; -import React, { useEffect, useRef, useState } from 'react'; -import CookieConsent from 'react-cookie-consent'; -import { useAuthState } from 'react-firebase-hooks/auth'; -import { Provider } from 'react-redux'; -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'; -import { useStore } from '../store/store'; -import theme from '../styles/theme'; +import { Box, Button, makeStyles, Typography } from "@material-ui/core"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import LinkUi from "@material-ui/core/Link"; +import { ThemeProvider } from "@material-ui/core/styles"; +import "firebaseui/dist/firebaseui.css"; +import dynamic from "next/dynamic"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import PropTypes from "prop-types"; +import React, { useEffect, useRef, useState } from "react"; +import CookieConsent, { getCookieConsentValue } from "react-cookie-consent"; +import { useAuthState } from "react-firebase-hooks/auth"; +import { hotjar } from "react-hotjar"; +import { Provider } from "react-redux"; +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"; +import { useStore } from "../store/store"; +import "../styles/hotjarNPS.css"; +import theme from "../styles/theme"; -const Footer = dynamic( - () => import('../components/Footer'), - { ssr: false }, -); +const Footer = dynamic(() => import("../components/Footer"), { ssr: false }); const useStyles = makeStyles({ screenContainer: { - margin: 0, - [theme.breakpoints.up('sm')]: { - height: '100vh', + [theme.breakpoints.up("sm")]: { + height: "100vh", }, }, - desktopScreenContainer: { - - }, + desktopScreenContainer: {}, backgroundBlue: { - background: 'url(\'/backgroundBlue.png\')', - backgroundSize: '100% 100%', - backgroundRepeat: 'no-repeat', + background: "url('/backgroundBlue.png')", + backgroundSize: "100% 100%", + backgroundRepeat: "no-repeat", }, backgroundPeach: { - background: 'url(\'/backgroundPeach.png\')', - backgroundSize: '100% 100%', - backgroundRepeat: 'no-repeat', + background: "url('/backgroundPeach.png')", + backgroundSize: "100% 100%", + backgroundRepeat: "no-repeat", }, cookieContainer: { - position: 'static !important', - display: 'flex', - flexWrap: 'wrap', + position: "static !important", + display: "flex", + flexWrap: "wrap", }, cookieButtonContainer: { - display: 'flex', - + display: "flex", }, cookieButton: { margin: 5, @@ -68,9 +61,9 @@ const useStyles = makeStyles({ height: 40, }, cookieContent: { - display: 'flex', - justifyContent: 'space-between', - width: '100%', + display: "flex", + justifyContent: "space-between", + width: "100%", }, }); @@ -80,14 +73,14 @@ function App({ Component, pageProps }) { const { height, width } = useWindowDimensions(); const [user] = isBrowser ? useAuthState(firebase.auth()) : [{}]; const [isLoading, setIsLoading] = useState(false); - const [background, setBackground] = useState('Peach'); + const [background, setBackground] = useState("Peach"); const containerRef = useRef(); const scrollTopRef = useRef(); useEffect(() => { // Remove the server-side injected CSS. - const jssStyles = document.querySelector('#jss-server-side'); + const jssStyles = document.querySelector("#jss-server-side"); if (jssStyles) { jssStyles.parentElement.removeChild(jssStyles); } @@ -98,19 +91,24 @@ function App({ Component, pageProps }) { // or if the router changes (i.e the user navigates) const checkTermsAcceptance = async (u) => { const idToken = await u.getIdToken(); - const serverUser = await axiosGet('/profile', - { - headers: { - authorization: `Bearer ${idToken}`, - }, - }); + const serverUser = await axiosGet("/profile", { + headers: { + authorization: `Bearer ${idToken}`, + }, + }); return serverUser.termsAccepted; }; if (user && user.emailVerified) { checkTermsAcceptance(user).then((termsAccepted) => { // If there is a verified user but they haven't accepted the terms, reroute them to sign-in if (!termsAccepted) { - router.push('/sign-in'); + router.push("/sign-in"); + } + if ( + process.env.NEXT_PUBLIC_ENV === "production" && + getCookieConsentValue("ConsentToCookie") === "true" + ) { + hotjar.identify("USER_ID", { userProperty: user.id }); } }); } else if (user && !user.emailVerified) { @@ -120,27 +118,33 @@ function App({ Component, pageProps }) { }, [user]); useEffect(() => { - router.events.on('routeChangeStart', () => { + router.events.on("routeChangeStart", () => { setIsLoading(true); }); - router.events.on('routeChangeComplete', () => { - analyticsEvent('page_view'); + router.events.on("routeChangeComplete", () => { + analyticsEvent("page_view"); setIsLoading(false); }); - router.events.on('routeChangeError', () => { + router.events.on("routeChangeError", () => { setIsLoading(false); }); + + if (process.env.NEXT_PUBLIC_ENV === "production") { + hotjar.initialize(Number(process.env.NEXT_PUBLIC_HOTJAR_ID), 6); + } }, []); useEffect(() => { - const routesWithoutBackgrounds = ['/settings', '/saved', '/themes/[slug]']; - const routesWithBlueBackgrounds = ['/resources/[resourceSlug]/items/[itemId]']; + const routesWithoutBackgrounds = ["/settings", "/saved", "/themes/[slug]"]; + const routesWithBlueBackgrounds = [ + "/resources/[resourceSlug]/items/[itemId]", + ]; if (routesWithoutBackgrounds.includes(router.pathname)) { - setBackground('None'); + setBackground("None"); } else if (routesWithBlueBackgrounds.includes(router.pathname)) { - setBackground('Blue'); + setBackground("Blue"); } else { - setBackground('Peach'); + setBackground("Peach"); } }, [router]); @@ -148,9 +152,7 @@ function App({ Component, pageProps }) { return ( <> - + @@ -161,8 +163,16 @@ function App({ Component, pageProps }) { alignItems="center" justifyContent="center" > - - + - We use cookies on YSM for a number of reasons that include making - our sites secure, robust and analysing how our site is being used, - which allows us to create more diverse content. - {' '} + We use cookies on YSM for a number of reasons that include + making our sites secure, robust and analysing how our site + is being used, which allows us to create more diverse + content.{" "} - Learn More. + + Learn More. + @@ -209,12 +225,13 @@ function App({ Component, pageProps }) { /> - {process.env.NEXT_PUBLIC_ENV === 'staging' - ? ( - - You are currently viewing the staging environment. - - ) : null } + {process.env.NEXT_PUBLIC_ENV === "staging" ? ( + + + You are currently viewing the staging environment. + + + ) : null}
- { - isLoading ? - : ( - - ) - } + {isLoading ? ( + + ) : ( + + )}