Как настроить баннер согласия Gatsby Cook ie с помощью gatsby-plugin-gdpr-cookies - PullRequest
Новая
       6

Как настроить баннер согласия Gatsby Cook ie с помощью gatsby-plugin-gdpr-cookies

2 голосов
/ 22 января 2020

Мой веб-сайт собирает информацию для Google Analytics, поэтому мне нужно включить баннер согласия Cook ie, чтобы пользователи могли входить и выходить из него.

Я увидел плагин gatsby-plugin-gdpr-cookies и подумал, что он выглядит идеально. Я проследил за запуском и у меня в конфигурационном файле. Однако я не уверен, что делать дальше. Нужно ли создавать баннерный компонент и каким-либо образом связать его? Я пытался найти другие примеры, но не вижу ни одного.

Любая помощь приветствуется, спасибо.

Ответы [ 3 ]

8 голосов
/ 26 января 2020

Вы должны скомбинировать плагин Gatsby и создать свой собственный поварский баннер ie или использовать готовый компонент для достижения этой цели.

Сначала как AskaNor_29 предложил вам установить и настройте плагин gatsby-plugin-gdpr-cookies. Вы можете получить плагин здесь .

Сконфигурировать плагин в gatsby-config. js

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID',
          // Setting this parameter is optional
          anonymize: true
        },
        facebookPixel: {
          pixelId: 'YOUR_FACEBOOK_PIXEL_ID'
        },
        // Defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },
  ],
}

Вторая часть показывает согласие повара ie баннер или модальный, чтобы пользователь мог сделать свой выбор.

Для этого вы можете использовать модуль react-cookie-consent npm. Вы можете получить пакет npm здесь .

Чтобы он работал с gatsby-plugin-gdpr-cookies, вам необходимо установить cookieName="gatsby-gdpr-google-analytics" prop.

Тогда вы поместите компонент CookieConsent в файл layout.js, чтобы он активировался на любой странице, которую пользователь посещает первым. 

<CookieConsent
          location="bottom"
          buttonText="Accept"
          declineButtonText="Decline"
          cookieName="gatsby-gdpr-google-analytics">
This site uses cookies ...
</CookieConsent>

Компонент принимает много реквизитов, чтобы вы могли настроить поведение и внешний вид.

Если вы хотите, чтобы были установлены файлы cookie Google Analytics и Facebook Pixel, существуют обратные вызовы для принятия / отклонения файлов cookie, где вы можете добавить свой собственный код для установки обоих файлов cookie.

Если вам интересно, я написал длиннее инструкции с описанием шагов .

1 голос
/ 25 января 2020

Из плагина страница

Прежде всего плагин проверяет, в какой среде работает ваш сайт. Если в настоящее время он работает в одной из определенных вами сред, он добавит пиксель Facebook javascript по умолчанию на ваш сайт. Это не будет активировано или инициализировано этим.

По умолчанию этот плагин не будет отправлять какие-либо данные в Google или Facebook, чтобы сделать его совместимым с GDPR. Сначала пользователь должен принять вашу политику использования файлов cookie. Приняв, что вам нужно установить два куки - gatsby-gdpr-google-analytics и gatsby-gdpr-facebook-pixel. В зависимости от введенного пользователем значения каждого из файлов cookie должно быть истинным или ложным.

Если для gatsby-gdpr-google-analytics cook ie задано значение true, Google Analytics будет инициализироваться в onClientEntry. То же самое относится и к пикселю Facebook.

Вид страницы будет затем отслеживаться на onRouteUpdate.

Таким образом, вы должны создать компонент баннера и установить куки в true или false, это зависит от на выбор пользователя.

0 голосов
/ 05 марта 2020

Внимание, у меня возникла проблема с отслеживанием с помощью Google Analytics. После долгих исследований я нашел решение в ReactionGaOptions, которое используется gatsby-plugin-google-analytics-gdpr. Используйте параметр sampleRate, чтобы включить отслеживание на 100%, чтобы мобильные телефоны отправляли запросы в Google. В обычном режиме он установлен на 1%, поэтому в низком диапазоне вы потеряете много пользовательской информации. 

reactGaOptions: {
  debug: false,
  gaOptions: {
    sampleRate: 100,
    siteSpeedSampleRate: 100
  }
}
...