简体   繁体   English

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

[英]Missing Ecommerce Data warning message in Google Analytics

I have a Next.js project, where I want to use Google Analytics Ecommerce, but I am getting Missing Ecommerce Data, View is configured for Ecommerce, but no data is flowing.我有一个 Next.js 项目,我想在其中使用 Google Analytics 电子商务,但我收到Missing Ecommerce Data, View is configured for Ecommerce, but no data is flowing. warning message and I don't how to fix this.警告消息,我不知道如何解决这个问题。

E-commerce is enabled in GA在 GA 中启用电子商务

在此处输入图像描述

I used this blog post to add GA into Next.js我使用这篇博文将 GA 添加到 Next.js

./lib/gtag.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 _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 _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 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"
  }
}

I can see visited pages in GA:我可以在 GA 中看到访问过的页面:

在此处输入图像描述

If I open for example product list performance, its empty:如果我打开例如产品列表性能,它是空的:

在此处输入图像描述

For example this how I try to track view_item_list :例如,这是我尝试跟踪view_item_list的方式:

在此处输入图像描述

I installed Google Analytics Debugger which told me the parameters are not correct.我安装了Google Analytics Debugger ,它告诉我参数不正确。 I fixed that in my code by removing braces in function parameters:我通过删除 function 参数中的大括号在我的代码中修复了这个问题:

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

should be应该

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM