盖茨比中的条件集anonymize_ip

Question

我试图使用gatsby-plugin-google-gtag和自定义cookie提示组件在Gatsby站点上实现跟踪验收。

当前，跟踪代码正在设置和工作，cookie提示组件正在有条件地呈现，这取决于用户以前是否就跟踪进行了选择。失败的地方是尝试根据用户的选择有条件地设置anonymize_ip。我尝试基于true/false中的三元语句设置gatsby-config.js，但这似乎会导致终端中与GraphQL相关的登录问题(而不是链接)出现错误。

anonymize_ip: document.cookie.match(/^(.*;)?\s*ga-disabled\s*=\s*[^;]+(.*)?$/) ? true : false, // If cookie exists, set value to true

有谁知道实现这一目标的最佳方法吗？

谢谢

Cookie提示

import React from "react";
import { setCookie } from "../../assets/js/utils/cookies";

const CookiesPrompt = () =>  {
    
    const gaOptout = () => {
        setCookie('ga-disabled', true, 30);
    }

    const gaAccept = () => {
        setCookie('ga-hide-prompt', true, 30);
    }

    return (
        <div className="cookies-prompt">
            <div className="cookies-prompt__wrap">
                <div className="cookies-prompt__title">This website uses cookies</div>
                <button onClick={() => gaOptout()} className="cookies-prompt__link button--non">I wish to opt-out</button>
            </div>
            <button onClick={() => gaAccept()} className="cookies-prompt__button button button--primary">Accept</button>
        </div>
    );
};

export default CookiesPrompt;

Gatsby-config.js

plugins: [
    "gatsby-plugin-sass", "gatsby-plugin-react-helmet", "gatsby-transformer-json", "gatsby-plugin-image", "gatsby-plugin-sharp", "gatsby-transformer-sharp", 
    {
        resolve: `gatsby-plugin-google-gtag`,
        options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
            'G-xxxxxxx', // Google Analytics / GA
        ],
        // This object gets passed directly to the gtag config command
        // This config will be shared across all trackingIds
        gtagConfig: {
            // optimize_id: 'OPT_CONTAINER_ID',
            anonymize_ip: document.cookie.match(/^(.*;)?\s*ga-disabled\s*=\s*[^;]+(.*)?$/) ? true : false, // If cookie exists, set value to true
            cookie_expires: 0,
        },
        // This object is used for configuration specific to this plugin
        pluginConfig: {
            // Puts tracking script in the head instead of the body
            head: false,
            // Setting this parameter is also optional
            respectDNT: true,
            // Avoids sending pageview hits from custom paths
            exclude: ['/preview/**', '/do-not-track/me/too/'],
        },
        },
    },
    {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'data',  // Identifier. Will then be queried as `dataJson`
            path: './src/assets/data',   // Source folder containing the JSON files
        },
    },
    {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'projectImages',  // Identifier. Will then be queried as `projectImagesJson' ?
            path: './public/static/projects',   // Source folder containing the JSON files
        },
    },
 ]

Answer 1

gatsby-config.js配置是在构建时设置的，而不是在运行时设置的，因此您无法在该环境/文件中按需侦听document。

但是，您可以通过触发onClick函数来使用基于用户选择( gaOptout() )的匿名IP：

<div onClick={gaOptout}>Deactivate Google Tracking</a>

其中gaOptout

function gaOptout() {
  ;(document.cookie =
    disableStr + "=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/"),
    (window[disableStr] = !0)
}

var gaProperty = "UA-XXXXXXXX-X",
  disableStr = "ga-disable-" + gaProperty
document.cookie.indexOf(disableStr + "=true") > -1 && (window[disableStr] = !0)