Gatsby GDPR Cookie Banner 如何实现多个 cookie + 禁用跟踪？答案

【问题标题】：Gatsby GDPR Cookie Banner how to implement multiple cookies + disable tracking?Gatsby GDPR Cookie Banner 如何实现多个 cookie + 禁用跟踪？
【发布时间】：2021-03-18 06:56:44
【问题描述】：

所以我在gatsby-plugin-gdpr-cookies 插件之后设置了一个基本的cookie 横幅，我使用了react-cookie-consent，但它只显示了一个带有接受按钮的简单we use cookies on our website。

如何在我的 cookieconsent 组件中同时传递 google analytics 和 google tag manager？文档仅显示一个 cookieName，我不知道如何添加更多内容，而不仅仅是 google 分析？
另外，我如何检查它是否真的禁用了 cookie 跟踪？

我将插件添加到我的gatsby-config.js

  {
  resolve: `gatsby-plugin-gdpr-cookies`,
  options: {
    googleAnalytics: {
      trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID', // leave empty if you want to disable the tracker
      cookieName: 'gatsby-gdpr-google-analytics', // default
      anonymize: true, // default
      allowAdFeatures: false // default
    },
    googleTagManager: {
      trackingId: 'YOUR_GOOGLE_TAG_MANAGER_TRACKING_ID', // leave empty if you want to disable the tracker
      cookieName: 'gatsby-gdpr-google-tagmanager', // default
      dataLayerName: 'dataLayer', // default
    },
    facebookPixel: {
      pixelId: 'YOUR_FACEBOOK_PIXEL_ID', // leave empty if you want to disable the tracker
      cookieName: 'gatsby-gdpr-facebook-pixel', // default
    },
    // defines the environments where the tracking should be available  - default is ["production"]
    environments: ['production', 'development']
  },
},

然后我将 Cookie 横幅添加到我的 layout.js

      <CookieConsent
    location="bottom"
    buttonText="Accept"
    declineButtonText="Decline"
    cookieName="gatsby-gdpr-google-analytics"
  >
    This website uses cookies to enhance the user experience.
  </CookieConsent>

另外，cookie 只跟踪 gatsby-gdpr-google-analytics，但我也需要它来跟踪 gatsby-gdpr-google-tagmanager

【问题讨论】：

标签： javascript reactjs cookies graphql gatsby

【解决方案1】：

这两个问题的答案相同：一旦用户单击“接受”按钮，您就必须初始化跟踪。在用户接受同意之前，这将取消跟踪所有内容。用户接受后致start tracking：

import { useLocation } from "@reach/router" // this helps tracking the location
import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies'

在您的接受函数中 (onAccept)：

initializeAndTrack(location)

此外，根据react-cookie-consent 包的文档，您暴露了一个onDecline 事件，该事件在用户拒绝GDPR 政策时触发。要允许它，您必须添加 enableDeclineButton 属性。

<CookieConsent
  enableDeclineButton
  onDecline={() => {
    alert("nay!");
  }}
></CookieConsent>

您可以在那里设置参数、本地存储或其他 cookie。

您的最终代码应如下所示：

<CookieConsent
  enableDeclineButton
  onDecline={() => {
    alert("nay!"); // your stuff here
  }} 
  onAccept={() => {
      initializeAndTrack(location)
  }}
  location="bottom"
  buttonText="Accept"
  declineButtonText="Decline"
  cookieName="gatsby-gdpr-google-analytics"> 
  This website uses cookies to enhance the user experience.
</CookieConsent>

【讨论】：

如何检查它是否真的有效？此外，我的 cookie 仅在 cookie 中显示谷歌分析，对于 cookieName，我无法同时添加谷歌分析和谷歌标签管理器？
您不应添加 GTM，因为 GTM 不存储跟踪内容的 cookie。通过 GTM 存储 cookie 启用的工具。

【解决方案2】：

要回答您的问题，您可以导入 Cookie（来自 js-cookie）并使用 onAccept 函数手动设置 cookie。

类似的东西

import CookieConsent, { Cookies } from "react-cookie-consent";

<CookieConsent
  location="bottom"
  buttonText="Accept"
  declineButtonText="Decline"
  cookieName="gatsby-gdpr-google-analytics"
  onAccept={() => {
    Cookies.set("gatsby-gdpr-google-tagmanager", true)
  }}
>
This site uses cookies ...
</CookieConsent>

【讨论】：