Gatsbyjs谷歌分析gdpr

Question

我想在我的网站上使用谷歌分析，但要符合gdpr，所以只有在用户同意的情况下才能使用它。

我使用的是gatsby，并遵循了这个教程：https://www.improvebadcode.com/gatsby-gdpr-cookie-consent/，这对我的理解很有意义。

所以我用的是gatsby-plugin-gdpr-cookies和react-cookie-consent。

我的gatsby-config如下所示：

plugins: [
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: '---', // leave empty if you want to disable the tracker
          cookieName: 'gatsby-gdpr-google-analytics', // default
          anonymize: true, // default
        },
        // defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development'],
      },
    },

和我的App.js文件中的cookie同意如下所示：

<CookieConsent
        enableDeclineButton
        flipButtons
        location="bottom"
        buttonText="Zustimmen"
        declineButtonStyle={{ background: '#5f7063', border: 'solid grey 1px', color: 'grey' }}
        style={{ background: '#5f7063' }}
        declineButtonText="Ablehnen"
        buttonStyle={{
          backgroundColor: '#fff',
          color: '#000',
          fontSize: '13px',
        }}
        cookieName="gatsby-gdpr-google-analytics"
      >
        Diese Website speichert Cookies auf Ihrem Computer. ...
      </CookieConsent>

在gatsby构建我的cookie横幅后，显示完全正常，但我在google分析中没有收到任何数据。

我首先想到的问题是，我使用的是GA的GA4版本，但我生成了一个“旧的”通用分析标签，它仍然不起作用。

谁能告诉我，我哪里做错了？

这是当我在我的网站上搜索google analytics时，我在网站上的输出：

 var options = (0, _merge.default)(_defaultOptions.default, pluginOptions);

  if (isEnvironmentValid(options.environments)) {
    // google analytics
    initGoogleAnalytics(options); // facebook pixel

    initFacebookPixel(options);
  }
}; // initializing helpers


exports.onClientEntry = onClientEntry;

var initGoogleAnalytics = function initGoogleAnalytics(options) {
  if (cookies.get(options.googleAnalytics.cookieName) === "true" && (0, _validTrackingId.validGATrackingId)(options)) {
    _reactGa.default.initialize(options.googleAnalytics.trackingId);

    window.GoogleAnalyticsIntialized = true;
  }
};

var initFacebookPixel = function initFacebookPixel(options) {
  if (cookies.get(options.facebookPixel.cookieName) === "true" && (0, _validTrackingId.validFbPixelId)(options) && typeof window.fbq === "function") {
    window.fbq("init", options.facebookPixel.pixelId);
    window.FacebookPixelInitialized = true;
  }
};

var checkIfGoogleAnalyticsIsInitilized = function checkIfGoogleAnalyticsIsInitilized() {
  return !!window.GoogleAnalyticsIntialized;
};

var checkIfFacebookPixelIsInitilized = function checkIfFacebookPixelIsInitilized() {
  return !!window.FacebookPixelInitialized;
}; // track


var onRouteUpdate = function onRouteUpdate(_ref, pluginOptions) {
  var location = _ref.location;

  if (pluginOptions === void 0) {
    pluginOptions = {};
  }

  var options = (0, _merge.default)(_defaultOptions.default, pluginOptions);

  if (isEnvironmentValid(options.environments)) {
    // google analytics
    if (!checkIfGoogleAnalyticsIsInitilized()) initGoogleAnalytics(options);

    if (cookies.get(options.googleAnalytics.cookieName) === "true" && (0, _validTrackingId.validGATrackingId)(options) && _reactGa.default.ga) {
      var gaAnonymize = options.googleAnalytics.anonymize;
      var gaAllowAdFeatures = options.googleAnalytics.allowAdFeatures;
      gaAnonymize = gaAnonymize !== undefined ? gaAnonymize : true;
      gaAllowAdFeatures = gaAllowAdFeatures !== undefined ? gaAllowAdFeatures : true;

      _reactGa.default.set({
        page: location.pathname,
        anonymizeIp: gaAnonymize,
        allowAdFeatures: gaAllowAdFeatures
      });

      _reactGa.default.pageview(location.pathname);
    } // google tag manager


    if (cookies.get(options.googleTagManager.cookieName) === "true" && (0, _validTrackingId.validGTMTrackingId)(options)) {
      setTimeout(function () {
        var data = options.googleTagManager.dataLayerName ? window[options.googleTagManager.dataLayerName] : window.dataLayer;

        if (typeof data === "object") {
          var eventName = options.googleTagManager.routeChangeEvent || "gatsbyRouteChange";
          data.push({
            event: eventName
          });
        }
      }, 50);
    } // facebook pixel


    if (!checkIfFacebookPixelIsInitilized()) initFacebookPixel(options);

    if (cookies.get(options.facebookPixel.cookieName) === "true" && (0, _validTrackingId.validFbPixelId)(options) && typeof window.fbq === "function") {
      window.fbq("track", "PageView");
    }
  }
};

exports.onRouteUpdate = onRouteUpdate;

Answer 1

我最近遇到了同样的问题，一些谷歌分析插件(gatsby-plugin-gdpr-cookies和gatsby-plugin-google-analytics)。看起来两者实际上都在使用旧版本的追踪器。脚本被完美地插入到页面中，但它不会在Google的仪表板中显示任何结果。

阅读some official documentation我已经结束使用gatsby-plugin-google-gtag (由盖茨比推荐)，它起作用了，也许它也适用于你：

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
          "GA-TRACKING_ID", // Google Analytics / GA
          "AW-CONVERSION_ID", // Google Ads / Adwords / AW 
          "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
        ],
        // 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: 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/"],
        },
      },
    },
  ],
}

您可以省略/删除所有可选参数，并将GA-TRACKING_ID替换为您的参数。