javascript - 如何使用 gatsby-plugin-gdpr-cookies 设置 Gatsby Cookie 同意横幅

Question

我的网站收集 Google Analytics 的信息，因此我需要包含一个 Cookie 同意横幅，供用户选择加入/退出。

我看到了插件 gatsby-plugin-gdpr-cookies 并认为它看起来很完美。 我已经跟踪启动并将其放入我的配置文件中。但我不知道下一步该做什么。我是否需要创建一个横幅组件并以某种方式将其链接起来？我尝试四处寻找其他示例，但没有看到任何示例。

感谢任何帮助，谢谢。

Answer 1

您必须结合 Gatsby 插件并构建您自己的 cookie 同意横幅或使用现成的组件来实现此目的。

首先为 AskaNor_29建议您需要安装并配置 gatsby-plugin-gdpr-cookies 插件。您可以获取插件here .

在 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 同意横幅或模式，以便用户可以做出选择。

为此，您可以使用 react-cookie-consent npm 模块。可以获取npm包here .

要使其与 gatsby-plugin-gdpr-cookies 配合使用，您需要设置 cookieName="gatsby-gdpr-google-analytics" 属性。

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

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

该组件需要许多 Prop ，因此您可以调整行为和外观。

如果您希望同时设置 Google Analytics 和 Facebook Pixel Cookie，可以使用接受/拒绝 Cookie 的回调，您可以在其中添加自定义代码来设置这两个 Cookie。

如果你有兴趣，我写了一篇更长的 how-to describing the steps .