如何使用 gatsby-plugin-gdpr-cookies 设置 Gatsby Cookie 同意横幅 [英] How set up a Gatsby Cookie consent banner with gatsby-plugin-gdpr-cookies

问题描述

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

My website gathers information for Google Analytics, so I need to include a Cookie consent banner for the users to opt in/out of.

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

I saw the plugin gatsby-plugin-gdpr-cookies and thought it looked perfect. I've followed the startup and have it inside my config file. However I'm not sure what to do next. Do I need to create a banner component and link it all up somehow? I've tried to look around for other examples but can't see any.

感谢任何帮助，谢谢.

推荐答案

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

You have to combine a Gatsby plugin and build your own cookie consent banner or use a ready made component to achieve this.

首先，AskaNor_29 建议您需要安装和配置 gatsby-plugin-gdpr-cookies 插件.您可以在此处获取插件.

First as AskaNor_29 suggested you need to install and configure the gatsby-plugin-gdpr-cookies plugin. You can get the plugin here.

在 gatsby-config.js 中配置插件

Configure the plugin in 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 同意横幅或模式，以便用户做出选择.

The second part is showing a cookie consent banner or modal so the user can make his choice.

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

For this you can use the react-cookie-consent npm module. You can get the npm package here.

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

To make it work with the gatsby-plugin-gdpr-cookies, you need to set the cookieName="gatsby-gdpr-google-analytics" prop.

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

Then you put the CookieConsent component in your layout.js file so it's activated on any page the user visits first.

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

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

The component takes many props so you can tweak the behaviour and looks.

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

If you want both Google Analytics and Facebook Pixel cookies to be set, there are callbacks for accepting/declining cookies where you can add your custom code to set both cookies.

如果您有兴趣，我写了更长的如何描述步骤.

If you're interested I wrote a longer how-to describing the steps.

这篇关于如何使用 gatsby-plugin-gdpr-cookies 设置 Gatsby Cookie 同意横幅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！