Analytics

Трек

В тени дом — это способ, чтобы добавить в HTML-структур к веб-странице, так что они остаются изолированными от остальной части модели объектов документов (дом). Это популярная концепция с веб-компонентами, так как он позволяет инкапсуляции веб-структур, так что они не влияют на стиль заявления родителя дерево, например.

Track

Однако, будучи такой “скрытой” структурой, все, что происходит в тени дом тоже скрыт от слушателей Диспетчера тегов от Гугла. Или, в нажать не регистрируются, но событие цели ({{щелчок по элементу}})- это узел на материнской структуры, что хозяев теневой дом, а не элемент, который был выбран в тени Дом.

Track

В этом примере, ГТМ бы заполнить кнопку переменные, так что нажмите явился на землю на <див класс="postShorten-обертывание"> когда это фактически приземлился на элемент внутри #тени корня. Аналогично, поскольку содержание тени дома будут скрыты от материнской структуры, матчи в CSS-селектору предиката не может быть использован, чтобы увидеть, что внутри выбранного элемента.

Мы можем обойти эту! Мы не можем использовать ГТМ встроенные триггеры как они не дают нам доступа к события самого объекта. Но мы можем использовать пользовательский прослушиватель событий.

Для получения более подробной информации о том, как работает обработка событий в тени дом, взгляните на эту прекрасную статью на эту тему.

Как событие-разгрузочных работ с теневым дом

В Событие слушателей тень работу, дом просто как слушателей события на регулярной структуры дом. Событие регистрируется, и он заполняет путь сквозь слои участке во время захвата и пузырьковой фазы.

Некоторые события всплывает к верхней части дерева дом, некоторые остаются на том узле, где событие было зарегистрировано.

Основная разница с теневым дом заключается в том, что события, которые начинают только крест теневой дом границы, если они имеют собственность в составе набора для истинной.

