In the evolving landscape of web development, NextJS continues to be a frontrunner, offering powerful features and optimizations with each new release. NextJS 14 introduces the App Router, enhancing the way developers handle routing and analytics integration. This blog post will guide you through integrating Hotjar and Google Analytics into your NextJS 14 project using PullTheCode, focusing on simplicity and efficiency.
Why Hotjar and Google Analytics?
Hotjar and Google Analytics are pivotal in understanding user behavior and website performance. Hotjar provides visual insights like heatmaps and session recordings, while Google Analytics offers comprehensive data on traffic, user engagement, and conversions. Together, they empower developers to make data-driven decisions to enhance user experience and website effectiveness.
Setting Up with PullTheCode:
PullTheCode is a NextJS boilerplate designed to accelerate your development process. It comes pre-configured with essential features, including environment variables for seamless Hotjar and Google Analytics integration. Begin by cloning the PullTheCode repository and preparing your project for development.
Integrating Hotjar in NextJS 14
Many articles online suggest using libraries to invoke the snippet, but since I care about bundle size I will show you how to create a React Component that provides the functionalities you're looking for.
Obtain your Hotjar Project ID
Sign up for Hotjar and create a new project to get your unique Project ID, pretty standard.
Create a new client component
Hotjar and GA attach to the window object, as such we can only load them using the client components.
The component should look something like this:
"use client"
const HotjarSnippet = () => {
if (HOTJAR_ID) return null
return (
<div>
<Script id="hotjar-snippet">
{`
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:${HOTJAR_ID},hjsv:6};
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>
</div>
);
};
Where HOTJAR_ID is usually extracted from the file. You also don't want to return anything in case the variable is not found.
And now you can expose it in your RootLayout, like this:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<HotjarSnippet />
</body>
</html>
)
}
And you're set! By default, Hotjar requires an https connection to start, so you won't be bothered with making local/production environments.
How to set up Hotjar in NextJS 14 with PullTheCode
PullTheCode follows the same convention wheh deciding how to configure Hotjar on NextJS.
In our case, as you can see in the docs, you'll just need to copy the sample `.env` file, input your Hotjar Project ID the NEXT_PUBLIC_HOTJAR_ID variable, and you're good to go!
I hope you found this useful and feel free to checkout https://pullthecode.com for our complete list of features!