Google 分析中缺少电子商务数据警告消息

Question

我有一个 Next.js 项目，我想在其中使用 Google Analytics Ecommerce，但我收到 Missing Ecommerce Data, View is configured for Ecommerce, but no data is flowing. 警告消息，我不知道如何解决这个问题。

GA 中启用了电子商务

我用 this 博客 post 将 GA 添加到 Next.js

./lib/gtag.js

export const GA_TRACKING_ID = "UA-xxxxxxxxx-1";

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag("config", GA_TRACKING_ID, {
    page_path: url,
  });
};

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, params }) => {
  window.gtag("event", action, params);
};

_document.js

import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

import { GA_TRACKING_ID } from "../lib/gtag";
import { FB_PIXEL_ID } from "../lib/fpixel";

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Global Site Code Pixel - Facebook Pixel */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
                !function(f,b,e,v,n,t,s)
                {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
                n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
                n.queue=[];t=b.createElement(e);t.async=!0;
                t.src=v;s=b.getElementsByTagName(e)[0];
                s.parentNode.insertBefore(t,s)}(window, document,'script',
                'https://connect.facebook.net/en_US/fbevents.js');
                fbq('init', ${FB_PIXEL_ID});
              `,
            }}
          />
          <noscript>
            <img
              height="1"
              width="1"
              style={{ display: "none" }}
              src={`https://www.facebook.com/tr?id=${FB_PIXEL_ID}&ev=PageView&noscript=1`}
            />
          </noscript>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${GA_TRACKING_ID}', {
                    page_path: window.location.pathname,
                });
            `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

_app.js

import * as React from "react";
import App from "next/app";
import { ApolloProvider } from "react-apollo";
import { IntlProvider } from "react-intl";
import { Router } from "next/router";

import withApollo from "../Config/next";
import * as ga from "../Library/gtag";
import * as fbq from "../Library/fpixel";

class MyApp extends App {
  constructor(props) {
    super(props);

    Router.events.on("routeChangeComplete", (url) => {
      ga.pageview(url);
      fbq.pageview();
    });
  }

  render() {
    const { Component, pageProps, apollo } = this.props;
    return (
      <IntlProvider locale="sk">
        <ApolloProvider client={apollo}>
          <Component {...pageProps} />
        </ApolloProvider>
      </IntlProvider>
    );
  }
}

export default withApollo(MyApp);

package.json

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "web": "cross-env NODE_ENV=development node server.js",
    "dev": "next",
    "devServer": "node server.js",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "apollo-boost": "^0.4.4",
    "apollo-upload-client": "^11.0.0",
    "body-parser": "^1.19.0",
    "cross-env": "^6.0.3",
    "express": "^4.17.1",
    "graphql": "^14.5.8",
    "intl": "^1.2.5",
    "js-cookie": "^2.2.1",
    "js-cookies": "^1.0.4",
    "next": "9.1.2",
    "next-cookies": "^2.0.3",
    "next-with-apollo": "^4.3.0",
    "react": "16.11.0",
    "react-apollo": "^3.1.3",
    "react-dom": "16.11.0",
    "react-image-lightbox": "^5.1.1",
    "react-input-range": "^1.3.0",
    "react-intl": "^3.6.1",
    "react-modal": "^3.11.1",
    "react-perfect-scrollbar": "^1.5.3",
    "react-slick": "^0.25.2",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.25.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}

我可以在 GA 中看到访问过的页面：

如果我打开例如产品列表性能，它是空的：

例如我如何尝试跟踪 view_item_list:

Answer 1

我安装了Google Analytics Debugger，它告诉我参数不正确。我通过删除函数参数中的大括号在我的代码中修复了这个问题：

export const event = ({ action, params }) => {
  window.gtag("event", action, params);
};

应该是

export const event = (action, params) => {
  window.gtag("event", action, params);
};

Google 分析中缺少电子商务数据警告消息

Missing Ecommerce Data warning message in Google Analytics

google-analytics

next.js