Next.js Discord

Discord Forum

Insert Iubenda In code NextJS

Unanswered
Whooper Swan posted this in #help-forum
Open in Discord
Whooper SwanOP
Hi, I should connect some codes for managing cookies and privacy with iubenda, usually it should be inserted in the head tag in html, but in this case how can I proceed?

I've been searching for days but haven't found anything that can help me.

58 Replies

Whooper SwanOP
and i can insert also <script> tag?
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":3586427,"whitelabel":false,"cookiePolicyId":xxxxxxx,"lang":"it", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","showTitle":false }};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/3586427.js"></script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

this is a example
Toyger
most likely yes, otherwise you can also try https://nextjs.org/docs/app/api-reference/components/script#beforeinteractive
Whooper SwanOP
And will this work globally or just on certain pages?
Toyger
if you add it root layout then globally
Whooper SwanOP
layout.tsx ?
this is my error
and also if i create a .js file, same error
Toyger
then use https://nextjs.org/docs/app/api-reference/components/script#beforeinteractive
by default it should app/layout.tsx, you editing the one in route group, but if it is single then probably it's fine
Whooper SwanOP
check this, i created also file .js just for script, but same error in code
Toyger
you need something like this 
<html lang="en">
      <body>
        {children}
      <Script strategy="beforeInteractive">
      var _iub = _iub || [];
      _iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":3586427,"whitelabel":false,"cookiePolicyId":xxxxxxx,"lang":"it", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","showTitle":false }};
      </Script>
      <Script strategy="beforeInteractive" src="https://cs.iubenda.com/autoblocking/3586427.js"/>
      <Script strategy="beforeInteractive" src="//cdn.iubenda.com/cs/iubenda_cs.js"/>

      </body>
    </html>
Whooper SwanOP
this script go in head
Toyger
as you see in docs it should be defined like that
Whooper SwanOP
other error
i have send a dm
Toyger
change first one to 
<Script strategy="beforeInteractive">{
`      var _iub = _iub || [];
      _iub.csConfiguration = {"askConsentAtCookiePolicyUpdate":true,"floatingPreferencesButtonDisplay":"bottom-right","perPurposeConsent":true,"siteId":3586427,"whitelabel":false,"cookiePolicyId":xxxxxxx,"lang":"it", "banner":{ "acceptButtonDisplay":true,"closeButtonRejects":true,"customizeButtonDisplay":true,"explicitWithdrawal":true,"listPurposes":true,"position":"float-top-center","showTitle":false }};
      `}</Script>
Whooper SwanOP
why blocked ?
Toyger
blocked by client most of time means that you have adblocker or ublock or adguard as browser extension
Whooper SwanOP
i not have nothing that can block.. mh
same thing is for this?

<a href="https://www.iubenda.com/privacy-policy/35364484" class="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe " title="Privacy Policy ">Privacy Policy</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script>
Toyger
it have some link to privacy policy so it's definetely not in <head>
Whooper SwanOP
no, i need to add in footer privacy and cookie
<section className="jsx-230759087 container">
<div className="jsx-230759087 footer false">
<a href="/" title="Home" className="jsx-230759087">
<img
src="/img/logo-nices-nero.svg"
alt="ae studio"
className="jsx-230759087"
/>
</a>
<a
href="https://google.it"
target="_blank"
className="jsx-230759087 font-league"
>
Nices Studio, P.IVA 04544990619
</a>

</div>
</section>
this is my footer.tsx
Toyger
link you add anywhere you want, but script still in layout, but this time without beforeinteractive
Whooper SwanOP
<section className="jsx-230759087 container">
<div className="jsx-230759087 footer false">
<a href="/" title="Home" className="jsx-230759087">
<img
src="/img/logo-nices-nero.svg"
alt="ae studio"
className="jsx-230759087"
/>
</a>
<a
href="https://google.it"
target="_blank"
className="jsx-230759087 font-league"
>
Nices Studio, P.IVA 04544990619
</a>

<Script>
<a href="https://www.iubenda.com/privacy-policy/35364484"
className="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe "
title="Privacy Policy ">Privacy Policy</a>
<Script
type="text/javascript">(function (w, d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})
(window, document
)
;</Script>
</Script>
</div>
</section> ?
Toyger
like that 
<Script>{`(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);`}</Script>

inside layout.tsx
Whooper SwanOP
<Script>
<a href="https://www.iubenda.com/privacy-policy/35364484"
className="iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe "
title="Privacy Policy ">Privacy Policy</a>
<Script>{(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);}</Script>
</Script> ?
not in footer?
Toyger
not in footer,
and why you wrap twice in Script, I said you script in layout, link anywhere you want, probably in footer. for link you don't need Script tag
Whooper SwanOP
ok now go, but not load graphic of button
this is official with my code
but i see only text
in chrome work
Whooper SwanOP
@Toyger can i ask my last problem?
Toyger
yeah
Whooper SwanOP
i need to deploy but recive error
i use plesk for webspace
in my dedicated server
@Whooper Swan i use plesk for webspace
Toyger
iirc and you have something like on screenshot
then you can't host there nextjs, at least in default way, you can host here static exported nextjs, but I doubt that you have something like that.
Whooper SwanOP
and how i host my nextjs ?
Toyger
vercel/railway/netlify/VPS/etc....
Whooper SwanOP
so.. not work on plesk ?
okok i have vps, how deploy on vps?

because when i run npm run build, i recive error with page
Whooper SwanOP
vercel error on deploy
@Toyger
Toyger
do you have axios inside you package-lock.json? because look like it's not in dependecy list
Whooper SwanOP
now i have installed axios but have problem when try to push on github
because i have load a lot of cache
and size is too much
Toyger
your cache shouldnt be in repo, it should be in gitignore