Google Analytics（分析）中缺少電子商務數據警告消息

Question

我有一個 Next.js 項目，我想在其中使用 Google Analytics 電子商務，但我收到Missing Ecommerce Data, View is configured for Ecommerce, but no data is flowing. 警告消息，我不知道如何解決這個問題。

在 GA 中啟用電子商務

我使用這篇博文將 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 ，它告訴我參數不正確。 我通過刪除 function 參數中的大括號在我的代碼中修復了這個問題：

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

應該

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

Google Analytics（分析）中缺少電子商務數據警告消息

問題描述

1 個解決方案

解決方案1
0 已采納 2021-05-15 16:49:42

Google Analytics（分析）中缺少電子商務數據警告消息

問題描述

1 個解決方案

解決方案1 0 已采納 2021-05-15 16:49:42

解決方案1
0 已采納 2021-05-15 16:49:42