Will adding onclick in HTML and calling from Javascript conflict?

Question

I've an anchor link which has an onclick event attached to it. Basically a Facebook share popup opens on clicking it.

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

Now I want to track it with Google Analytics Universal Tracking Event Tracking. So I added a class named track to the each anchor that I want to track. My intention is to run the following javascript code

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

where click and nav-buttons values will be dynamically inserted through HTML5 data variables. (which will be attached to the anchor)

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

How to integrate the whole thing? Will two onclick event work? Or only one will work? What is the best way to implement this. Please guide.

Pebbl · Accepted Answer · 2014-02-22 15:56:45Z

3

Your best bet would be to remove things from onclick and use the same method for both — which would be to use jQuery to add the event listeners.

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

So you would then use the following markup:

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

I've removed the data-event as you can read this from the event object itself.

I implemented a similar thing a while back with the class ga-track, I then exposed this functionality by way of an GUI allowing the owner of the site to easily set up tracking events for almost anything... put simply it is a nice approach to keep your tracking generalised so that it can be applied where ever you wish.

edited Feb 22, 2014 at 15:56

answered Feb 22, 2014 at 15:50

Pebbl

36.1k6 gold badges66 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

LittleLebowski Over a year ago

This looks great With Google Tag Manager, we can do that too. But I'm not very comfy with Tag Manager yet and don't want to mess with the data.

Pebbl Over a year ago

@LittleLebowski Yeah, this was before all the nice newfangled Google stuff :) Not used GTM yet but it does look good.

LittleLebowski Over a year ago

Yeah, it looks good. Lacks good documentation. :( Btw, what do you think of @bingjie2680 answer above. Its similar to what you're doing, but instead of another click event, it uses a `if'. Looks better? Any thoughts?

Pebbl Over a year ago

@LittleLebowski well Bingjie pipped me at the post :) which ever answer is just personal preference really. I like to keep things separate and was aware of the possibility of other share links... Bingjie deserves the accepted answer though imo (+1) already from me.

LittleLebowski Over a year ago

Let me try your approach. I looks more modular too.

LittleLebowski · Accepted Answer · 2014-02-22 16:08:23Z

2

You don' need onClick event on achors since you are using Jquery, which will keep your html code cleaner:

$('.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>

edited Feb 22, 2014 at 16:08

LittleLebowski

7,96114 gold badges49 silver badges75 bronze badges

answered Feb 22, 2014 at 15:46

bingjie2680

7,7839 gold badges50 silver badges72 bronze badges

5 Comments

LittleLebowski Over a year ago

The problem is I've another button which is for Twitter Share and it doesn't require window.open portion. So how to make the code reusable for all anchor links I want to track irrespective of whether there's a window.open or not.

LittleLebowski Over a year ago

Looks great. Shouldn't I be using target.data('event') and target.data('label') to get the HTML5 data params?

LittleLebowski Over a year ago

Another quick question. Should I let the popup open first instead of the ga data going out first? Would that be faster for the user.

bingjie2680 Over a year ago

that does not make any difference in my opinion. so you can do it.

bingjie2680 Over a year ago

Ok, it depends on the Ga function, so you are right, it may be better to open the popup first

Collectives™ on Stack Overflow

Will adding onclick in HTML and calling from Javascript conflict?

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related