如何使用gatsby-plugin-gdpr-cookies设置Gatsby Cookie同意横幅 [英] How set up a Gatsby Cookie consent banner with gatsby-plugin-gdpr-cookies

问题描述

我的网站收集有关Google Analytics(分析)的信息，因此我需要包含Cookie同意横幅，以便用户选择加入/退出.

My website gathers information for Google Analytics, so I need to include a Cookie consent banner for the users to opt in/out of.

我看到了插件 gatsby-plugin-gdpr-cookies ，并认为它看起来很完美.我已经跟踪了启动过程，并将其放在我的配置文件中.但是我不确定下一步该怎么做.我是否需要创建横幅组件并将其以某种方式链接起来?我试图四处寻找其他示例，但看不到任何示例.

I saw the plugin gatsby-plugin-gdpr-cookies and thought it looked perfect. I've followed the startup and have it inside my config file. However I'm not sure what to do next. Do I need to create a banner component and link it all up somehow? I've tried to look around for other examples but can't see any.

任何帮助表示感谢，谢谢.

Any help appreciated, thanks.

推荐答案

您必须结合Gatsby插件并构建自己的Cookie同意标语，或使用现成的组件来实现此目的.

You have to combine a Gatsby plugin and build your own cookie consent banner or use a ready made component to achieve this.

首先作为 AskaNor_29 建议您安装并配置 gatsby-plugin-gdpr-cookies插件.您可以在此处获取插件.

First as AskaNor_29 suggested you need to install and configure the gatsby-plugin-gdpr-cookies plugin. You can get the plugin here.

在gatsby-config.js中配置插件

Configure the plugin in 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']
      },
    },
  ],
}

第二部分显示cookie同意横幅或模态，以便用户做出选择.

The second part is showing a cookie consent banner or modal so the user can make his choice.

为此，您可以使用 react-cookie-consent npm模块.您可以在此处获得.

For this you can use the react-cookie-consent npm module. You can get the npm package here.

要使其与 gatsby-plugin-gdpr-cookies 一起使用，您需要设置 cookieName ="gatsby-gdpr-google-analytics" 道具.

To make it work with the gatsby-plugin-gdpr-cookies, you need to set the cookieName="gatsby-gdpr-google-analytics" prop.

然后将 CookieConsent 组件放入 layout.js 文件中，以便在用户首先访问的任何页面上将其激活.

Then you put the CookieConsent component in your layout.js file so it's activated on any page the user visits first.

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

该组件带有许多道具，因此您可以调整行为和外观.

The component takes many props so you can tweak the behaviour and looks.

如果您希望同时设置Google Analytics(分析)和Facebook Pixel cookie，则存在用于接受/拒绝cookie的回调，您可以在其中添加自定义代码来设置这两个cookie.

If you want both Google Analytics and Facebook Pixel cookies to be set, there are callbacks for accepting/declining cookies where you can add your custom code to set both cookies.

如果您有兴趣，我写了更长的如何描述这些步骤.

If you're interested I wrote a longer how-to describing the steps.

这篇关于如何使用gatsby-plugin-gdpr-cookies设置Gatsby Cookie同意横幅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！