CleverTap / clevertap-web-sdk

CleverTap Web SDK
https://clevertap.com/
MIT License
14 stars 18 forks source link

📝 Add nextJS app example #53

Closed maurusrv closed 1 year ago

maurusrv commented 2 years ago

This project illustrates how to import the clevertap-web-sdk on a nextJS app.

Since the module is designed for client-side only, for nextJS apps, one can't straightforwardly import the sdk like:

import clevertap from 'clevertap-web-sdk'

due to the library expecting for window object to be defined. See #52

Aside from a workaround, one can asyncly import it when the component mounts or just before an event push:

async function initializeClevertap(): Promise<CleverTap> {
  const clevertap = await import('clevertap-web-sdk')

  // clevertap.default.init(ACCOUNT_ID, TARGET_DOMAIN)
  // clevertap.privacy.push({ optOut: false })
  // clevertap.privacy.push({ useIP: false })
  clevertap.default.setLogLevel(3)

  return clevertap.default
}

This example app does not include the use of react context for simpler implemention or different state / context management.

Deveshb15 commented 1 year ago

Did this work for anyone?

narender2031 commented 1 year ago

yes

Deveshb15 commented 1 year ago

yes

Did you call the function inside a useEffect?

useEffect(() => { initializeClevertap() }, [])

KambleSonam commented 1 year ago

@maurusrv Kindly go through the sample Nextjs web app. Let us know if you are facing any issues here. https://clevertap-next-demo.vercel.app/ Repo Link - https://github.com/KambleSonam/clevertap-next-demo

maurusrv commented 1 year ago

@maurusrv Kindly go through the sample Nextjs web app. Let us know if you are facing any issues here. https://clevertap-next-demo.vercel.app/ Repo Link - https://github.com/KambleSonam/clevertap-next-demo

@KambleSonam any differences that i miss between the demo repo and this PR? if none, it should be good as i also see the dev logs too on the demo site.

  1. it has been a year or so since i created this PR. i am still new in contributing to open source so i don't know, should i close this now? I realize maintaining setups in this repo might become a hassle and does not really make sense since frameworks like next will always update. And the info in the description above is already good for others to stumble upon.

  2. also, for the same reason that it has been a year, note that the sample is not using the latest next setup. but the clevertap integration still is relevant as this is still how our setup is right now when using the sdk on our nextjs clients. one can also consider just using the clevertap api using fetch instead if they are using custom events and not the system events.

thanks!

KambleSonam commented 1 year ago

Yes @maurusrv , you can close the PR. Do let us know if you face any issues with clevertap-web-sdk