Google Tag Manager для googлят: Руководство по управлению тегами | страница 18



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> <!-- Yandex.RTB R-A-5585048-7 --> <div id="yandex_rtb_R-A-5585048-7" class="rkl"><div class="rasporka"></div></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-5585048-7", "renderTo": "yandex_rtb_R-A-5585048-7" }) }) </script> </section> <section> <nav class="bottom-nav clr text-center ignore-select"> <ul class="pagination"> <li class=""> <a class="page-link" rel="prev" href="/r/200259?p_=17">« </a> </li> <li class=""> <a class="page-link" href="/r/200259?p_=17">17</a> </li> <li class="active"> <span class="page-link">18</span> </li> <li class=""> <a class="page-link" href="/r/200259?p_=19">19</a> </li> <li class=""> <a class="page-link" rel="next" href="/r/200259?p_=19"> »</a> </li> </ul> </nav> <div class="text-center"> <label for="reader-pagination-page mt-1"> Перейти на страницу </label> <select name="page" class="js-reader-pagination__page-select" data-target-path="/r/200259" > <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> <option value="5" >5</option> <option value="6" >6</option> <option value="7" >7</option> <option value="8" >8</option> <option value="9" >9</option> <option value="10" >10</option> <option value="11" >11</option> <option value="12" >12</option> <option value="13" >13</option> <option value="14" >14</option> <option value="15" >15</option> <option value="16" >16</option> <option value="17" >17</option> <option value="18" selected>18</option> <option value="19" >19</option> <option value="20" >20</option> <option value="21" >21</option> <option value="22" >22</option> <option value="23" >23</option> <option value="24" >24</option> <option value="25" >25</option> <option value="26" >26</option> <option value="27" >27</option> <option value="28" >28</option> <option value="29" >29</option> <option value="30" >30</option> <option value="31" >31</option> <option value="32" >32</option> <option value="33" >33</option> <option value="34" >34</option> <option value="35" >35</option> <option value="36" >36</option> <option value="37" >37</option> <option value="38" >38</option> <option value="39" >39</option> <option value="40" >40</option> <option value="41" >41</option> <option value="42" >42</option> <option value="43" >43</option> <option value="44" >44</option> <option value="45" >45</option> <option value="46" >46</option> <option value="47" >47</option> <option value="48" >48</option> <option value="49" >49</option> <option value="50" >50</option> <option value="51" >51</option> <option value="52" >52</option> <option value="53" >53</option> <option value="54" >54</option> <option value="55" >55</option> <option value="56" >56</option> <option value="57" >57</option> <option value="58" >58</option> <option value="59" >59</option> <option value="60" >60</option> <option value="61" >61</option> <option value="62" >62</option> <option value="63" >63</option> <option value="64" >64</option> <option value="65" >65</option> <option value="66" >66</option> <option value="67" >67</option> <option value="68" >68</option> <option value="69" >69</option> <option value="70" >70</option> <option value="71" >71</option> <option value="72" >72</option> <option value="73" >73</option> <option value="74" >74</option> <option value="75" >75</option> <option value="76" >76</option> <option value="77" >77</option> <option value="78" >78</option> <option value="79" >79</option> <option value="80" >80</option> <option value="81" >81</option> <option value="82" >82</option> <option value="83" >83</option> <option value="84" >84</option> <option value="85" >85</option> <option value="86" >86</option> <option value="87" >87</option> <option value="88" >88</option> <option value="89" >89</option> <option value="90" >90</option> <option value="91" >91</option> <option value="92" >92</option> <option value="93" >93</option> <option value="94" >94</option> <option value="95" >95</option> <option value="96" >96</option> <option value="97" >97</option> <option value="98" >98</option> <option value="99" >99</option> <option value="100" >100</option> <option value="101" >101</option> <option value="102" >102</option> <option value="103" >103</option> <option value="104" >104</option> <option value="105" >105</option> <option value="106" >106</option> <option value="107" >107</option> <option value="108" >108</option> <option value="109" >109</option> <option value="110" >110</option> <option value="111" >111</option> </select> </div> </section> </div> </main> </div> <div class="sect sect-popular sect-related ignore-select"> <div class="sect-header fx-row fx-middle"> <div class="sect-title fx-1"> <i class="fa fa-puzzle-piece"></i> Книги, похожие на Google Tag Manager для googлят: Руководство по управлению тегами </div> </div> <div class="sect-content"> <div class="relbooks-block"> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/23174" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Узлы - Игорь Владимирович Балабанов</div> <div class="top-subtitle">Хобби и ремесла</div> </div> <img class="book_image lazyload" title="Читать онлайн Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков" data-src="/uploads/books/images/9f/9f5771d8ed159230450a0e74125fec34c4e0189a.jpg" alt="Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/49965" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Хронология открытий в фантастике - Неизвестный Автор</div> <div class="top-subtitle">Справочники</div> </div> <img class="book_image lazyload" title="Читать онлайн Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков" data-src="/build/no_cover.f2a76ebc.jpg" alt="Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/63723" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Леваев Лев - Израильский предприниматель - Елена Борисовна Спиридонова, Юлия Петрова</div> <div class="top-subtitle">Справочники</div> </div> <img class="book_image lazyload" title="Читать онлайн Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков" data-src="/build/no_cover.f2a76ebc.jpg" alt="Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/76537" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Дагестанские народы Азербайджана: политика, история, культура - Мамед Сулейманов, Константин Игоревич Казенин</div> <div class="top-subtitle">Справочники</div> </div> <img class="book_image lazyload" title="Читать онлайн Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков" data-src="/uploads/books/images/53/5383831a58e07cc9b2b665036523a291e3e1339b.jpg" alt="Google Tag Manager для googлят: Руководство по управлению тегами - Яков Михайлович Осипенков"> <i class="lazyload-spinner"></i> </a> </div> </div> </div> </div> </article> </div> </div> </div> </main> <aside class="sidebar"> <div class="side-box search-wrap"> <form id="quicksearch" method="get" action="/p"> <div class="search-box"> <input id="story" name="text" minlength="3" placeholder="Поиск по сайту..." type="text" autocomplete="off"> <button type="submit" class="search-btn"><span class="fa fa-search"></span></button> </div> </form> </div> <ul class="side-box side-nav to-mob"> <li><a href="/books">Книги</a> <ul class="subcat"> <li><a href="/c/55">Боевики</a></li> <li><a href="/c/21">Военное</a></li> <li><a href="/c/6">Детская литература</a></li> <li><a href="/c/74">Классика</a></li> <li><a href="/c/50">ЛитРПГ</a></li> <li><a href="/c/36">Любовная фантастика</a></li> <li><a href="/c/4">Любовные романы</a></li> <li><a href="/c/47">Попаданцы</a></li> <li><a href="/c/35">Постапокалипсис</a></li> <li><a href="/c/5">Приключения</a></li> <li><a href="/c/63">Триллеры</a></li> <li><a href="/c/1">Фантастика</a></li> <li><a href="/c/31">Фэнтези</a></li> </ul> </li> </ul> </aside> </div> <footer class="footer"> <div class="footer-in wrap-center"> <div class="footer-one fx-row"> <div class="footer-col footer-col-desc"> <div class="footer-col-title title"> 2025 Литфонд | Читать книги онлайн </div> </div> <div class="footer-col"> <div class="footer-col-title title">Контакты</div> <ul class="footer-col-content"> <li>Для связи и правообладателям: <a href="mailto:libs.pbn@gmail.com">libs.pbn@gmail.com</a> </li> </ul> </div> </div> </div> </footer> </div> </div> <script src="/build/runtime.68aa92de.js" defer></script><script src="/build/site.38e640f9.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://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(94963560, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/94963560" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </body> </html>