From a015ee8312c873325d5e2293f3822c8f28f03215 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Tue, 30 Apr 2024 16:58:37 +0200 Subject: [PATCH] :sparkles: Installing hotjar --- next.config.js | 6 ++++++ package-lock.json | 6 ++++++ package.json | 1 + src/front/Config/VariablesFront.ts | 4 ++++ src/pages/_app.tsx | 22 +++++++++++++++++++++- 5 files changed, 38 insertions(+), 1 deletion(-) diff --git a/next.config.js b/next.config.js index 997db3d9..b79689f9 100644 --- a/next.config.js +++ b/next.config.js @@ -14,6 +14,8 @@ const nextConfig = { NEXT_PUBLIC_IDNOT_CLIENT_ID: process.env.NEXT_PUBLIC_IDNOT_CLIENT_ID, NEXT_PUBLIC_IDNOT_BASE_URL: process.env.NEXT_PUBLIC_IDNOT_BASE_URL, NEXT_PUBLIC_DOCAPOSTE_API_URL: process.env.NEXT_PUBLIC_DOCAPOSTE_API_URL, + NEXT_PUBLIC_HOTJAR_SITE_ID: process.env.NEXT_PUBLIC_HOTJAR_SITE_ID, + NEXT_PUBLIC_HOTJAR_VERSION: process.env.NEXT_PUBLIC_HOTJAR_VERSION, }, serverRuntimeConfig: { @@ -27,6 +29,8 @@ const nextConfig = { NEXT_PUBLIC_IDNOT_CLIENT_ID: process.env.NEXT_PUBLIC_IDNOT_CLIENT_ID, NEXT_PUBLIC_IDNOT_BASE_URL: process.env.NEXT_PUBLIC_IDNOT_BASE_URL, NEXT_PUBLIC_DOCAPOSTE_API_URL: process.env.NEXT_PUBLIC_DOCAPOSTE_API_URL, + NEXT_PUBLIC_HOTJAR_SITE_ID: process.env.NEXT_PUBLIC_HOTJAR_SITE_ID, + NEXT_PUBLIC_HOTJAR_VERSION: process.env.NEXT_PUBLIC_HOTJAR_VERSION, }, env: { @@ -40,6 +44,8 @@ const nextConfig = { NEXT_PUBLIC_IDNOT_CLIENT_ID: process.env.NEXT_PUBLIC_IDNOT_CLIENT_ID, NEXT_PUBLIC_IDNOT_BASE_URL: process.env.NEXT_PUBLIC_IDNOT_BASE_URL, NEXT_PUBLIC_DOCAPOSTE_API_URL: process.env.NEXT_PUBLIC_DOCAPOSTE_API_URL, + NEXT_PUBLIC_HOTJAR_SITE_ID: process.env.NEXT_PUBLIC_HOTJAR_SITE_ID, + NEXT_PUBLIC_HOTJAR_VERSION: process.env.NEXT_PUBLIC_HOTJAR_VERSION, }, // webpack: config => { diff --git a/package-lock.json b/package-lock.json index 8e2addc7..19fe455d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-gtm-module": "^2.0.11", + "react-hotjar": "^6.3.1", "react-select": "^5.7.2", "react-toastify": "^9.1.3", "sass": "^1.59.2", @@ -4211,6 +4212,11 @@ "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz", "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==" }, + "node_modules/react-hotjar": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/react-hotjar/-/react-hotjar-6.3.1.tgz", + "integrity": "sha512-EwMqL+ROSlKzatMhT/aqRq7XWWfzlnHynSBSTJh5M2O78mBiPohiSl4Ysls3HOQkkD9y6L22BW0c9bxK2JguwQ==" + }, "node_modules/react-is": { "version": "18.3.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.0.tgz", diff --git a/package.json b/package.json index 48db6203..bdad1366 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-gtm-module": "^2.0.11", + "react-hotjar": "^6.3.1", "react-select": "^5.7.2", "react-toastify": "^9.1.3", "sass": "^1.59.2", diff --git a/src/front/Config/VariablesFront.ts b/src/front/Config/VariablesFront.ts index 8dec0730..06204921 100644 --- a/src/front/Config/VariablesFront.ts +++ b/src/front/Config/VariablesFront.ts @@ -25,6 +25,10 @@ export class FrontendVariables { public FC_CLIENT_ID!: string; + public HOTJAR_SITE_ID!: number; + + public HOJAR_VERSION!: number; + private constructor() {} public static getInstance(): FrontendVariables { diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 76dfa042..c2205983 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,9 +3,10 @@ import { FrontendVariables } from "@Front/Config/VariablesFront"; import "@Front/index.scss"; import type { NextPage } from "next"; import type { AppType, AppProps } from "next/app"; -import type { ReactElement, ReactNode } from "react"; +import { useEffect, type ReactElement, type ReactNode } from "react"; import getConfig from "next/config"; import { GoogleTagManager } from "@next/third-parties/google"; +import { hotjar } from "react-hotjar"; export type NextPageWithLayout, TInitialProps = TProps> = NextPage & { getLayout?: (page: ReactElement) => ReactNode; @@ -25,6 +26,8 @@ type AppPropsWithLayout = AppProps & { fcAuthorizeEndpoint: string; fcClientId: string; docaposteApiUrl: string; + hotjarSiteId: number; + hotjarVersion: number; }; const { publicRuntimeConfig } = getConfig(); @@ -43,6 +46,8 @@ const MyApp = (({ fcAuthorizeEndpoint, fcClientId, docaposteApiUrl, + hotjarSiteId, + hotjarVersion, }: AppPropsWithLayout) => { const getLayout = Component.getLayout ?? ((page) => ); @@ -58,6 +63,19 @@ const MyApp = (({ instance.FC_AUTHORIZE_ENDPOINT = fcAuthorizeEndpoint; instance.FC_CLIENT_ID = fcClientId; instance.DOCAPOST_API_URL = docaposteApiUrl; + instance.HOTJAR_SITE_ID = hotjarSiteId; + instance.HOJAR_VERSION = hotjarVersion; + useEffect(() => { + if (!hotjarSiteId || !hotjarVersion) { + console.warn("No hotjar site id or version provided"); + return; + } + console.log("Intializing hotjar"); + hotjar.initialize({ + id: hotjarSiteId, + sv: hotjarVersion, + }); + }, [hotjarSiteId, hotjarVersion]); return getLayout( @@ -80,6 +98,8 @@ MyApp.getInitialProps = async () => { fcAuthorizeEndpoint: publicRuntimeConfig.NEXT_PUBLIC_FC_AUTHORIZE_ENDPOINT, fcClientId: publicRuntimeConfig.NEXT_PUBLIC_FC_CLIENT_ID, docaposteApiUrl: publicRuntimeConfig.NEXT_PUBLIC_DOCAPOST_API_URL, + hotjarSiteId: publicRuntimeConfig.NEXT_PUBLIC_HOTJAR_SITE_ID, + hotjarVersion: publicRuntimeConfig.NEXT_PUBLIC_HOTJAR_VERSION, }; };