jQuery — я хочу извлечь значения атрибутов данных html5 из определенного класса элементов в значение атрибута onclick

#javascript #jquery #css #html #custom-data-attribute

#javascript #jquery #css #HTML #пользовательский атрибут данных

Вопрос:

Я назначаю класс css .ga-track для указания элементов, которые я хочу отслеживать, а также присваиваю атрибуты данных data-category="" data-action="" , data-label="" , data-value="" , и т.д. определенным элементам.

Пример :

$('a, button, form, input').addClass('ga-track');

$('form#formid').attr({
'data-category':'Form Submission',
'data-action':'Click',
'data-label':'Specific FormID Label'
});

Атрибуты данных и классы добавляются правильно.

Теперь я пытаюсь внедрить встроенное событие onClick в Google Analytics, нацелив все элементы на класс .ga-track , выполнив .attr('onclick', '_gaq.push('_trackEvent', ...') , как вы можете видеть во фрагменте ниже.

 $(".ga-track").attr("onclick", _gaq.push('_trackEvent', $(this).data('category'), $(this).data('action'), $(this).data('label'), $(this).data('value'), $(this).data('interaction')););
  

Я не уверен в возможности выполнения вызовов атрибутов данных в функции .attr() .

Я также пытался выполнить .attr('onclick', myFunction()) , а затем привязать myFunction() к вызовам _ga.push в jQuery, но, похоже, меня заставляют добавлять событие onclick с помощью события onclick, установленного встроенным в элемент, на который я пытаюсь настроить таргетинг.

Редактировать

Вот мой окончательный рабочий код:

 $('.ga-track').on('click', function(){
    ga('send', $(this).data('category'), $(this).data('action'), $(this).data('label'), $(this).data('value'), $(this).data('interaction'));
});
  

метод .on был определенно лучше, чем метод .attr для добавления атрибута onclick=»» .

Я также использовал неправильный метод GA с analytics.js , предыдущее использование функции _gaq.push вместо ga(‘отправить’ …)

Ответ №1:

Вы не должны использовать onclick атрибут с jquery, вместо этого используйте .click() функцию или .on('click',..) и функцию обратного вызова:

 $('.ga-track').on('click', function(){
   _gaq.push('_trackEvent', $(this).data('category'), $(this).data('action'), $(this).data('label'), $(this).data('value'), $(this).data('interaction'));
})
  

Что также проблематично:

  • вы использовали ‘.addClass(‘ga-track’);’ для объявления имени класса, но $('.gaTrack') для его поиска (который не будет найден …).

  • вы используете $(this) для ссылки $('.ga-track') , но this может быть что-то еще. Прочитайте: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Комментарии:

1. Я добавил изменения в ga-track. Хотите верьте, хотите нет, но именно эта ошибка любителя вызывала большинство моих проблем.

2. Вместо этого я также исправил onclick by с помощью .click() функции и пометил каждый атрибут данных с помощью .data решения. Спасибо!

Ответ №2:

Попробуйте сделать это так:

 $(".gaTrack").click(function(){
   _gaq.push('_trackEvent', $(this).data('category'), $(this).data('action'), $(this).data('label'), $(this).data('value'), $(this).data('interaction'));
});
  

Ответ №3:

попробуйте это,

 $(".gaTrack").on("click",function(){
    _gaq.push('_trackEvent', $(this).data('category'), $(this).data('action'), $(this).data('label'), $(this).data('value'), $(this).data('interaction'));
});
  

или,

 $(".gaTrack").click(function(){
    _gaq.push('_trackEvent', $(this).data('category'), $(this).data('action'), $(this).data('label'), $(this).data('value'), $(this).data('interaction'));
});