So the first use case is when your form injects a new SPAN element into the DOM upon an error. Node insertion - when a new is injected in the DOMĬSS style change - when a previously hidden is displayed This mutation can come in different sizes and shapes, but for the purposes of this guide, I will listen for two kinds of mutations, for two kinds of use cases:
This little piece of magic will create an observer object, which triggers every time a mutation takes place. To create the DOM listener, I will leverage an API known as MutationObserver. Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava into your email inbox! However, if you find that you need hacks such as the DOM listener to circumvent development problems on your website, I would strongly suggest that you take this up with your developers and try to come up with a solution which works with GTM’s standard features.
The main idea behind this post is to introduce a feature of JavaScript which can alleviate some of your tag management pains. This listener will then trigger when an error message appears on the page.ĭISCLAIMER: To be truthful, I feel quite strongly about using hacks such as this to fix faulty markup or an otherwise shoddy tag implementation. A working use case might be form validation: if you want to track invalid forms, maybe by sending the content of the validation error message with an event, you might just as well create a DOM listener. Actually, in this example you’re restricted to element insertion and attribute changes. With a DOM listener, you can fire a GTM event every time something changes on the page. That is why you might want to fire a GTM event when a certain message pops up on the screen, for example. Usually the problem is magnified with form handlers, since the developers might have installed some custom jQuery form manager, for instance, which simply refuses to cooperate with GTM’s form listeners. Ever so often I come across people asking for help, but they are unable to touch on-page code.
THE VISITOR RETURNS MUTATION HOW TO
The reason I’m teaching you how to create a DOM listener is simple. This extension will be a new listener, whose sole job is to listen for changes in the HTML and CSS markup on the page. In this post, I’ll walk you through a tutorial on how to create a Google Tag Manager extension.
0 kommentar(er)
