Будет ли конфликт при добавлении onclick в HTML и вызов из Javascript?

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 Universal Tracking Event Tracking. Поэтому я добавил класс с именем 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Затем я продемонстрировал эту функциональность с помощью графического интерфейса, позволяющего владельцу сайта легко настроить отслеживание событий практически для всего... проще говоря, это хороший способ сделать ваше отслеживание обобщенным, чтобы его можно было применять везде, где бы вы ни находились. пожелает.

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>