Большинство событий имеют в составе набор для истинной. Как правило, исключения-это события, которые не основаны на взаимодействии пользовательского интерфейса. Как и эти:

  • нагрузки
  • выгрузить
  • отбой
  • ошибка
  • Для событий, которые имеют в составе набора для истинного, то можете прикрепить пользовательский прослушиватель событий на документе узла, например, и события, которые происходят в тени дом будет передан наш слушатель (при условии, что они также пузырь, или слушатель имеет значение для определения захвата фазы, а).

    Однако, мы все еще сталкиваемся с проблемой введены в начале этой статьи. Все события, которые происходят в теневой дом автоматически делегированы к родителю #тень-корень. Это не очень полезно. Тень дом может быть огромным, раскидистым вещь, поэтому нужна точность.

    К счастью, мы можем использовать события.composedPath() метод, чтобы получить массив, который представляет собой путь мероприятии приняли как пузырились. Первый член в массиве элемент, который был на самом деле нажал (если тени дом был закрыт, но мы вернемся к этому через минуту).

    Мы можем использовать эту информацию, чтобы построить наш слушатель.

    Слушатель

    В Диспетчере тегов Google, как создать пользовательский тег html-код, и напечатайте или скопируйте и вставьте следующий код.

    <скрипт>
     (функция() {
     // Установить в случае, если вы хотите отслеживать
     Имя_события ВАР = 'нажмите',
     // Значение ложь, если вы не хотите использовать фазы захвата 
     usecapture присвоено присвоено значение true,то
     // Значение ложь, если вы хотите отслеживать все события, а не только тех, кто в тени Дом
     trackOnlyShadowDom = истина;
    
     функция обратного вызова дисп = (событие) {
     если ('входят' в событие && typeof на на событие.composedPath === 'функция') {
     // Получаем путь из элементов мероприятия залез, например
     // [срок, див, див, разделе, тела]
     путь ВАР = событие.composedPath();
    
     // Извлечение ссылку на элемент, который был на самом деле нажал
     расчет величины var targetElement = путь[0];
    
     // Проверить, если элемент находится в теневой дом (игнорируя корень)
     ВАР shadowFound = путь.длина ? путь.фильтр(функция(я) {
     возвращение !targetElement.shadowRoot && !!я.shadowRoot;
     }).длина > 0 : ложные;
    
     // Если нужно отслеживать только тени событий дом и элемент не в одном, возвращение
     если (trackOnlyShadowDom && !shadowFound) возвращение;
    
     // Нажмите, чтобы уровень данных
    окна.уровень данных.поштовх({
     событие: 'custom_event_' + событие.типа,
     custom_event: {
     элемент: targetElement,
     ид_элемента: targetElement.идентификатор || ",
     elementClasses: targetElement.имякласса || ",
     elementUrl: targetElement.Солар, | | targetElement.действий || ",
     elementTarget: targetElement.целевой || ",
     originalEvent: событие,
     inShadowDom: shadowFound
    }
    });
    }
    };
    
     документ.метод метода addEventListener(имя_события, обратного вызова, usecapture присвоено присвоено);
    })();
    </скрипт>

    Вы можете прикрепить странице просмотра триггер на этот тег. После этого, каждый клик на страницы, где слушатель является активным будет выдвинут в случае уровня данных с объектом контент, который выглядит так:

    Track

    В этом случае, нажмите упала на элемент<div>и с очень немногими атрибутами, но который содержится в теневой дом (как isShadowDom это правда).

    Вы можете затем создать Пользовательское событие триггера для custom_event_click:

    Track

    И вы можете создавать переменные слоя данных для отдельных элементов в толкаемого объекта такой:

    Track

    При переключении имя_события , скажем, представить, вы можете прослушивать форма представления вместо.

    Если вы хотите избежать сценария пуш-сообщение с каждого отдельного события экземпляра, вы можете добавить проверок в рамках обратного вызова, проверьте случае цель была определенного типа элемента. Например, только толчок для уровня данных, если нажать приземлился на ссылку, вы могли бы сделать что-то вроде этого:

    функция обратного вызова дисп = (событие) {
    ...
     расчет величины var targetElement = путь[0];
     если (targetElement.матчи('а *')) {
     // Выполнить уровень данных.нажать() здесь
    }
    ...
    ...

    Внимание! Хотя это был всего лишь пример, вы должны знать, что .матчи() не будет работать в Ие, и вам потребуется использовать .msMatchesSelector().

    Насчет несоставной событий?

    Что если вы хотите отслеживать события, которые не имеют в составе флаг установлен в значение ИСТИНА? Если вы помните, эти события не будут распространяться за границы теневой дом. Аналогично, если вы используете скрипт выше, они также имеют inShadowDom флаг установлен в значение ложь, так как они практически не обращая внимания на то, что они находятся в тени дом (в стиле Матрицы).

    Так, вам придется сделать обработку событий без питания делегации. Другими словами, вам необходимо добавить слушателей непосредственно к элементам.

    Например, если вы хотели, чтобы отслеживать нагрузку события для тега<script>, и в тени Дом, скрипт будет выглядеть так:

    <скрипт>
     (функция() {
     // Установить в случае, если вы хотите отслеживать
     Имя_события ВАР = 'нагрузка';
     // usecapture присвоено присвоено не имеет значения, поскольку мы будем следить за самим элементом 
     // usecapture присвоено присвоено значение true,то
     // trackOnlyShadowDom не имеет значения, поскольку мы будем только отслеживать элемент в тени Дом
     // trackOnlyShadowDom = истина;
    
     функция обратного вызова дисп = (событие) {
     если ('входят' в событие && typeof на на событие.composedPath === 'функция') {
     // Несущественных в данном решении, так как мы отслеживаем сам элемент 
     // путь ВАР = событие.composedPath();
    
     // Неуместны.
     / каталог в/ var targetElement = путь[0];
    
     расчет величины var targetElement = событие.цели;
    
     // Неуместны.
     // ВАР shadowFound = путь.длина ? путь.фильтр(функция(я) {
     // возвращение !targetElement.shadowRoot && !!я.shadowRoot;
     // }).длина > 0 : ложные;
    
     // Неактуально
     // если (trackOnlyShadowDom && !shadowFound) возвращение;
    
     // Нажмите, чтобы уровень данных
    окна.уровень данных.поштовх({
     событие: 'custom_event_' + событие.типа,
     custom_event: {
     элемент: targetElement,
     ид_элемента: targetElement.идентификатор || ",
     elementClasses: targetElement.имякласса || ",
     elementUrl: targetElement.Солар, | | targetElement.действий || ",
     elementTarget: targetElement.целевой || ",
     originalEvent: событие,
     inShadowDom: правда
    }
    });
    }
    };
    
     // Это где скрипт настраивает слушателя на фактический элемент в тени корня
     / Проверяет/ Скрипт, если контейнер в существует стандартный дом, то он проверяет, если контейнер
     // тень корня, и, наконец, он проверяет, если теневой дом элемента сценария.
     ВАР shadowContainer = документ.querySelector('.shadowDomContainer');
     если (!!shadowContainer && !!shadowContainer.shadowRoot) {
     ВАР scriptTarget = shadowContainer.shadowRoot.querySelector('скрипт#someId');
     если (!!scriptTarget) scriptTarget.метод метода addEventListener(имя_события, обратного вызова);
    }
    })();
    </скрипт>

    Здесь метода addEventListener, чтобы позвонить в конце совсем немного сложнее, чем обычного мы использовали раньше. Сначала нужно найти узел, на который тень дом встроен (в тени корня). Затем, доступа к его shadowRoot собственность, вы имеете право запросить элементов в теневой дом (предполагая, что тень дом является открытым).

    После обычной проверки, является ли элемент существует, то вы можете добавить свой слушатель непосредственно к элементу, и он будет вызывать функцию обратного вызова, как только он регистрирует событие.

    Что насчет закрытой тень дом?

    Если тень создается дом в закрытом режиме, вы в принципе можете делать все что угодно с shadowRoot. Если вы пытаетесь получить доступ с дом методы, shadowRoot собственность будет просто возвращать значение нуль, так и composedPath() возвращает массив элементов, который останавливается с тенью корневого узла.

    Таким образом, на поверхностном уровне, вы можете сделать нет ничего, чтобы отслеживать точное взаимодействие в тени Дом.

    Однако существует обходной путь.

    При создании теневой дом, если разработчики сохранить ссылку на него в глобальной переменной, вы можете взаимодействовать с ним, и вы можете добавить слушателей элементов во фрагменте документа, если вы хотите.

    // Создать теневую дом
    контейнер УАК = документ.querySelector('.someContainer');
    окна._shadowRoot = контейнер.attachShadow({режим: 'закрытые'});
    

    В примере выше, глобальная переменная _shadowRoot сохраняет ссылку на тени дом, и таким образом вы можете использовать такие методы, как окно._shadowRoot.метод метода addEventListener(...) , чтобы манипулировать и взаимодействовать с элементами в тени Дом.

    Это требует некоторого взаимодействия с разработчиками, а также необходимо обосновать, почему режим закрыт в первую очередь, если бы разработчики добавить Открытие по пути глобальной переменной.

    Резюме

    Надеюсь, эта статья была поучительной. Нутром Я чую, что тень дом представляет собой загадку для многих разработчиков веб-аналитики просто потому, что это не самый распространенный способ, чтобы добавить элементы на веб-страницу.

    Тем не менее, он предлагает мощные инструменты для огораживания и разделения проблем, и особенно вместо неуклюжих встраивании iframe и это может сделать много смысла с точки зрения веб-разработки.

    Указатели в этой статье, должны дать вам инструменты для выявления еще одна потенциальная проблема с диспетчером тегов Google, а встроенный слушателей, и это должно помочь вам справиться с силой несколько пользовательских сценариев.

    Related posts

    Почему Senior Developer’ы не могут устроиться на работу

    admin

    Простой

    admin

    Коронавирус и интернет

    admin

    Leave a Comment