Do on class click without jquery ( $("a.zone1").click(function() {})

Question

I would like to sent google analytics event, on click of link with specific class without using jquery something similare at…

    <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>

each .zone got around 10 links,

Answer 1

If you want all of the <a> tags of a given class to trigger the event, try this:

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.
  }
);

<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/>

Info about the differences between capture phase and bubble phase: What is event bubbling and capturing?

Answer 2

I'm assuming you mean with vanilla javascript. You could do something like this

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

Below would be the pure Javascript way to do what have you requested.

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;
});

Please note that it's better to design a generic event listener like listed above, rather than create a event listener separately for all such links on your page. (You might have 10 now, but they can increase in future. You don't want to write same piece of code again & again).

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

This line would basically select all anchor elements that has a class associated with it and starting with 'list'.

Once you have all such elements, it's simple to add event listener to all such elements via addEventListener function of Javascript.

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

Inside the listener function, you can get index of selected elements in multiple ways. I have demoed it using an extra attribute on each link element viz. 'key'.

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

Basically, you read the link index from key attribute and use it to create the custom event text to be sent to Google Analytics and then read href attribute to open up the link.

You can explore another ways to retrieve the index as well.

Below JS Fiddle might be helpful to play around with. https://jsfiddle.net/cfy4yw5s/

Answer 4

Thank you all for you help.

That's What I done, Please don't hesitate to review to help me progress

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

Answer 5

You can use

onclick=functionName()

inside the element which is pure JavaScript function.