Google 标签管理器不加载任何 cookie

Question

出于某种原因，Google 标签管理器在动态添加时不会加载任何 cookie

当用户点击某个接受按钮时，我使用 https://www.googletagmanager.com/gtag/js?id=${GOOGLE_TAGS_ID} 的 src 向 body 添加了一个 script 标签，加载后我 运行这个：

function gtag(...args: any[]) {
  window.dataLayer.push(args);
}

// After the script has finish loading I called this function
function load() {
  gtag('js', new Date());
  gtag('config', GOOGLE_TAGS_ID);
}

Answer 1

TL;DR gtag 函数应该是全局的并且使用 arguments 对象

---

问题是我定义的gtag函数

您应该添加到 HTML 页面的代码是这样的：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<id>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<id>');
</script>

2 我的 gtag 函数有问题：

1. 它不是全局的（也许不是问题，但它与最初的实现不同）。

2. 我使用了 rest 参数 (...args) 而不是使用 arguments 对象。

   因为剩余参数和 arguments 对象不一样，如 MDN - The difference between rest parameters and the arguments object

   所述

在大多数情况下，您应该更喜欢使用其余参数而不是 arguments 对象，但显然，Google 标签管理器 需要arguments 对象。

所以我所做的是：

// The function is usually done in the script tag within the global scope, so we adding the function to the global scope
window.gtag = function gtag(...args: any[]) {
  // The original function was without the ...args, we added it so TypeScript won't scream

  // Use arguments instead of the rest parameter
  // See why here - 
  // TL;DR: arguments contain some data that not passed in the rest parameters
  window.dataLayer.push(arguments);
}