Hotjar Installation Code

Unanswered

Shane0608 posted this in #help-forum

Open in Discord

Shane0608OP

2023-06-11T13:17:25.000Z

Hi, does anyone know how to install hotjar installation code to our nextjs website?

#help-forum

49 Replies

Asian black bear

2023-06-11T13:19:48.000Z

I have never used it, but i am guessing you just add their script tag and it works through dom apis

Shane0608OP

2023-06-11T13:22:28.000Z

Hi Minabot, I'm also confused. There is no documentation out there. So, I'm hoping someone from the community has tried installing it before. I also think that an npm react should be run.

Asian black bear

2023-06-11T13:26:22.000Z

An npm package shouldn't be necessary, you don't need to webpack it

Are you using app dir or pages?

@Shane0608 they actually do have an npm package https://www.npmjs.com/package/@hotjar/browser

Shane0608OP

2023-06-11T13:32:49.000Z

Hi Minabot, thank you for checking. I've a looked on that one already but documentation isn't that clear.

I have the Hotjar Installation Code with me, just need to know the proper nextjs script to be added into my code.

Asian black bear

2023-06-11T13:34:04.000Z

Do you use /app or /pages

Shane0608OP

2023-06-11T13:34:31.000Z

@Asian black bear we are using /pages

Asian black bear

2023-06-11T13:34:39.000Z

That is good

What is the install snippet they gave you?

Do you want to use the npm one, or make life easy and just use the <script> tag they give you?

Shane0608OP

2023-06-11T13:36:42.000Z

The code is similar to this

Asian black bear

2023-06-11T13:38:44.000Z

You would put it in the <Head> section of a custom _document page. https://nextjs.org/docs/pages/building-your-application/routing/custom-document

There is a small complication because they want you to actually embed javascript in the tag, but by default React will escape it such that it will not run (to prevent XSS). To get around that you need to use dangerouslySetInnerHTML

<script dangerouslySetInnerHTML={{__html:`
(function(h,o,t,j,a,r){ //...
//...
})()
`}} />

React is prickly about vanilla JS stuff, but Hotjar probably just wants to add some event listeners to document, which really should be fine.

Shane0608OP

2023-06-11T13:47:52.000Z

I was actually thinking if the code below is correct

import React from 'react'

export default () =>
<React.Fragment>
<script dangerouslySetInnerHTML={{ __html: `
(function(h,o,t,j,a,r){
h.hj=h.hjfunction(){(h.hj.q=h.hj.q[]).push(arguments)};
h._hjSettings={hjid:123456789,hjsv:0};
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=');
</script>

</React.Fragment>

That's only a sample hotjar code inside the script

Oh, I doubled checked, it seems like we're using /app routing

Asian black bear

2023-06-11T14:05:20.000Z

ok, so you will want to put it in the "root" layout or whatever

there is no real reason to wrap it in a component, you can just put it like this:

<head>
    ...
    <script dangerouslySetInnerHTML={{ __html: `
      (function(h,o,t,j,a,r){
        h.hj=h.hjfunction(){(h.hj.q=h.hj.q[]).push(arguments)};
        h._hjSettings={hjid:123456789,hjsv:0};
        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=%27);
    </script>
</head>

but it is really important it goes in the root layout, otherwise, the script will be injected into the document every time the page changes. This is definitely not what hotjar wants.

Also, since the snipped does mutate the DOM to add a script tag, and in /app Next.js the entire document is controlled, it may or may not have an issue.

The react person at Next.js insists that it is fine, but idk

If you find that the element gets randomly removed, please tell me so I can complain about it to them ðŸ™‚

Shane0608OP

2023-06-11T14:12:32.000Z

Yes, most of our tracking codethe like Facebook Pixel is located in root layout then just call the import Head from 'next/head'

Asian black bear

2023-06-11T14:12:58.000Z

yeah, I mean hotjar is gonna work exactly like a Pixel

it is a tool by and for marketing people

Shane0608OP

2023-06-11T14:13:35.000Z

That's why I'm a bit confused if I should do what I did with Pixel - cause pixel integration just works perfectly

Asian black bear

2023-06-11T14:14:04.000Z

what did you do for the pixel?

I always added them with a dangerouslySetInnerHTML script tag like we are discussing

Shane0608OP

2023-06-11T14:17:45.000Z

In the root component folder - I created a folder name Pixel, under Pixel folder created a pixel-1.js & index.js

Pixel.js
import React from 'react'

export default () =>
<React.Fragment>
<script dangerouslySetInnerHTML={{ html:

!function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window,document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '12345667');
      fbq('init', '12345678');
      fbq('track', 'PageView');

}}
/>
<noscript dangerouslySetInnerHTML={{ html:

<img height="1" width="1" 
      src="https://www.facebook.com/tr?id=123445567&ev=PageView
      &noscript=1"/>

}}
/>
</React.Fragment>

index.js
import React from 'react'
import Head from 'next/head'

import FACEBOOK_PIXEL_1 from './facebook/pixel-1'

export default ({name}) => {

return(
<Head>
{name === 'FACEBOOK_PIXEL_1' && <FACEBOOK_PIXEL_1 />}
</Head>
)
}

Asian black bear

2023-06-11T14:18:55.000Z

you can definitely do that, it just makes your root layout look cleaner

Shane0608OP

2023-06-11T14:18:56.000Z

Then on the pages/index.js (where the head of the pages code)

I pasted this paragraph
<div>
<Pixel name='FACEBOOK_PIXEL_1' />
</div>

Asian black bear

2023-06-11T14:19:14.000Z

well, that is not very good

with the FB code that is not as bad because it does if(f.fbq)return;

ie. it won't install itself twice

note that the hotjar snipped has no such check

both should just go in app/layout.jsx

alright im off to bed, good luck!

Shane0608OP

2023-06-11T14:28:24.000Z

Thanks @Asian black bear for helping out. I'll definitely try your advise.

Asian black bear

2023-06-11T14:31:34.000Z

@Shane0608 For sure! Let me know if hotjar works correctly for you, I am definitely curious now.

@Asian black bear Do you use /app or /pages

Mini Lop

2023-06-30T18:20:36.000Z

do you know how to install hotjar using /app dir?

@Mini Lop do you know how to install hotjar using /app dir?

Asian black bear

2023-06-30T18:56:01.000Z

I am pretty sure you can add the install "tag" to the root layout. It doesn't really care about react or next

If you are determined to use their npm package you could wrap it in a context

@Asian black bear I am pretty sure you can add the install "tag" to the root layout. It doesn't really care about react or next

Mini Lop

2023-06-30T19:33:28.000Z

cool thank you!