Вставьте пользовательский HTML на страницу DOM с Диспетчером тегов Google

Question

Я внедрил GTM на своем веб-сайте. Мне интересно, можно ли добавить пользовательский HTML/JS в определенную позицию DOM.

Это то, что я вставил в моей странице:

<div class="myClass"> 
    <p>foo</p> 
    <script> 
     dataLayer.push({'event':'myEvent'}) 
    </script> 
</div> 

и ГТМ я создал бирку с HTML:

<div class="test">this is a test</div> 
<iframe src="www.foo.com" /> 

, срабатывающий на myEvent.

К сожалению, это не работает правильно, мой тег вставляется в нижней части моей веб-страницы, а не внутри div myClass.

Я делаю что-то неправильно или это просто не допускается GTM?

Спасибо.

Answer 1

«Не разрешено», возможно, немного сильное (как вы видите, это работает в некоторой степени), но теги, которые изменяют визуальные аспекты страницы, обычно не рекомендуются.

Если вы хотите вставить HTML в определенном месте, было бы лучше, чтобы создать элемент динамически с помощью Javascript и добавить его к существующему элементу, так что ваш HTML тег будет выглядеть примерно так (непроверенный):

<script> 
var myDiv = document.createElement('div'); 
myDiv.setAttribute('class','test'); 
var container = document.querySelector('.myClass'); 
container.append(myDiv); 
</script> 

Вам нужно убедиться, что элемент, который вы добавляете, уникален (если возможно, добавьте идентификатор, а не имя класса). Теги выполняются асинхронно, поэтому немного сложно сказать, в какой момент процесса загрузки добавлен HTML (это приведет к переплавке в DOM, что является дорогостоящей операцией для клиента, поэтому вы тоже не хотите делать это довольно часто).