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

Question

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

我看到了插件gatsby-plugin-gdpr-cookies，觉得它看起来很完美。我已经跟踪了启动并将它放在我的配置文件中。但是，我不确定接下来要做什么。我是否需要创建一个横幅组件并以某种方式将其链接起来？我试图环顾四周寻找其他示例，但看不到任何示例。

任何帮助表示赞赏，谢谢。

Answer 1

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

首先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']
      },
    },
  ],
}

第二部分是显示 cookie 同意横幅或模式，以便用户可以做出选择。

为此，您可以使用react-cookie-consentnpm 模块。你可以在这里获取 npm 包。

要使其与 一起使用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>

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

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

如果你有兴趣，我写了一个更长的操作方法来描述这些步骤。