如果我像他们推荐的那样加载Google Analytics，一切正常：
<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？
我发现了问题。Google Analytic的代码是：
function gtag(){dataLayer.push(arguments);}
我把它改成：
window.gtag = (...args) => dataLayer.push(args);
但是，GA 需要一个arguments对象，因为它使用 arguments.callee 。