Integração do NextJS com OneTrust

#braziliandevs #tutorial #nextjs #javascript

Quando foi implementado o OneTrust 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 id="ot-sdk-btn" 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 site How 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 o useRouter do NextJS, e dentro do useEffect 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 objeto window no console do navegador.