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 rel="preconnect" href="https://fonts.gstatic.com" crossorigin></link>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet"></link>
<Script async src='https://r.wdfl.co/rw.js' data-rewardful='APIKEY'></Script>
</Head>
I am using Stripe elements as a checkout, and when I try to call window.rewardful('convert', { email: email });, or rewardful('convert', { email: email });, I am told that window.rewardful is not a function and rewardful is not defined respectively.
It is being called when paymentIntent.status is succeeded.
Solution is to not to use
useEffect()and instead load required content using Next.js<Script />tags withstrategyset tobefore-interactive. If you don't load before interactive it won't work._document.js: