NextJS Интеграция с OneTrust

Когда OneTrust был внедрен на сайте одного из проектов, над которым я работал, я полагал, что это будет что-то простое, несколько строк кода в макете _document.js приложения, но я не верил, что дыра окажется чуть ниже. Со временем использования появилась проблема, которая осталась незамеченной. При импорте данных из CDN OneTrust в приложении происходит все волшебство. Перейдем к коду:

<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() { }`,
  }}
/>

Этот код размещается в компоненте страницы _document.js. Этот javascript отвечает за отображение на сайте условий принятия файлов cookie и управление файлами cookie сайта. Доступ к менеджеру cookie осуществляется с помощью кнопки в приложении, которая должна содержать id и класс, считываемый OneTrust JS.

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

Сообщаемая ошибка

При просмотре страниц сообщалось, что менеджер cookie не может быть доступен. После долгих поисков я наткнулся на этот сайт Как добавить Google Analytics 4 в Next.js (который меня озарил) со следующей реализацией, использующей gtag.

Второй шаг, решение проблемы

Для устранения этой ошибки было разработано следующее решение:

const router = useRouter();

useEffect(() => {
  const handleRouteChange = () => {
    window.OneTrust.initializeCookiePolicyHtml();
  };

  router.events.on('routeChangeComplete', handleRouteChange);

  return () => {
    router.events.off('routeChangeComplete', handleRouteChange);
  };
}, [router.events]);

В странице _app.js приложения необходимо импортировать UseRouter от NextJS, а внутри UseEffect прослушивать события маршрутизатора. Когда маршрут полностью изменится, он будет прослушивать события и инициализировать библиотеку OneTrust.

Заключительные соображения

Эта проблема может возникнуть с любой внешней библиотекой, обслуживаемой через CDN. Рекомендуется, если это происходит, проверить, какие библиотеки существуют в объекте окна в консоли браузера.

Этот контент является репостом с сайта EZ.devs нашего участника сообщества Лукаса Виейра. Станьте частью сообщества и размещайте здесь свои сообщения!