Gatsbyjs google 分析 gdpr

Question

我想在我的网站中使用 google 分析，但要符合 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 分析的任何数据。

我首先想到的问题是我使用的是 GA4 版本的 GA，但我生成了一个“旧的”Universal Analytics 代码，但它仍然无法正常工作。

谁能告诉我，我做错了什么？

这是我在我的网站上查找 google 分析时我网站上的输出：

 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

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

阅读 some official documentation I've ended using gatsby-plugin-google-gtag（Gatsby 推荐）并且有效，也许对您也有效：

// 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/"],
        },
      },
    },
  ],
}

您可以 omit/remove 所有可选参数，并将 GA-TRACKING_ID 替换为您的。

Gatsbyjs google 分析 gdpr

Gatsbyjs google analytics gdpr

javascript

google-analytics

gatsby

react-cookie

gatsby-plugin