Quando foi implementado oOneTrust no site de um dos projetos que trabalhei, acreditei que seria algo fácil, coisa poucas linhas de código no layout_document.js da aplicação, mas não acreditava que o buraco seria um pouco mais em baixo. Com o tempo de uso, foi relatado um problema que passou despercebido. Quando se importa os dados da CDN do OneTrust, no da aplicação a mágica toda acontece. Vamos pro código:

<script  src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"  type="text/javascript"  charSet="UTF-8"  data-domain-script={process.env.NEXT_PUBLIC_ONETRUST_KEY}></script><script  type="text/javascript"  dangerouslySetInnerHTML={{    __html: `function OptanonWrapper() { }`,  }}/>

Esse código é colocado no componente da página_document.js. Esse javascript é responsável responsável por mostrar no site os termos para aceitar os cookies, e gerenciar os cookies do site. O gerenciador de cookies é acessado por um botão na aplicação que deve conter um id e uma class que são lidas pelo JS da OneTrust.

<button className="ot-sdk-show-settings">  Gerenciar cookies</button>

Erro reportado

Quando se navegava pelas páginas, foi reportado que não se conseguia acessar o gerenciador de cookies. Depois de muita busca cheguei a esse siteHow to add Google Analytics 4 to Next.js (no qual me deu uma luz) com a seguinte implementação, usando o gtag.

Segundo passo, resolvendo o problema

A solução desenvolvida para acabar com esse erro foi a seguinte:

const router = useRouter();useEffect(() => {  const handleRouteChange = () => {    window.OneTrust.initializeCookiePolicyHtml();  };  router.events.on('routeChangeComplete', handleRouteChange);  return () => {    router.events.off('routeChangeComplete', handleRouteChange);  };}, [router.events]);

Na página_app.js da aplicação você deverá importar ouseRouter do NextJS, e dentro douseEffect você deverá escutar os eventos do router. Quando a rota mudar completamente, ele escutará os eventos, e inicializará a biblioteca do OneTrust.

Considerações finais

Esse problema poderá ocorrer com qualquer biblioteca externa servida via CDN. O aconselhável, caso ocorra, e verificar quais as bibliotecas existentes no objetowindow no console do navegador.