, ….
Кроме этого, вы должны познакомиться с объектной моделью документа (Document Object Model, DOM). Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.
Прежде чем в Google Tag Manager настраивать триггеры на отслеживание прокрутки, взаимодействия пользователей с видео, электронную торговлю, вам необходимо понять, что из себя представляет дерево DOM.
DOM определяет логическую структуру документа, способы доступа к элементам и их изменению. Документ может быть как HTML, так и XML. Когда DOM используется для определения логической структуры HTML-документа, значит речь идет о HTML DOM. Давайте рассмотрим пример:
Рис. 34. Пример HTML-документа
Представление DOM этого документа HTML выглядит следующим образом:
Рис. 35. Представление DOM для документа HTML
Здесь html, head, body, title, meta, h2, p, table, tr, td, Google Tag Manager для googлят, Интернет-маркетинг и веб-аналитика, 2018 и т.д. являются примерами объектов DOM. Они также называются элементами или узлами. Нижние блоки с пометкой «Текст» являются текстовыми узлами.
Чтобы отслеживать клики/события через GTM по определенным элементам на странице, необходимо понимать взаимосвязь между различными узлами документа.
DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Получив узел, мы можем что-то сделать с ним. Все узлы в документе имеют иерархическое отношение друг к другу. Существует несколько специальных терминов для описания отношений между узлами:
● родительский узел (parent node) – родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект.
На примере выше по отношению к узлам ,
и элемент является родительским. Для узла </i>родительским является узел <b><head></b>.</p><p>● <b>узлы-потомки (child node) </b>– узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу <i><body> </i><b><h2>, <p> </b>и <b><table> </b>являются потомками. Для узла <i><head> </i>потомками являются <b><title> </b>и атрибут <b>“meta”</b>.</p><p>● <b>узлы-братья (sibling node) </b>– узлы, находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются <b><body> </b>и <b><head> </b>по отношению к корневому <i><html></i>, а также <b><h2>, <p> </b>и <b><table> </b>по отношению к родительскому узлу <i><body></i>.</p><p>Самый верхний узел в DOM называется корневым. Так как объект document не является частью DOM, в нашем примере корневым является <b><html></b>. Он не имеет родителей и сам является родительским узлом по отношению к <i><head> </i>и <i><body></i>.</p><p>В интернете в различных материалах можно встретить разные термины – предок, потомок (прямой и непрямой), сыновья, дочери, дети, ребенок, братья, сестры, правнуки и т.д. По сути, это одно и тоже. То, как вы привыкнете их называть, не имеет значения. Главное – это правильно понимать взаимосвязь между ними и уметь к ним обращаться.</p></div></div>
</section>
<div class="pagination pagination_text pagination_text_bot">
<div class="page-nav__item">
<a rel="nofollow" href="/reader/google-tag-manager-dlya-googlyat-rukovodstvo-po-upravleniyu-tegami-osipenkov/10" class="pagination__item">Назад</a>
</div>
<div class="page-nav__group">
<input id="change-page" type="number" class="page-nav__control" pattern="\d+" min="1" max="17" data-route="/reader/google-tag-manager-dlya-googlyat-rukovodstvo-po-upravleniyu-tegami-osipenkov" value="11">
</div>
<div class="page-nav__item">
<a rel="nofollow" href="/reader/google-tag-manager-dlya-googlyat-rukovodstvo-po-upravleniyu-tegami-osipenkov/12" class="pagination__item">Вперед</a>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container footer__inner">
<div class="footer__logo logo logo_footer">
<a class="logo__link" href="/">
<span class="logo__name">
SimplyBooks
<span class="logo__dot">In</span>
</span>
</a>
</div>
<nav class="footer__nav">
<ul class="footer-menu">
<li class="footer-menu__item"><a href="/new" class="footer-menu__link">Новинки</a></li>
<li class="footer-menu__item"><a href="/tag" class="footer-menu__link">Жанры</a></li>
<li class="footer-menu__item"><a href="/hello" class="footer-menu__link">Контакты</a></li>
</ul>
</nav>
</div>
</footer>
<div class="mobile-bar" id="mobileMenu">
<div class="mobile-bar__head">
<div class="mobile-bar__head-inner container">
<div class="mobile-bar__close">
<button class="mobile-bar__close-btn" id="menuClose"></button>
</div>
</div>
</div>
<div class="mobile-bar__body">
<div class="mobile-bar__body-inner container">
<ul class="mobile-menu">
<li class="mobile-menu__item"><a href="/new" class="mobile-menu__link">Новинки</a></li>
<li class="mobile-menu__item"><a href="/tag" class="mobile-menu__link">Жанры</a></li>
<li class="mobile-menu__item"><a href="/hello" class="mobile-menu__link">Контакты</a></li>
<li class="mobile-menu__item mobile-search">
<form action="/find" class="form mobile-search__form" method="get">
<div class="form__group form-group_inline">
<input placeholder="Поиск" type="search" value="" name="query" class="form__control mobile-search__input" required="required">
<button type="submit" class="mobile-search__submit search__btn">Найти</button>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
<script src="/build/runtime.5332280c.js" defer></script><script src="/build/site.01974e7b.js" defer></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.webvisor.org/metrika/tag_ww.js", "ym");
ym(97862865, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<!-- /Yandex.Metrika counter -->
</div>
</body>
</html>
