Adding hotjar (#152)

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 => {

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",

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",

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 {

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<TProps = Record<string, unknown>, TInitialProps = TProps> = NextPage<TProps, TInitialProps> & {
 	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) => <DefaultLayout children={page}></DefaultLayout>);
 
@@ -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(
 		<Component {...pageProps}>
@@ -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,
 	};
 };