Next.js Discord

Discord Forum

Experiences with Next.js and Consent Management

Unanswered
Goldstripe sardinella posted this in #help-forum
Open in Discord
Goldstripe sardinellaOP
Hello fellow developers out there 👋

So I am sitting here, working on a customer-website, I am building with the latest next.js version. Of course, looking towards a first release candidate, the tedious topic of gdsm comes up. Naturally I want to set up a proper consent management tool, so that my visitors are able to configure their privacy settings as they see fit. The customer wants to use hubspot forms, posthog and probably some social integration in the near future.

Since I have only used next.js in personal projects so far, where something like has never been necessary (duh), my experience with consent management in next.js is non-existent.

So I've tried implementing usercentrics (because I get it "free-ish" with the privacy-statement generator (german company e-recht24) I am using) but so far I've failed, probably through my limited understanding of next.js

So my question:
Has anyone out there been successful in implementing usercentrics in a recent next.js version and could share their implementation with me?
Has anyone out there another recommendation for my usecase so I could check it out?

Some help here would be more than appreciated! 🙂

Cheers from Bavaria,
Max

20 Replies

American Crow
Servus Max,
i have implemented a GDPR compliant cookie consent for with Next14 and GA4 (not usercentrics).
I am almost always using Cloudflare's Zaraz for it.

They have a server side implementation for the big tools e.g. GA4, Google Ads, FB Pixel, Google Maps, Instagram and more.
You can manually add any third party script you'd like to load after cookie consent (technical, analyitcs, marketing) was given.

Zaraz acts as a man in the middle. It does not send any data to those tools if consent was not given. Additionally you can config things like ip anonymization before sending the data. So there is no connection made to Google (or others) before consent was given.

In my case i am loading tawk.to, GA4 and Google maps after consent.
I recently switched to Zaraz' Cookie Banner (ui). Which is GDPR complient and there is some other even stricter mode for it.

You do get an API for Zaraz too. So you can manually add events e.g. zaraz.track() wich i am not using too much. Since all the GA4 events are alerady implemented in my case. But that might be different for usercentrics and might be a con if you have to setup a lot of tracking yourself.

Another con is that Adblockers like uBlock do block the loading of Zaraz entirely which automatically results in no scripts being loaded. Hence that's what users probably want but from a business perspective you might still want to ask users with an adblock if they want to consent to cookies.

The pros being that you have mostly decoupled your cookie consent solution from your code. You can add/remove/edit scripts from the zaraz dashboard. And Zaraz is the most GDPR compliant solution i've found so far. And it's free in its basic tier (i have never needed to upgrade)

https://www.cloudflare.com/application-services/products/zaraz/
Goldstripe sardinellaOP
@American Crow thanks for the hint! I will now try out zaraz. Looks very interesting/promising!
Ah darnit. Obviously I would have to migrate all my DNS stuff to cloudflare, which is not really possible, as I don't only use the domain for the website, but a lot of othe stuff comes after this. :/ but thanks for the suggestion, still!
Does anyone else have experience with consent management in next 14?
Goldstripe sardinellaOP
Uhh interesting
Let me attempt that
While you're here: Could you maybe send me a screenshot of the spot in your code where you implemented it? I'm using the <Script> component from next and I'm not sure I use it right 😄
American Crow
On my phone right now will do when back at PC
But yeah using Script tag with after interactive and pointing to the URL to the zaraz script
In root layout
Goldstripe sardinellaOP
Hmm
That is exactly what i'm trying to do with usercentrics right now
I can see on the dev tools that some magic is happening
But the banner isn't shown
And sometimes you can't scroll, probably because some stuff of usercentrics still takes over
American Crow
I have no experience with usercentrics. So I can't really tell.
Goldstripe sardinellaOP
worth a shot 😄
American Crow
Okay back at PC
 <html lang="en" className={`${inter.variable}`} suppressHydrationWarning>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
        <Toaster />
      </body>
      <Script strategy="lazyOnload" src="https://zaraz.capsloq.de/thirdpartyscripts/i.js"></Script>
    </html>

Note that i changed the default url of the script