Usage of Partytown

[martinbianchi]

Hi Folks,

Not sure if here is the correct place for this.

I've been trying to implement partytown to load the hotjar script inside a worker thread instead of on the main thread but I couldn't make it work. The installation verification on Hotjar says that everything is correctly but I can't see any metric being logged.

Is it possible to make it work Hotjar with Partytown?

Here are the configs that I tried without success:

partytown = {
                lib: "/_next/static/~partytown/",
                forward: ['hj', 'hjBootstrap', 'hjLazyModules', 'hjSiteSettings', '_hjSettings'],
                resolveUrl: function (url) {
                  if (url.hostname === 'vars.hotjar.com') {
                    return new URL('my-reverse-proxy' + url.pathname + url.search);
                  }
                  return url;
                },
};

partytown = {
                lib: "/_next/static/~partytown/",
                forward: ['hj'],
                resolveUrl: function (url) {
                  if (url.hostname === 'vars.hotjar.com') {
                    return new URL('my-reverse-proxy' + url.pathname + url.search);
                  }
                  return url;
                },
};

Thanks in advance!

[tcetin]

@martinbianchi Did you find any solution to that?

[martinbianchi]

@tcetin Nop :( At the time I tried, hotjar was consuming things from the main thread internally (I think it was GA). When I moved to the service worker many of those internal calls started to fail.

[tcetin]

@martinbianchi Thank you for your response. I am also trying to make it work but It seems it doesn't work in a web worker since it needs to access cookies and write cookies. I hope partytown team can find a solution for it. I also created a discussion on partytown repository: https://github.com/BuilderIO/partytown/discussions/466

[callum-gander]

Any updates on this? We're looking to potentially use Hotjar with PartyTown at my company but can't really get started until we know it'll actually work

[Andyradall]

Following

[callum-gander]

Bumping this again

[Andyradall]

@callum-gander I do this as an alternative, simply loading Hotjar after user interaction (avoiding google pagespeed performance hit by Hotjar initiation):

import Hotjar from '@hotjar/browser';

onMount(() => {
	// Function to initialize Hotjar after user interaction
	const initHotjar = () => {
		const siteId = [your hotjar id];
		const hotjarVersion = 6;

		try {
			Hotjar.init(siteId, hotjarVersion);
		} catch (error) {
			console.error('Failed to initialize Hotjar:', error);
		}

		// Remove the event listeners after Hotjar has been initialized
		window.removeEventListener('click', initHotjar);
		window.removeEventListener('scroll', initHotjar);
	};

	// Add event listeners for the click and scroll events
	window.addEventListener('click', initHotjar);
	window.addEventListener('scroll', initHotjar);
});