Installing Hubspot Tracking Code in a Next.js v14 App

[PatOfCle]

Hi all. Next.js is becoming a widely used web framework, and I am using it for my company website. Unfortunately, I cannot figure out how to get the tracking code working. 

Here is a similar post that a "solution" was provided for: https://community.hubspot.com/t5/APIs-Integrations/Next-js-tracking-code-installation/td-p/753441. I tried this solution from @Jaycee_Lewis  (although Next v14 uses the App Router instead of Pages Router), and it did not solve the problem. 

If anyone knows how to get this working for Next.js, please let me know. My company has a few other action items contingent on us getting tracking up and running.

Thank you!

[tverdokhlib1 · Accepted solution]

@PatOfCle Did you try to embed the HubSpot tracking code into the Head of next.js based on this documentation https://nextjs.org/docs/pages/api-reference/components/head ?

[lpansarini]

I'm facing the same issue and there is solve on it?

[PatOfCle]

Hi @tverdokhlib1 , yes I did try that. Firstly, that is from the Pages Router under Next.js. Secondly, putting it in the Head component really isn't any different than putting the script in the top level layout.js file in the App Router. 

I believe that there has to be something done on a per-page basis for Next.js SSR, or at the "top level" there has to be some information passed to Hubspot about what page the user is on.

But to answer your question, no the link did not solve my problem. Thank you though. 

[waldothedevelop]

Let me know if you find a way of doing it. @PatOfCle