动态添加Google Analytics

Posted 2021-05-04

在我使用Google Analytics之前，我的网站用户需要征得他们的同意。因此我必须动态添加脚本。但我似乎无法让它发挥作用。

我尝试了这个问题的方法：Dynamically add script tag with src that may include document.write

确实添加了脚本标记，但Google Analytics不会触发事件和综合浏览量。

如果我将此代码段添加到我的index.html，一切正常。

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

有任何想法吗？

这是我尝试添加它的方式。

const s = document.createElement('script');
s.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=UA-MYGOOGLEID');
s.async = true;
document.head.appendChild(s);

window.dataLayer = window.dataLayer || [];
window.gtag = () => {dataLayer.push(arguments);}

window.gtag('js', new Date());
window.gtag('config', 'UA-MYGOOGLEID');

答案

arguments不存在于胖箭头功能中。

解决方案是将其作为ES5功能。

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

测试

function gtagtest() {console.log(arguments)}
  gtagtest('event', 'testEvent', {
   'event_category': 'testClick'
  })
Arguments(3) ["event", "testEvent", {…}, callee: ƒ, Symbol(Symbol.iterator): ƒ]

const gtagtest2 = (...args) =>  {console.log(args)}
gtagtest2('event', 'testEvent', {
  'event_category': 'testClick'
})
(3) ["event", "testEvent", {…}]

const gtagtest3 = () =>  {console.log(arguments)}
gtagtest3('event', 'testEvent', {
  'event_category': 'testClick'
})
Uncaught ReferenceError: arguments is not defined
at gtagtest3 (<anonymous>:1:39)
at <anonymous>:1:1