Question

我想发送谷歌分析事件，点击与特定类的链接而不使用jquery 类似的东西...

    <script type="text/javascript">
$("a.zone1").click(function() {
     ga('send', 'event', 'button', 'visit', 'click_visit_zone1');
  var href = $(this).attr('href');
  window.open(href, '_self');
  return false;
});
$("a.zone2").click(function() {
  ga('send', 'event', 'button', 'visit', 'click_visit_zone2');
  var href = $(this).attr('href');
  window.open(href, '_self');
  return false;
});
</script>

每个.zone都有大约10个链接，

Answer 1

如果您希望给定类的所有<a>标记触发事件，请尝试以下操作：

＆＃13;

var elems = document.querySelectorAll('a.zone1');

elems.forEach(
  function(elem) {
    elem.addEventListener('click', function(evt) {
      //ga('send', 'event', 'button', 'visit', 'click_visit_zone1');
      alert(evt.target.outerHTML);
    }, true); // <-- the `true` allows this event to happen in the capture phase.
  }
);

＆＃13;

<a class="zone1" href="#1">z1-1</a><br/>
<a class="zone1" href="#1">z1-2</a><br/>
<a class="zone1" href="#1">z1-3</a><br/>
<a class="zone1" href="#1">z1-4</a><br/>
<a class="zone2" href="#1">z2-1</a><br/>
<a class="zone2" href="#1">z2-2</a><br/>
<a class="zone2" href="#1">z2-3</a><br/>
<a class="zone2" href="#1">z2-4</a><br/>

＆＃13;

有关捕获阶段和泡沫阶段之间差异的信息：What is event bubbling and capturing?

Answer 2

我假设您的意思是使用vanilla javascript。你可以做这样的事情

var elem = document.getElementsByClassName('zone1')[0];
//note that this function returns an array 
//even if there is only one element with that class name

elem.addEventListener('click', function(){
  ga('send', 'event', 'button', 'visit', 'click_visit_zone1');
  window.open(elem.href, '_self');
  return false;
})

Answer 3

您可以使用

onclick=functionName()

在纯JavaScript函数的元素内部。

Answer 4

下面将是您执行所请求的纯Javascript方式。

document.querySelector("a[class^='link']").addEventListener('click',function(ev){
    var index = this.attributes['key'].value;
    var link_name = "click_visit_link"+index;
    ga('send', 'event', 'button', 'visit', link_name);
    var href = this.attributes['href'].value
    window.open(href, '_self');
    return false;
});

请注意，设计上面列出的通用事件侦听器更好，而不是为页面上的所有此类链接单独创建事件侦听器。（你现在可能有10个，但是他们将来可能会增加。你不想再次写同一段代码了。）

document.querySelector("a[class*='link']")

这一行基本上会选择所有具有与之关联的类的锚元素，并以＆＃39; list＆＃39;开头。

一旦拥有了所有这些元素，通过Javascript的addEventListener函数向所有这些元素添加事件监听器很简单。

document.querySelector("a[class^='link']").addEventListener('click',function(ev){

在侦听器函数中，您可以通过多种方式获取所选元素的索引。我已经使用每个链接元素的额外属性演示了它。＆＃39;键＆＃39 ;.

    var index = this.attributes['key'].value;
    var link_name = "click_visit_link"+index;
    ga('send', 'event', 'button', 'visit', link_name);

基本上，您从关键字属性中读取链接索引并使用它来创建要发送到Google Analytics的自定义事件文本，然后读取href属性以打开链接。

您还可以探索另一种检索索引的方法。

JS Fiddle下面可能会有所帮助。 https://jsfiddle.net/cfy4yw5s/

Answer 5

谢谢大家的帮助。

这就是我做的，请随时查看以帮助我取得进展

window.onload = function() {
  var anchors = document.getElementsByTagName('a');
  for(var i = 0; i < anchors.length; i++) {
      var anchor = anchors[i];
      anchor.onclick = function() {
        if (this.className == 'click_visit_zone1' || this.className == 'click_visit_zone2'){
          ga('send', 'event', 'button', 'visit', this.className);
        }
      }
  }
}

https://codepen.io/gotcha5832/pen/QarpKx

在没有jquery的情况下点击类（$（“a.zone1”）。click（function（）{}）

5 个答案: