用addEventListener（）

Question

我有两段代码用于跟踪Google Analytics（分析）中每个出站链接上我的网站的点击事件，并且HTML部分如下所示：

    
<a class="shopitem" href="<?php echo $itemurl; ?>" onclick="gaTrack('<?php echo $merchant; ?>','<?php echo $itemurl; ?>'); return false;"><?php echo $itemtitle; ?></a>
    

并且我将下面的Google Analytics（分析）javascript代码放置在head标签中：

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

  gtag('config', 'UA-XXXXXXXX-1'); 

  /**
   * Function that tracks a click on an outbound link in Analytics.
   * This function takes a valid URL string as an argument, and uses that URL string
   * as the event label. Setting the transport method to 'beacon' lets the hit be sent
   * using 'navigator.sendBeacon' in browser that support it.
   */
  var gaTrack = function(merchant, url) {
        gtag('event', 'click', {
                   'event_category': 'outbound',
                   'event_label': merchant,
                   'transport_type': 'beacon',
                   'event_callback': function(){document.location = url;}
        });
  } 
</script>

但是，有人告诉我，使用内联onclick函数不如使用addEventListener进行事件跟踪，因此我尝试将HTML代码修改为如下所示：

<a class="shopitem" id="shop_link" name="<?php echo $merchant; ?>" href="<?php echo $itemurl; ?>"><?php echo $itemtitle; ?></a>

并将我的JavaScript分为两部分：

一个仍然放置在head标签中，

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

  gtag('config', 'UA-XXXXXXXX-1'); 
</script>

另一个放置在页脚中（在HTML代码之后）：

    <script>
  /**
   * Function that tracks a click on an outbound link in Analytics.
   * This function takes a valid URL string as an argument, and uses that URL string
   * as the event label. Setting the transport method to 'beacon' lets the hit be sent
   * using 'navigator.sendBeacon' in browser that support it.
   */
  var gaTrack = function(merchant, url) {
        gtag('event', 'click', {
                   'event_category': 'outbound',
                   'event_label': merchant,
                   'transport_type': 'beacon',
                   'event_callback': function(){document.location = url;}
        });
  } 

    var x = document.getElementById("shop_link");
    if (x.addEventListener) {
        x.addEventListener("click", gaFunction);
    } else if (x.attachEvent) {
        x.attachEvent("onclick", gaFunction);
    }

    function gaFunction() {
        gaTrack(x.name,x.href); return false;
    }
    </script>

修改后，新代码确实将信息发送到Google Analytics（分析），但是仅在某些情况下，这意味着当我自己单击出站链接时，Google Analytics（分析）仅记录了很少的点击，大部分都被错过了。 任何人都可以帮助解决此问题，并使其记录所有出站点击事件？ 预先感谢！

Answer 1

使用jQuery，执行addEventListener的简单方法是：

$("#shop_link").on("click", function () {
    //your Google analytics code here
});

但是在JavaScript中，您始终可以坚持：

document.querySelector("#shop_link").onclick = function () {
//Your Google Analytics Code Here
};

如果您真的想使用addEventListener（）：

document.querySelector("#shop_link").addEventListener("click", function () {
    //Add Google Analytics Code Here
});

我建议，如果仅为此使用jQuery，则应坚持使用JavaScript。但是，如果您已经在其他地方使用jQuery，请随时选择。

Answer 2

我通过使用以下代码解决了该问题：

<script>

var trackOutboundLink = function(merchant) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': merchant,
    'transport_type': 'beacon'
  });
}
function onclickCallback(e) {
  var e = window.e || e;
  if ( (e.target.id !== 'shop_link') || (e.target.host == window.location.host) ) return;
  trackOutboundLink(e.target.name); // GA event tracker
}
if (document.addEventListener)
  document.addEventListener('click', onclickCallback, false);
else
  document.attachEvent('onclick', onclickCallback);
 
    </script>

来源：https://gist.github.com/coliff/4314060186a135a920fc510e40d2f9c3