diff --git a/.env b/.env index 33109c3..ef88b81 100644 --- a/.env +++ b/.env @@ -33,3 +33,6 @@ ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='' LEARNING_BASE_URL='' PERSONALIZED_RECOMMENDATION_COOKIE_NAME = 'edx-user-personalized-recommendation' ZENDESK_KEY='' +HOTJAR_APP_ID='' +HOTJAR_VERSION='6' +HOTJAR_DEBUG='' diff --git a/.env.development b/.env.development index e40eb03..44ed398 100644 --- a/.env.development +++ b/.env.development @@ -40,3 +40,6 @@ LEARNING_BASE_URL='http://localhost:2000' SESSION_COOKIE_DOMAIN='localhost' PERSONALIZED_RECOMMENDATION_COOKIE_NAME = 'edx-user-personalized-recommendation' ZENDESK_KEY='' +HOTJAR_APP_ID='' +HOTJAR_VERSION='6' +HOTJAR_DEBUG='' diff --git a/.env.test b/.env.test index acf05c3..7b67427 100644 --- a/.env.test +++ b/.env.test @@ -38,3 +38,6 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral' ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer' LEARNING_BASE_URL='http://localhost:2000' ZENDESK_KEY='test-zendesk-key' +HOTJAR_APP_ID='hot-jar-app-id' +HOTJAR_VERSION='6' +HOTJAR_DEBUG='' diff --git a/package-lock.json b/package-lock.json index 090a811..9f30bbe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3", "@edx/browserslist-config": "^1.1.0", "@edx/frontend-component-footer": "^11.4.1", + "@edx/frontend-enterprise-hotjar": "^1.2.0", "@edx/frontend-platform": "^2.6.2", "@edx/paragon": "20.19.0", "@fortawesome/fontawesome-svg-core": "^1.2.36", @@ -2516,6 +2517,16 @@ "react-is": "^16.13.1" } }, + "node_modules/@edx/frontend-enterprise-hotjar": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@edx/frontend-enterprise-hotjar/-/frontend-enterprise-hotjar-1.2.0.tgz", + "integrity": "sha512-VkoRaUcCePKIRn0j4ODR7aTu5iyKtNjssAfr7m7NHrr/d0YjpFPUtNMqxxjsOZ5rySOgpdb6ibQ9TpbyNJ5qlQ==", + "peerDependencies": { + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-router-dom": "^5.2.0" + } + }, "node_modules/@edx/frontend-platform": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.6.2.tgz", @@ -32147,6 +32158,12 @@ } } }, + "@edx/frontend-enterprise-hotjar": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@edx/frontend-enterprise-hotjar/-/frontend-enterprise-hotjar-1.2.0.tgz", + "integrity": "sha512-VkoRaUcCePKIRn0j4ODR7aTu5iyKtNjssAfr7m7NHrr/d0YjpFPUtNMqxxjsOZ5rySOgpdb6ibQ9TpbyNJ5qlQ==", + "requires": {} + }, "@edx/frontend-platform": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.6.2.tgz", diff --git a/package.json b/package.json index 6e0a917..5b74071 100755 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3", "@edx/browserslist-config": "^1.1.0", "@edx/frontend-component-footer": "^11.4.1", + "@edx/frontend-enterprise-hotjar": "^1.2.0", "@edx/frontend-platform": "^2.6.2", "@edx/paragon": "20.19.0", "@fortawesome/fontawesome-svg-core": "^1.2.36", diff --git a/src/App.jsx b/src/App.jsx index e95e2fd..50f71fe 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,6 +4,9 @@ import { useDispatch } from 'react-redux'; import { Helmet } from 'react-helmet'; import { useIntl } from '@edx/frontend-platform/i18n'; +import { logError } from '@edx/frontend-platform/logging'; +import { initializeHotjar } from '@edx/frontend-enterprise-hotjar'; + import { ErrorPage, AppContext } from '@edx/frontend-platform/react'; import Footer from '@edx/frontend-component-footer'; import { Alert } from '@edx/paragon'; @@ -59,8 +62,18 @@ export const App = () => { window.thunkActions = thunkActions; window.track = track; } - }); - + if (process.env.HOTJAR_APP_ID) { + try { + initializeHotjar({ + hotjarId: process.env.HOTJAR_APP_ID, + hotjarVersion: process.env.HOTJAR_VERSION, + hotjarDebug: !!process.env.HOTJAR_DEBUG, + }); + } catch (error) { + logError(error); + } + } + }, [authenticatedUser, dispatch]); return (