Конвертировать jQuery в JavaScript для Google Analytics PDF отслеживания загрузки

Question

Ниже приведено то, что я имею для отслеживания загрузки pdf с сайта и отправки маяка в GA с использованием tealium. Он отлично работает с сайтом, на котором есть библиотека jquery, но мне нужно нечто подобное для сайта, у которого нет библиотеки jquery. Помогите мне преобразовать этот кусок кода в JS, чтобы отслеживание работало без использования библиотеки jquery.

                 utag.runonce[2] = 1;
                    jQuery(document.body).on('mousedown', 'a[href$=pdf]', function(e) {
                        y = this.href;
                        setTimeout(function() {
                            var ec_cat, ea_act, el_lab;
                            var a = document.createElement('a');
                            a.href = y;
                            var z = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
                            el_lab = utag.data['data-assetinternalname'] || z;
                            ec_cat = utag.data['data-assettype'] || "file";
                            ea_act = utag.data['data-assetinteraction'] || "download";
                            utag.link({
                                event_category: ec_cat.toLowerCase(),
                                event_action: ea_act.toLowerCase(),
                                event_label: el_lab.toLowerCase()
                            });
                            if (typeof utag.data['data-engagementtype'] != "undefined") {
                                ga_cat = utag.data['data-engagementtype'] || "connect";
                                ga_act = utag.data['data-assettype'] || "file";
                                utag.link({
                                    event_category: ec_cat.toLowerCase(),
                                    event_action: ea_act.toLowerCase(),
                                    event_label: el_lab.toLowerCase()
                                });
                            }
                        }, 300);

Answer 1

Мне кажется, что основной (возможно, единственной) заменой, которую вам нужно сделать, является jQuery.on. Обычно вы просто заменяете на document.addEventListener, но поскольку вы используете фильтрацию, это немного усложняется.

Вот модуль, который я когда-то написал go и который часто используется для этого:

  const addEvent = function(target, event, filter, callback, opts) {
    if (typeof target === 'string') target = document.querySelectorAll(target);
    if (!(target instanceof NodeList || target instanceof Array)) {
      target = [target];
    }
    if (filter) {
      var oldCb = callback;
      callback = function(e) {
        if (e.target.matches(filter)) oldCb(e);
      };
    }
    for (var i = 0; i < target.length; i++) {
      target[i].addEventListener(event, callback, opts);
    }
  };

То, как вы бы назвали это в приведенном выше примере, будет выглядеть так:

addEvent(document.body, 'mousedown', 'a[href$=pdf]', function(e) { /*...*/ });