如何使用 gatsby-plugin-gdpr-cookie 设置盖茨比 Cookie 同意横幅

Question

我的网站收集谷歌分析的信息，所以我需要包含一个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 Pixelcookie，则可以使用接受/拒绝cookie的回调，您可以在其中添加自定义代码来设置这两个cookie。

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

Answer 2

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

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

Answer 3

从插件页面

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

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

如果 gatsby-gdpr-google-analytics cookie 设置为 true，则 Google 分析将在 ClientEntry 上初始化。脸书也是如此 像素。

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

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