Google Analytics 事件跟踪：按钮侦听器不起作用答案

【问题标题】：Google Analytics Event Tracking: button listener does not workGoogle Analytics 事件跟踪：按钮侦听器不起作用
【发布时间】：2015-05-20 21:47:52
【问题描述】：

我需要为按钮添加 GA 事件跟踪的事件处理程序。我彻底阅读了文档并花了一个小时在谷歌上搜索，但没有成功。会话跟踪有效（我在实时分析中看到自己），但事件跟踪不起作用。这是我的代码：

<html>
<head>
<script>
  (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-12345678-1', 'auto');
  ga('send', 'pageview');
</script>
</head>

<body>
<div>
<script>
var downloadLink = document.getElementById('submit_btn');
addListener(downloadLink, 'click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
});
function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
</script>
<button type="submit" id="submit_btn" name="submit_btn">submit</button></div>
</body>
</html>

我在这里做错了什么？

【问题讨论】：

标签： javascript google-analytics

【解决方案1】：

我不确定，但可能是页面上调用JavaScript代码的方式。您可以尝试以下代码：

<body>
  <div>
    <button type="submit" id="submit_btn" name="submit_btn">submit</button>
  </div>  
</body>
<script>
  var downloadLink = document.getElementById('submit_btn');

  addListener(downloadLink, 'click', function() {
    ga('send', 'event', 'button', 'click', 'nav-buttons');
  });

  function addListener(element, type, callback) {
    if (element.addEventListener) element.addEventListener(type, callback);
    else if (element.attachEvent) element.attachEvent('on' + type, callback);
  }
</script>
</html>

【讨论】：

这成功了！我做对了吗？你只是把js部分放在按钮下面？
您只能在创建要附加到的元素之后附加事件处理程序 - 因此您的代码在放置在按钮上方时不起作用，但在其下方时起作用。如果您仍然希望将您的 javascript 放在页面的头部，您需要推迟执行，直到您的页面的 HTML 内容呈现。这个答案应该对此有所帮助：stackoverflow.com/questions/799981/…
正如 Eike 所指出的，在将 eventListener 附加到它之前，您必须确保该元素存在，否则它将无法工作。