Getting ReferenceError: window is not defined, when clevertap is initialised in _app.tsx file of NextJs

[akshaysr-buku]

Whenver i use Clevertap in NextJs _app.tsx
i am getting the below error

If the package isn't compatible with Next.js, is there any way I cal initialize clevertap in my App?

[akshaysr-buku]

@akashvercetti

[akashvercetti]

Hi @akshaysr-buku , our SDK is a typically a client side only library and does not by its nature support SSR.
Having said that, there might be a workaround here: #39
or
you could try npm install --save-dev @types/clevertap-web-sdk since type-definitions have been created at: DefinitelyTyped/DefinitelyTyped#57546.

[abhushanaj]

Hi @akashvercetti we also use the clever tap at our organization which runs a Next.js app.

We use it using the following strategy, without relying on the SDK.

1. Create an analytics component, which uses the Next.js Script component to inject the script

import Script from 'next/script'

function Analytics(){
     return (
	<Script strategy="afterInteractive" id="clevertap-script" src="https://d2r1yp2w7bby2u.cloudfront.net/js/a.js" />
	<Script id="clevertap-analytics" strategy="afterInteractive" 
                    dangerouslySetInnerHTML={{ __html:`
                                    var clevertap = {event:[], profile:[], account:[], onUserLogin:[], notifications:[], privacy:[]};
                                    clevertap.account.push({"id": "${clevertapAccountId}"});
                                    clevertap.privacy.push({optOut: false}); 
                                    clevertap.privacy.push({useIP: true});` }}
	/>
      )
 
}

2. You can use this component using the dynamic import in _app.tsx

const Analytics = dynamic(() => import('@components/analytics'), { ssr: false });


function MyApp({ Component: AppComponent, pageProps }: AppProps) {
	return (
			<AppComponent {...pageProps} />
			<Analytics />		
	);
}

3. Using clever tap to send events etc.

If you are using typescript you can write your own types for payload depending on your use case.

export type WindowWithAnalytics = Window &
	typeof globalThis & {	
		clevertap: any;	// write more types here if you want
};
	
class Analytics{
	isWindowRuntime= typeof window !==='undefined'
	   pushEvent(eventName,payload){
	       (window as WindowWithAnalytics).clevertap.event.push(eventName, payload);
          }
          
          
}

// usage

 Analytics.pushEvent('Login',{
          //details
})
	

Hopefully, this helps!

[akshaysr-buku]

Thanks @abhu-A-J