开发者问题收集

动态添加 Google Analytics

2018-02-28
2478

我网站的用户需要征得我的同意才能使用 Google Analytics。因此,我必须动态添加脚本。但我似乎无法让它工作。

我尝试了这个问题中的方法: 动态添加带有 src 的脚本标签,其中可能包含 document.write

这确实添加了脚本标签,但 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');
1个回答

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
Lekoaf
2018-03-01