在加载其他所有内容后使用 Webpack 加载 Google Analytic 的 gtag.js

Question

如果我按照他们的建议加载 Google 分析，一切正常：

<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123');
</script>

但是，我想在加载和运行其他所有内容后加载 GA。我的项目使用了Webpack和React，所以想在React挂载后使用Webpack的动态导入：

initGoogleAnalytics.js:

import { GA_ID } from 'settings';

export default () => {
  window.dataLayer = window.dataLayer || [];
  window.gtag = (...args) => window.dataLayer.push(args);
  window.gtag('js', new Date());
  window.gtag('config', GA_ID);

  if (process.env.NODE_ENV === 'production') {
    const script = window.document.createElement('script');
    script.async = 1;
    script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
    const elem = window.document.getElementsByTagName('script')[0];
    elem.parentNode.insertBefore(script, elem);
  }
};

组件：

componentDidMount() {
  initGoogleAnalytics();
}

但是，这不会记录任何内容。它也不会发出任何网络请求，除了加载 gtag/js.

React挂载后如何加载GA？

Answer 1

我发现了问题。 Google 分析的代码是：

function gtag(){dataLayer.push(arguments);}

我改成了：

window.gtag = (...args) => dataLayer.push(args);

但是，GA 需要一个 arguments 对象，因为它使用 arguments.callee.

在加载其他所有内容后使用 Webpack 加载 Google Analytic 的 gtag.js

Loading Google Analytic's gtag.js using Webpack after everything else loads

javascript

google-analytics

reactjs

webpack

gtag.js