window.rewardful is not a function when integrating Rewardful into Next.js

reno_rita

I have inserted the code snippets given by rewardful into my next.js _document.js file in order to have the required code on every page, like this: useEffect(() => { function func1(w,r) { w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)} } func1(window,'rewardful'); }, []); And this is my head tag. APIKEY replaces the API key I have in the code: <Head> <link rel="preconnect" href="https://fonts.googleapis.com"></link> <link...

Originally asked by rob on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

Solution is to not to use useEffect() and instead load required content using Next.js <Script /> tags with strategy set to before-interactive . If you don't load before interactive it won't work. _document.js : <body> ... <Script id="rewardful_func" strategy="beforeInteractive"> {`(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q|| []).push(arguments)}})(window,'rewardful');` } </Script> <Script id="rewardful_api" strategy="beforeInteractive" src="https://r.wdfl.co/rw.js" data-rewardful="YOUR_REWARDFUL_CODE" > </Script> </body>

Full answer by rob: https://stackoverflow.stackexchange.com/a/77900222 (CC BY-SA 4.0).

Need it done for your business? UphillTech.