Einfügen von benutzerdefiniertem HTML in DOM mit Google Tag Manager

Question

Ich habe GTM auf meiner Website implementiert. Ich frage mich, ob es möglich ist, benutzerdefinierte HTML/JS in einer bestimmten Position des DOM hinzuzufügen.

Dies ist, was ich in meiner Seite eingefügt haben:

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

und auf GTM Ich habe einen Tag mit diesem html ein:

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

, die auf myEvent ausgelöst wird.

Leider funktioniert dies nicht richtig, mein Tag ist am Ende meiner Webseite eingefügt und nicht innerhalb der myClass div.

Mache ich etwas falsch oder dies ist nur nicht von GTM erlaubt?

Danke.

Answer 1

"Nicht erlaubt" ist vielleicht ein bisschen stark (wie Sie sehen können, funktioniert es in gewissem Maße), aber Tags, die visuelle Aspekte der Seite ändern, werden im Allgemeinen nicht empfohlen.

Wenn Sie an einer bestimmten Stelle HTML einzufügen wäre es besser, das Element dynamisch über Javascript zu erstellen und es zu einem vorhandenen Element anhängen, so dass Ihre HTML-Tag so etwas wie (ungetestet) aussehen:

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

Sie müssten sicherstellen, dass das Element, an das Sie anhängen, eindeutig ist (wenn möglich, fügen Sie statt eines Klassennamens eine ID hinzu). Tags werden asynchron ausgeführt, daher ist es schwer zu sagen, an welcher Stelle des Ladevorgangs der HTML-Code angehängt wird (dies führt zu einem Reflow im DOM, was für den Client eine kostspielige Operation ist, also möchten Sie dies auch nicht tun häufig).