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.
Top comments (0)