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.