如何使用 gatsby-plugin-gdpr-cookies 设置 Gatsby Cookie 同意横幅
Posted
技术标签:
【中文标题】如何使用 gatsby-plugin-gdpr-cookies 设置 Gatsby Cookie 同意横幅【英文标题】:How set up a Gatsby Cookie consent banner with gatsby-plugin-gdpr-cookies 【发布时间】:2020-05-08 15:12:35 【问题描述】:我的网站为 Google Analytics 收集信息,因此我需要包含一个 Cookie 同意横幅,以供用户选择加入/退出。
我看到插件gatsby-plugin-gdpr-cookies
并认为它看起来很完美。
我已经关注了启动并将它放在我的配置文件中。但是我不确定下一步该怎么做。我是否需要创建一个横幅组件并以某种方式将其全部链接起来?我试图四处寻找其他示例,但看不到任何示例。
任何帮助表示赞赏,谢谢。
【问题讨论】:
【参考方案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);
以上是关于如何使用 gatsby-plugin-gdpr-cookies 设置 Gatsby Cookie 同意横幅的主要内容,如果未能解决你的问题,请参考以下文章
如何在自动布局中使用约束标识符以及如何使用标识符更改约束? [迅速]
如何使用 AngularJS 的 ng-model 创建一个数组以及如何使用 jquery 提交?