使用 Gatsby 实现 Google 同意模式答案

【问题标题】：Google Consent Mode Implementation using Gatsby使用 Gatsby 实现 Google 同意模式
【发布时间】：2022-06-29 01:11:27
【问题描述】：

我正在关注这个tutorial 关于实施谷歌同意模式以将 cookie 添加到我的网站！通过使用 Gatsby.js，我不确定如何添加这些代码：

<!-- The initial config of Consent Mode -->
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('consent', 'default', {
ad_storage: 'denied',
analytics_storage: 'denied',
wait_for_update: 1500,
});
gtag('set', 'ads_data_redaction', true);
</script>

<!-- Cookie Information Pop-up Script is required for the SDK -->
<script id="CookieConsent" src="https://policy.app.cookieinformation.com/uc.js" data-culture="EN" type="text/javascript"></script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>

</head>
<body>

您知道如何在 Gatsby 中实现此代码吗？是否有任何库或其他东西可以帮助实现这些脚本！谢谢

【问题讨论】：

标签： javascript gatsby google-tag-manager

【解决方案1】：

使用来自 Gatsby 插件中心的插件 gatsby-plugin-gdpr-cookies

它将为您提供您正在寻找的内容，您还可以在插件的选项中列出您要跟踪的 cookie + 您希望提供的 cookieName，然后您可以在创建一个组件级别时使用它cookie 工具栏如：

{
  resolve: `gatsby-plugin-gdpr-cookies`,
  options: {
    googleAnalytics: {
      trackingId: process.env.UA_TAG, // your UA tag goes here
      cookieName: `gatsby-gdpr-google-analytics`,
      anonymize: true,
      allowAdFeatures: false
    },
    environments: [`production`, `development`]
  },
},

它限制了使用 React-Helmet 将脚本注入网站头部的使用，因为插件将为您处理脚本注入。

【讨论】：

谢谢！关于 Cookie 组件，我不确定如何制作自定义组件？有什么想法吗？
当然 - 让我为你添加另一个答案，这样我就有更多的字符，虽然我会省略大部分内容，因为你为 JSX 设置的样式和组件取决于你，但基本功能不能提供
感谢您的支持！！
没问题，我已将其添加为新答案

【解决方案2】：

此组件用作页面加载时应用的初始屏幕。

import React, { useState, useEffect } from 'react';

import { useLocation } from '@reach/router';
import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies';
import Cookies from 'js-cookie';

import CookieSettings from './Settings';

const CookieBanner = () => {
    const [showBanner, setShowBanner] = useState(false);
    const [showSettings, setShowSettings] = useState(false);
    const location = useLocation();

    // showSettings -> use this state property to open a configuration
    // window which may open up more information on the cookie(s) being applied

    useEffect(() => {
        setShowBanner(Cookies.get('gatsby-gdpr-responded') !== 'true');
    }, [])

    useEffect(() => {
        initTracking();
    }, [Cookies.get('gatsby-gdpr-responded')])

    const initTracking = () => {
        initializeAndTrack(location)
    }

    const handleAccept = () => {
        Cookies.set('gatsby-gdpr-google-analytics', true, { expires: 365 })
        handleCloseAll();
    }

    const handleDecline = () => {
        Cookies.remove('gatsby-gdpr-google-analytics');
        handleCloseAll();
    }

    const handleCloseAll = () => {
        setShowSettings(false);
        setShowBanner(false);

        Cookies.set('gatsby-gdpr-responded', true, { expires: 365 });
    }

    return (
        // add your component logic here
        // Take not of the different functions that are available above, like handleAccept / handleDecline / handleCloseAll 
        // handleCloseAll -> if a user declines / closes the banner
        // handleAccept -> a button to accept by default
        // handleDecline -> a button to decline the cookies

    )
}

export default CookieBanner

下一个组件更像是一个配置屏幕，它提供有关正在应用的 cookie 的更多信息，如果您注意到 Toggle 的导入，我们使用一个切换来允许用户在任何时候专门打开或关闭他们的 cookie点，如果您有许多 GDPR 合规性，您当然可能希望创建单独的函数来处理 cookie 的删除或传递要删除/应用的 cookie 名称的可重用函数。

import React, { useState } from 'react';

import Cookies from 'js-cookie';

import Button from '@components/Button';
import Toggle from '@components/Inputs/Toggle';

const CookieSettings = ({
    handleAccept,
    handleDecline,
    initTracking,
    handleCloseAll
}) => {
    const [trackAnalytics, setTrackAnalytics] = useState(Cookies.get('gatsby-gdpr-google-analytics') === 'true')

    const handleToggle = () => {
        Cookies.set('gatsby-gdpr-responded', true, { expires: 365 });

        setTrackAnalytics((prevState) => {
            if (prevState) {
                Cookies.remove('gatsby-gdpr-google-analytics');
            } else {
                Cookies.set('gatsby-gdpr-google-analytics', true, { expires: 365 })
            }

            return !prevState
        })

        initTracking();
    }

    return (
        // your JSX code here
    )
}

export default CookieSettings;

【讨论】：