使用Cookie分类脚本引入Google Analytics时ga未定义错误求助

我使用以下脚本引入Google Analytics，用于适配Cookie授权机制：

<script type="text/plain" data-cookiecategory="cookie">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxxxxxxx-x', 'auto');
  ga('send', 'pageview');
</script>

执行时出现错误：

Uncaught TypeError: ga is not a function

备注：刷新页面后脚本可正常运行；替换为普通<script>标签也能正常工作，但必须保留data-cookiecategory属性以适配Cookie授权机制，请问该如何解决？

解决方案 #

核心原因 #

使用type="text/plain"后，浏览器不会立即执行脚本，只有当Cookie授权机制将其转为可执行状态时才会运行。而脚本中直接调用ga('create')和ga('send')时，analytics.js可能还未加载完成，导致ga未被定义；刷新后正常是因为浏览器缓存了analytics.js，脚本激活后ga能快速被初始化。

具体修复方法 #

方法1：利用GA的队列机制提前推送命令

Google Analytics的初始化代码已经将ga定义为一个队列函数（即使analytics.js未加载，调用ga()也只会把命令存入队列，不会报错）。调整脚本逻辑如下：

<script type="text/plain" data-cookiecategory="cookie">
  // 先初始化GA命令队列
  window.ga = window.ga || function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  // 创建并加载Analytics脚本
  var scriptEl = document.createElement('script');
  var firstScript = document.getElementsByTagName('script')[0];
  scriptEl.async = 1;
  scriptEl.src = '//www.google-analytics.com/analytics.js';
  firstScript.parentNode.insertBefore(scriptEl, firstScript);
  
  // 直接推送命令到队列，无需等待脚本加载完成
  ga('create', 'UA-xxxxxxxx-x', 'auto');
  ga('send', 'pageview');
</script>

当analytics.js加载完成后，会自动处理队列中的所有命令，避免报错。

方法2：监听脚本加载完成事件后执行GA命令

给加载analytics.js的script标签添加onload事件，确保只有当脚本加载完成后才调用ga相关方法：

<script type="text/plain" data-cookiecategory="cookie">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
  // 添加onload事件，确保脚本加载完成后再初始化GA
  a.onload = function() {
    ga('create', 'UA-xxxxxxxx-x', 'auto');
    ga('send', 'pageview');
  };
  m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
</script>

这种方式更严谨，能确保ga函数完全可用后再执行命令。

方法3：拆分逻辑，配合Cookie授权回调

如果你的Cookie授权工具提供了同意后的回调函数，可以将GA的初始化逻辑拆分：

1. 保留带data-cookiecategory的脚本，仅用于加载analytics.js：

<script type="text/plain" data-cookiecategory="cookie">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
</script>

2. 在Cookie授权同意的回调中执行GA命令：

// 假设你的Cookie工具同意回调为onCookieConsentGranted
function onCookieConsentGranted() {
  if (typeof ga === 'function') {
    ga('create', 'UA-xxxxxxxx-x', 'auto');
    ga('send', 'pageview');
  }
}

这种方式能确保仅在用户同意Cookie后才初始化GA，完全符合合规要求。

内容的提问来源于stack exchange，提问作者Juan