Получить верхний элемент из дерева DIV в структуре HTML

#javascript #html #dom #google-tag-manager

#javascript #HTML #dom #google-менеджер тегов

Вопрос:

У меня есть HTML-код для каждого виджета, подобного этому:

html-код

Как получить атрибут name для идентификатора отслеживания данных div (=118DBA90ECB84E7BB9E7C07402F4B4B25CC0CD43818B92F8E0C26CA63C5F543D), когда я нажимаю на класс, например, «slick-arrow slick-prev»? Создание элемента DOM с помощью CSS-селектора не работает.

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

1. В вашем примере кода нет атрибута name

2. И как получить эти данные (=118DBA90ECB84E7BB9E7C07402F4B4B25CC0CD43818B92F8E0C26CA63C5F543D)?

Ответ №1:

Для этого вам понадобится пользовательский HTML-тег, в котором вы можете написать свой собственный код, который ищет эту информацию относительно выбранного элемента, который может называться {{Click Element}}, когда он включен во встроенных переменных.

Вы можете сделать это с помощью jQuery, с помощью функции parent(), которая переходит к указанному родительскому элементу. Например.

 var parent = $({{Click Element}}).parent('div[data-tracker-id]');
  

Вы также можете имитировать эту функциональность с помощью ванильного JavaScript. Одно из возможных решений:

     //define function
      var gtmGetClosest = function ( elem, selector ) {

        // Element.matches() polyfill
        if (!Element.prototype.matches) {
            Element.prototype.matches =
                Element.prototype.matchesSelector ||
                Element.prototype.mozMatchesSelector ||
                Element.prototype.msMatchesSelector ||
                Element.prototype.oMatchesSelector ||
                Element.prototype.webkitMatchesSelector ||
                function(s) {
                    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                        i = matches.length;
                    while (--i >= 0 amp;amp; matches.item(i) !== this) {}
                    return i > -1;
                };
        }

        // Get closest match
        for ( ; elem amp;amp; elem !== document; elem = elem.parentNode ) {
            if ( elem.matches( selector ) ) return elem;
        }

        return null;

      };

    //use it
    var parent = gtmGetClosest({{Click Element}}, 'div[data-tracker-id]');
  

Пользовательская функция была основана на этой статье.

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

1. Спасибо! Но как использовать второй код (с ванильным JS)? Создайте 2 JS-переменные (gtmGetClosest и parent) в GTM или как?

2. Существует несколько решений. Быстрый и грязный способ — включить его в тот же пользовательский HTML-тег, но он будет повторно инициализировать функцию при каждом запуске тега. Вы можете поместить его в отдельный пользовательский HTML-код и использовать в качестве установочного тега, но выполнять его можно только один раз на странице. Или вы можете определить переменную, которая возвращает функцию. Дополнительные советы по этому поводу: simoahava.com/analytics /…