Руководство о том, как получить согласие на использование файлов cookie от пользователя в проекте Next.js 13 с помощью маршрутизатора приложений с серверным компонентом и обработать его с помощью встроенного обзора согласия Google Tag Manager.

Примечание: если вы хотите реализовать этот метод в Next.js Page Router, ознакомьтесь с этим руководством https://javascript.plainenglish.io/manage-cookie-consent-in-next-js- с-google-tag-manager-4d58818266ea

Сегодня большинству веб-сайтов требуется система согласия на использование файлов cookie, чтобы соответствовать европейскому регламенту GDPR (и другим). По сути, это означает, что вы не можете хранить файлы cookie на компьютере пользователя, если они не дали вам на это разрешения. И вы не можете разрешить другим службам, активным на вашем сайте (таким как Analytics или Advertising), хранить файлы cookie в вашем домене.

В этой статье я покажу, как получить согласие на использование файлов cookie от пользователя в проекте Next.js 13 и обработать его с помощью встроенного обзора согласия Google Tag Manager.

Предпосылки

Чтобы продолжить работу над этим проектом, вам необходимо:

  • Учетная запись Google Tag Manager и ее контейнер с включенным обзором согласия (я покажу вам, как его включить)
  • Служба, реализованная с помощью установленного файла cookie с помощью Диспетчера тегов Google (мы будем использовать Google Analytics, поскольку большинство служб Google имеют автоматическую проверку согласия, но другие службы могут быть легко реализованы).
  • Базовый проект Next.js 13 с использованием маршрутизатора приложений, в котором мы реализуем баннер для согласия на использование файлов cookie.
  • Базовые знания о Next.js 13, маршрутизаторе приложений, серверных и клиентских компонентах.

Ограничения

Мы создадим базовый пример, в котором пользователь может принять или отказаться от файла cookie без детализации или выбора относительно того, какие файлы cookie принимать, а какие отказываться. Но будет несложно расширить этот пример до более полного решения.

Как это будет работать

Наш проект Next.js 13 будет включать в себя на страницах (используя layout.js) контейнер диспетчера тегов, который будет точкой входа для всех наших кодов мониторинга (аналитика, реклама, ремаркетинг…), тег Менеджер будет «запускать»…