GoogleタグマネージャでページDOMにカスタムHTMLを挿入

Question

私のウェブサイトにGTMを実装しました。私はDOMの特定の位置にカスタムHTML/JSを追加することが可能かどうか疑問に思っています。

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

とGTM上で、私は、このHTMLでタグを設定している：

これは私が私のページに挿入されたものである

myEventにトリガされ

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

。

残念ながら、これは正しく動作しません。私のタグは、ウェブページの一番下に挿入され、myClass divには挿入されません。

私は何か間違っているのですか、これは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> 

を

追加する要素が一意であることを確認する必要があります（可能であれば、クラス名ではなくIDを追加してください）。タグは非同期で実行されるので、読み込みプロセスのどの時点でHTMLが追加されるのかは少し難しいです（これは、クライアントにとって高価な操作であるDOMでのリフローを引き起こすため、これもやりたくありませんしばしば）。