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

【问题标题】：How set up a Gatsby Cookie consent banner with gatsby-plugin-gdpr-cookies如何使用 gatsby-plugin-gdpr-cookies 设置 Gatsby Cookie 同意横幅
【发布时间】：2020-05-08 15:12:35
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs cookies google-analytics gatsby

【解决方案1】：

注意，我在通过 Google Analytics（分析）进行跟踪时遇到了问题。经过大量研究后，我在 gatsby-plugin-google-analytics-gdpr 引擎盖下使用的 reactGaOptions 中找到了解决方案。使用 sampleRate 选项启用 100% 跟踪，以便手机也将请求发送给 Google。在正常模式下，它设置为 1%，因此在低带宽下您会丢失很多用户信息。

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

【讨论】：

【解决方案2】：

您必须结合 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>

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

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

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

【讨论】：

这行得通！感谢这个详细的教程。我一直在搜索，这是第一次涵盖初学者的文章。我想知道用户是否可以选择触发 Cookie 同意？我见过网站有 Cookie 设置，点击后会触发 Cookie 同意模式。教程 v2 也许？ :p
你的意思是像一些网站使用的那种模式，你可以一次配置一堆cookie？您有具体的跟踪服务列表吗？
@BojanBedrač 部分是的。例如，这个站点Framer 在页脚的最底部，有这个 Cookie 设置链接。单击它会触发它第一次询问的 Cookie 同意模式。我想象的用例可能是用户偶然或起初说Yes，然后决定拒绝。这似乎是一个很好的实现。
在接受 cookie 后，有人想在隐私页面上选择退出吗？我的快速修复是放置一个带有 onklick 事件的链接，并使用纯 js 删除所有 cookie。但如果所有这些都来自同一个组件，那就更好了。
您能否详细说明如何真正停止跟踪？我已经设置了 cookie 并将其设置为 false，但是当我在我的分析帐户中时，它仍然会跟踪我并显示我的存在。我无法判断它是否真的阻止了跟踪。我还在我的根页面的 cookie 中看到了 _ga。而且我只安装了你上面描述的库。

【解决方案3】：

来自插件page

首先，插件会检查您的网站在哪个环境中运行。如果它当前在您定义的环境之一中运行，它将默认将 Facebook Pixel javascript 添加到您的站点。它不会被它激活或初始化。

默认情况下，此插件不会向 Google 或 Facebook 发送任何数据使其符合 GDPR。用户首先需要接受您的 cookie 政策。通过接受您需要设置两个 cookie - gatsby-gdpr-google-analytics 和 gatsby-gdpr-facebook-pixel。取决于在用户输入时，每个 cookie 的值应为 true 或假的。

如果 gatsby-gdpr-google-analytics cookie 设置为 true，Google Analytics 将在 ClientEntry 上初始化。 Facebook 也是如此像素。

然后将在 onRouteUpdate 上跟踪页面视图。

所以你应该构建一个横幅组件并将cookie设置为true或false，这取决于用户的选择。

【讨论】：

这是一个很好的答案 - 将每个 cookie 设置为具有 true 值很重要，否则插件将不知道该怎么做（如果您正在跟踪多个例如分析和 facebook 之类的 cookie）。如果您使用 react-cookie-consent 之类的包作为横幅（如上面的热门答案中所述）。你的 onAccept 方法看起来像这样：onAccept={() => {Cookies.set("gatsby-gdpr-google-analytics", "true"); Cookies.set("gatsby-gdpr-facebook-pixel", "true"); initializeAndTrack(location); }}