其他加載完成后，使用Webpack加載Google Analytic的gtag.js

Question

如果我按照他們的建議加載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？

Answer 1

我發現了問題。 Google Analytic的代碼為：

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

我將其更改為：

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

但是，GA需要一個arguments對象，因為它使用arguments.callee 。

其他加載完成后，使用Webpack加載Google Analytic的gtag.js

問題描述

1 個解決方案

解決方案1
0 已采納 2019-08-05 02:47:39

其他加載完成后，使用Webpack加載Google Analytic的gtag.js

問題描述

1 個解決方案

解決方案1 0 已采納 2019-08-05 02:47:39

解決方案1
0 已采納 2019-08-05 02:47:39