akshaysr-buku
commented
2 years ago @akashvercetti
Closed akshaysr-buku closed 1 year ago
akshaysr-buku
commented
2 years ago @akashvercetti
akashvercetti
commented
2 years ago 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: https://github.com/CleverTap/clevertap-web-sdk/issues/39
or
you could try npm install --save-dev @types/clevertap-web-sdk since type-definitions have been created at: DefinitelyTyped/DefinitelyTyped#57546.
abhushanaj
commented
2 years ago 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.
import Script from 'next/script'function Analytics(){ return (
<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
```ts
const Analytics = dynamic(() => import('@components/analytics'), { ssr: false });
function MyApp({ Component: AppComponent, pageProps }: AppProps) {
return (
<AppComponent {...pageProps} />
<Analytics />
);
}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
commented
2 years ago Thanks @abhu-A-J
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?