![]() ![]() ![]() To rectify this, you need to use JavaScript and its DOM manipulation methods. But what use is that? If the element is a visual component (something that should be shown on the screen), then most likely the end of is not where you want it to end up in. The downside of the Custom HTML tag is that it injects the element to the end of. Having said all that, let’s explore some of the scenarios where you might be tempted to use a Custom HTML tag! Adding an element to a particular position on the page Similarly, working against the constraints set by your organization will cause more friction in the long run, and can lead to inflamed communication structures, a crappy site, and unstable data collection. Being ignorant about the intricacies of GTM and JavaScript can be counter-productive to the beneficial effects that these technologies enable. But if scenarios (2) and (3) ring a bell, I strongly urge you to seek change to the status quo. It’s your container - you are of course free to use it however you wish. You are drunk with power over what you can do on your site with Google Tag Manager, and no bald dude from Finland is going to stop you from doing it.You’ve found a cool thing online, and you want to quickly proof-of-concept it before passing it to the web developers for proper implementation.You have an inflexible organization, where getting the web developers to add your customizations directly to the page templates (or other site code) is not an option.You have too little knowledge about GTM (or JavaScript) to know that some of your custom HTML tags could be replaced with native tags or custom templates.You have use cases far too complicated for GTM’s native tags or custom templates to handle.I’d say an abundance of Custom HTML tags in a container is symptomatic of one (or more) of the following things: Great question! And one I don’t have a hard-and-fast answer for. Why use Custom HTML tags? Why use a tag management solution for element injection? Yes, I do recognize the irony of such a disclaimer on this particular article. ![]() ![]() We’ll get to this in the summary, but just to foreshadow the conclusion:Īvoid using Custom HTML tags unless it’s absolutely necessary. Each element you add compounds to the problem, and on single-page apps which might not reset the DOM between transitions, you could end up with hundreds of injected elements on the page, each hurting the performance in exponential increments. Basically, the browser has to calculate again dimensions, positioning, layouts, and attributes of elements preceding, surrounding, and nested within the injected element. One extremely important thing to keep in mind is that when you add a new element to the page you force a reflow of the content. Typically, this translates to: “The bottom of the page”, but this is not a given with today’s fluid layouts. Now, what this essentially means is that anything you type into a Custom HTML tag is added to the end of body, whatever that is at the time of injection. There are some nuances to this process, such as how Google Tag Manager handles the onHtmlSuccess and onHtmlFailure callbacks in tag sequencing, and how elements are stripped of all custom attributes before injection. Upon injection, each element is added as the last child of the document.body element.One by one, these elements are removed from the dummy and passed for injection.This forces the browser to parse the encoded string as HTML, resulting in the tags you added to the Custom HTML tag to actually turn into HTML elements.A dummy is created to which the encoded string representing your Custom HTML tag is added using the.When it’s time for Google Tag Manager to “fire” the Custom HTML tag, it goes through the following motions: But how does it end up on the page? And where? The injection So, you’ve now created a Custom HTML tag, and you’ve seen how the tag is added to the container library. If you know your stuff, you can actually make them show up in the Custom HTML tag interface, but they won’t do anything. You might wonder what the enableIframeMode and enableEditJsMacroBehavior flags are - well, they’re legacy features that are no longer visible in the UI. The reason your beautifully formatted tag looks like this is because the HTML is encoded - a wise step to take before any strings are evaluated into HTML elements. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |