Question

我有一个附加了onclick事件的锚链接。基本上点击它就会打开Facebook共享弹出窗口。

<a target="_blank" 
   href="https://www.facebook.com/sharer/sharer.php?u=MYLINK" 
   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
>Share on Facebook</a>

现在，我想通过Google Analytics通用跟踪事件跟踪来跟踪它。所以我在我要跟踪的每个锚中添加了一个名为track的类。我的目的是运行以下javascript代码

$('.track').click(function (e) {
    ga('send', 'event', 'button', 'click', 'nav-buttons');
});

其中click和nav-buttons值将通过HTML5数据变量动态插入。（将附在锚上）

<a target="_blank" class="track"
   href="https://www.facebook.com/sharer/sharer.php?u=MYLINK" 
   data-event="click"
   data-label="nav-buttons"
   onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
>Share on Facebook</a>

如何整合整个事物？两个onclick事件会起作用吗？或者只有一个会起作用？实现这一目标的最佳方式是什么。请指导。

Answer 1

您最好的选择是从onclick中移除内容并对两者使用相同的方法 - 这将是使用jQuery添加事件侦听器。

$('.track').click(function(e){
  e.preventDefault();
  ga('send', e.type, 'button', 'click', 'nav-buttons');
});

$('a.facebookshare').click(function(e){
  e.preventDefault();
  window.open(this.href, '',
    'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'
  );
});

然后您将使用以下标记：

<a target="_blank" class="track facebookshare"
  href="https://www.facebook.com/sharer/sharer.php?u=MYLINK" 
  data-label="nav-buttons"
  >Share on Facebook</a>

我删除了data-event，因为您可以从事件对象本身读取它。

我在课程ga-track中实施了一个类似的事情，然后我通过GUI公开了这个功能，允许网站的所有者轻松地为几乎任何事情设置跟踪事件......简单地说这是一种很好的方法来保持你的跟踪通用，以便它可以应用到任何你想要的地方。

Answer 2

你不需要在锚点上使用onClick事件，因为你正在使用Jquery，这将使你的html代码更清晰：

$('.track').click(function (e) {
    var target = $(e.target);
    ga('send', 'event', 'button', target.data('event'), target.data('label');
    if(target.hasClass('facebook') {
        window.open(target.attr('href'),'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
    }
    e.preventDefault();
});


<a target="_blank" class="track facebook" href="https://www.facebook.com/sharer/sharer.php?u=MYLINK" 
  data-event="click"
  data-label="nav-buttons"
>Share on Facebook</a>

是否会在HTML中添加onclick并从Javascript调用冲突？

2 个答案: