时间戳

首页 > 解决方案 > Gatsby GDPR Cookie Banner 如何实现多个 cookie + 禁用跟踪？

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

问题描述

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

  1. 如何同时传入google analytics我google tag manager的 cookieconsent 组件？文档只显示一个 cookieName 而我不知道如何添加不仅仅是谷歌分析？

  2. 另外，我如何检查它是否真的禁用了 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 Banner 添加到我的 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

标签： javascriptreactjscookiesgraphqlgatsby

解决方案

要回答您的问题，您可以导入 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>

推荐阅读