如何使用 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=() =&gt; 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 提交?

如何使用laravel保存所有行数据每个行名或相等

如何使用 Math.Net 连接矩阵。如何使用 Math.Net 调用特定的行或列?

WSARecv 如何使用 lpOverlapped?如何手动发出事件信号?