NextJS와 OneTrust의 통합

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. OneTrust에서 CDN을 가져오면 마법사를 적용할 수 없습니다. Vamos pro codigo:

<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 codigo é 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 쿠키 생성은 JS에서 OneTrust로 전환할 수 있는 클래스를 확인하고 이를 적용하기 위해 필요합니다.

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

오류 보고

페이지를 탐색할 때 보고서를 작성하고 쿠키를 확인하거나 액세스할 수 있습니다. Depois de muita busca cheguei a esse 사이트 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

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]);

_app.js 페이지는 NextJS에서 useRouter를 가져오기 위한 응용 프로그램이며, useEffect는 라우터에서 이벤트를 호출하기 위해 사용됩니다. Quando a rota mudar completamente, ele escutará os eventos, e inicializará a biblioteca do OneTrust.

고려사항

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.


Esse conteúdo é um repost da EZ.devs para o membro da nossa comunidade . Faça parte da comunidade e poste aqui também!