Merge pull request #6 from ajayvarghese/hotjar-debug-support

Added Support for Debug Mode
the-bugging · May 10, 2021 · ae3215c · ae3215c
2 parents 2505d6d + 7199e3a
commit ae3215c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ const HotjarReadyApp = () => {
   const { initHotjar } = useHotjar();
 
   React.useEffect(() => {
-    initHotjar(1234567, 6, myCustomLogger);
+    initHotjar(1234567, 6, false, myCustomLogger);
   }, [initHotjar]);
 
   return <App />;
@@ -89,20 +89,22 @@ const MyCustomComponent = () => {
 | key            | description                | arguments                                                                   | example                                                                                         |
 | -------------- | -------------------------- | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
 | readyState     | States if Hotjar is ready  | N/A                                                                         | N/A                                                                                             |
-| initHotjar     | Initialize method          | (hotjarId: number, hotjarVersion: number, loggerCallback?: console[method]) | (1933331, 6, console.info)                                                                      |
+| initHotjar     | Initialize method          | (hotjarId: number, hotjarVersion: number, hotjarDebug?: boolean, loggerCallback?: console[method]) | (1933331, 6, false, console.info)                                                                      |
 | identifyHotjar | User identify API method   | (userId: string, userInfo: object, loggerCallback?: console[method])        | ('abcde-12345-12345', {name:"Olli",surname:"Parno",address:"Streets of Tomorrow"}, console.log) |
 | stateChange    | Relative path state change | (relativePath: string, loggerCallback?: console[method])                    | ('route/logged-route/user?registered=true')                                                     |
 
 - initHotjar()
 
 1. `hotjarId`: Your Hotjar application ID ex.: 1933331
 2. `hotjarVersion`: Hotjar's current version ex.: 6
-3. `logCallback`: Optional callback for logging wether Hotjar is ready or not
+3. `hotjarDebug`: Optional Debug Mode to see hotjar logs in console ex.: true
+4. `logCallback`: Optional callback for logging wether Hotjar is ready or not
 
 ```tsx
 initHotjar: (
   hotjarId: string,
   hotjarVersion: string,
+  hotjarDebug?: boolean,
   logCallback?: () => void
 ) => boolean;
 ```

diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts
@@ -46,9 +46,9 @@ describe('Tests useHotjar', () => {
 
     const logCallback = console.info;
 
-    initHotjar(123, 6, logCallback);
+    initHotjar(123, 6, false, logCallback);
 
-    expect(initHotjarSpy).toHaveBeenCalledWith(123, 6, logCallback);
+    expect(initHotjarSpy).toHaveBeenCalledWith(123, 6, false, logCallback);
     expect(consoleInfoSpy).toHaveBeenCalledWith('Hotjar ready: true');
   });
 

diff --git a/src/dependencies.ts b/src/dependencies.ts
@@ -14,6 +14,7 @@ export interface IUseHotjar {
   initHotjar: (
     hotjarId: number,
     hotjarVersion: number,
+    hotjarDebug?: boolean,
     logCallback?: (...data: unknown[]) => void
   ) => boolean;
   identifyHotjar: (
@@ -50,13 +51,14 @@ export const appendHeadScript = (
 
 export function hotjarInitScript(
   hotjarId: number,
-  hotjarVersion: number
+  hotjarVersion: number,
+  hotjardebug: boolean
 ): boolean {
   const hasWindow = typeof window !== 'undefined';
 
   if (!hasWindow) return false;
 
-  const hotjarScriptCode = `(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:${hotjarId},hjsv:${hotjarVersion}};a=o.getElementsByTagName('head')[0];r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`;
+  const hotjarScriptCode = `(function(h,o,t,j,a,r){h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};h._hjSettings={hjid:${hotjarId},hjsv:${hotjarVersion},hjdebug:${hotjardebug}};a=o.getElementsByTagName('head')[0];r=o.createElement('script');r.async=1;r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;a.appendChild(r);})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`;
   const isAppended = appendHeadScript(hotjarScriptCode, 'hotjar-init-script');
 
   if (isAppended && hasWindow && window.hj) {

diff --git a/src/index.ts b/src/index.ts
@@ -18,10 +18,11 @@ export default function useHotjar(): IUseHotjar {
     (
       hotjarId: number,
       hotjarVersion: number,
+      hotjarDebug?: boolean,
       logCallback?: (...data: unknown[]) => void
     ): boolean => {
       try {
-        hotjarInitScript(hotjarId, hotjarVersion);
+        hotjarInitScript(hotjarId, hotjarVersion, !!hotjarDebug);
 
         setReadyState(true);