topic Re: Next.js tracking code installation in APIs & Integrations

Next.js tracking code installation

IEvans — Wed, 08 Feb 2023 15:56:24 GMT

I have been trying to embed the tracking code snippet into my site but I'm unsure how to do this in next.js. If anyone has advice on how to do this for next.js that would be much appreciated.

The tracking code installation information I am following is here:

https://knowledge.hubspot.com/reports/install-the-hubspot-tracking-code

Re: Next.js tracking code installation

Jaycee_Lewis — Thu, 09 Feb 2023 17:26:19 GMT

Hi, @IEvans 👋 Thanks for reaching out! Let's see if the community has any experience here — hey @Teun @MatthiasWeber, do you have a simple example you can share with @IEvans? I am not too familiar with this framework and would love another brain or two here.

Here's what I found:

Create a new file called hubspot.js in the pages directory and paste your HubSpot tracking code into this file:
import React from 'react'; const Hubspot = () => { return ( <> <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/<your-hubspot-id>.js"></script> <script dangerouslySetInnerHTML={{ __html: ` hs.beacon.ready(function() { hs.beacon.identify({ ... }); }); `, }} /> </> ); }; export default Hubspot;
In your pages/_app.js file, import the Hubspot component and render it at the end of the <Head> component:
import Head from 'next/head'; import Hubspot from './hubspot'; function MyApp({ Component, pageProps }) { return ( <> <Head> ... </Head> <Component {...pageProps} /> <Hubspot /> </> ); } export default MyApp;

*Please note, this is an amalgamation of research I did for this topic. And may not be best practices.*

Thanks for taking a look! — Jaycee

Re: Next.js tracking code installation

MatthiasWeber — Fri, 10 Feb 2023 06:46:42 GMT

Looks good @Jaycee_Lewis , i would say. does it works @IEvans ?

Cheers Matt

Re: Next.js tracking code installation

nop1984 — Thu, 13 Jul 2023 13:38:14 GMT

that doesn't solve and has no benefits over Script from 'next/script'

Cannot identify portalId of loaded script. No elements matching `script[data-hsjs-portal]` found on page

Re: Next.js tracking code installation

PatOfCle — Thu, 21 Dec 2023 19:58:28 GMT

Any updates @IEvans ? Did this end up working? Trying to do this myself with NextJS. Unsure if it being Server-Side Rendered affects how/when the scripts run...

Any help would be appreciated here!

Re: Next.js tracking code installation

PatOfCle — Thu, 21 Dec 2023 20:04:07 GMT

@Jaycee_Lewis One other thing: Next.js came out with their new App Router... it looks like your solution is for the Next v13 and earlier Pages Router. Any clue how to do this with the App Router?

Also, curious where you did the research for this solution? Any helpful resources for me?

Re: Next.js tracking code installation

CWizard — Sun, 11 Feb 2024 05:28:00 GMT

Hi, I'm a new here. I have to implement the tracking codes to my Next.js app.

Can you tell me what is it for and how can I check if the tracking code is implemented to my app?
Actually I wrote the codes of yours but I don't know what happened.

Please let me know how it will work.

Thank you

Re: Next.js tracking code installation

FAbdalla — Tue, 26 Mar 2024 11:51:35 GMT

Hi, @PatOfCle

########Installation########

To embed the HubSpot tracking code snippet in your Next.js application, you can follow these steps:

1. **Sign Up for HubSpot**:
   If you haven't already, sign up for a HubSpot account and create a new tracking code snippet from your HubSpot dashboard.

2. **Install HubSpot npm Package**:
   HubSpot provides an npm package for easier integration with Next.js. Install it using npm or yarn:

   ```bash
   npm install @hubspot/tracking-code
   # or
   yarn add @hubspot/tracking-code
   ```

3. **Create a HubSpot Tracking Component**:
   Create a new component to manage the HubSpot tracking code. You can put this component in a file like `HubSpotTracking.js`:

   ```jsx
   // components/HubSpotTracking.js
   import { useEffect } from 'react';
   import { useRouter } from 'next/router';

   const HubSpotTracking = () => {
     const router = useRouter();

     useEffect(() => {
       if (window.hbspt) {
         window.hbspt.initialize('YOUR_HUBSPOT_PORTAL_ID');
       }
       router.events.on('routeChangeComplete', () => {
         if (window.hbspt) {
           window.hbspt.trackPageView();
         }
       });
     }, []);

     return null;
   };

   export default HubSpotTracking;
   ```

   Replace `'YOUR_HUBSPOT_PORTAL_ID'` with your actual HubSpot portal ID.

4. **Include the HubSpot Tracking Component**:
   Add the `HubSpotTracking` component to your layout or specific pages where you want HubSpot tracking to be enabled. For example, in your layout component:

   ```jsx
   // components/Layout.js
   import HubSpotTracking from './HubSpotTracking';

   const Layout = ({ children }) => (
     <div>
       <header>...</header>
       <main>{children}</main>
       <footer>...</footer>
       <HubSpotTracking />
     </div>
   );

   export default Layout;
   ```

5. **Deploy Your Site**:
   Deploy your Next.js application, and the HubSpot tracking code will be included in your site's HTML.

6. **Test and Verify**:
   After deployment, test the tracking to ensure it's working as expected. Visit different pages on your site to make sure HubSpot is tracking your analytics data.

This implementation assumes that you have access to your HubSpot portal ID and the appropriate permissions to use the tracking code. Be sure to replace `'YOUR_HUBSPOT_PORTAL_ID'` with your actual HubSpot portal ID from your HubSpot account.

Remember to refer to HubSpot's official documentation for any specific instructions or updates regarding their tracking code implementation.

Re: Next.js tracking code installation

PatOfCle — Tue, 02 Apr 2024 21:49:11 GMT

Thanks for the response, but this is not 100% accurate. For the Tracker component that you refer to, the version I show below should be in line with the most recent documentation:

"use client"

import { useEffect, useRef } from 'react';

import { usePathname, useSearchParams } from 'next/navigation';

const HubspotTracker = () => {

const pathname = usePathname()

const searchParams = useSearchParams()

const searchParamsDict = Object.fromEntries(searchParams ? searchParams.entries() : [])

const emailAddress = searchParamsDict.email ? searchParamsDict.email : null

var firstLoad = useRef(true);

useEffect(() => {

if (typeof window !== 'undefined') {

var _hsq = window._hsq = window._hsq || [];

if (firstLoad.current === true) {

_hsq.push(['setPath', pathname]);

_hsq.push(['trackPageView']);

if (emailAddress) {

_hsq.push(["identify",{

email: emailAddress

}]);

}

// I think we only need the trackPageView entry once before the identify.

_hsq.push(['setPath', pathname]);

_hsq.push(['trackPageView']);

firstLoad.current = false

} else {

_hsq.push(['setPath', pathname]);

_hsq.push(['trackPageView']);

}

}, [pathname, searchParamsDict])

return null;

};

export default HubspotTracker;

Really just listing this code above for those who had same challenge as me.

I actually had it properly set up just like this for a while, but the tracker for some reason didn't work properly on localhost:3000 out of my dev environment. After deploying to main prod environment, it worked without an issue. Also be sure that you don't have any ad-blockers for this to work.

Re: Next.js tracking code installation

PatOfCle — Tue, 02 Apr 2024 21:50:02 GMT

Thank you regardless, though, for the reply.

Re: Next.js tracking code installation

ASELLAMI — Fri, 17 May 2024 11:02:36 GMT

any news about your work i'm also new and didn't know how to implement the tracking codes to my Next.js app ,
can u please share ur steps with me ?

Re: Next.js tracking code installation

ASELLAMI — Fri, 17 May 2024 11:07:44 GMT

Hello ,
can u please explain more like where to paste the snippet of hubspot tracking code ??
and where to use HubspotTracker that u created ??

Re: Next.js tracking code installation

PatOfCle — Fri, 17 May 2024 15:21:19 GMT

The tracking code code I pasted above is in a component <HubspotTracker />.

I then call add that component to my layout.js file at the top level of my app router in the src/app/ directory.

Here is my code for that layout.js file:

import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

import './globals.css'
import Header from '@/components/Header/Header'
import Footer from '@/components/Footer/Footer'
import HubspotTracker from '@/components/HubspotStuff/HubspotTracker'
import ScrollToTop from '@/components/Misc/ScrollToTop'
import Script from 'next/script'
import { Suspense } from 'react'

import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from "@vercel/speed-insights/next"

export default function RootLayout({ children }) {

return (
<html lang="en">
<link rel="icon" href="/favicon.ico" sizes="any" />

<Header />
<div className='app-container'>
{children}
<Analytics />
<SpeedInsights />
</div>
<Footer />

{/* Script needs to be loaded here, right before the HubspotTracker component */}
<Script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/[YOUR HUBSPOT ID HERE].js" strategy="beforeInteractive" />

<HubspotTracker />
</Suspense>

</body>
</html>
)
}

IMPORTANT: For some reason, the tracker did not work when I was testing on localhost. However, when I deployed the app with the tracking code, tracking worked on my public domain. I believe this difference in outcomes (the tracking code not working local but working once deployed) has something to do with atypical SSR happening (especially the timing of when the code is actually embedded with respect to the client) when testing on localhost.

Hope this helps.

Re: Next.js tracking code installation

ASELLAMI — Fri, 17 May 2024 15:42:38 GMT

Thank you so much for your reply