Get best of the week

Custom HTML Tag Guide for Google Tag Manager by Simo Ahava

At the end of January, Simo Ahava posted in his blog a review on the possibility of using Custom HTML tags in Google Tag Manager. Custom HTML tags provide ample opportunity to change the content on the site, but you need to be very careful - tag features and their processing carry great risks. MediaGuru analyst Timur Ledenyov has translated this useful review for you.

For quite some time (since the end of 2012), one of the most significant GTM options was the Custom HTML tag. This magic tool allows GTM to add an HTML element to a website page. Since 2012, Google Tag Manager has evolved from an isolated environment with custom tag templates into an unlimited client-side content management solution.

In the article, we will consider the principles of the Custom HTML tag and the possibilities of its application.

Custom HTML Tag Filling


As the name implies, Custom HTML tag allows you to place HTML elements on the site page. Let's create it:



<script>
  console.log('Hello!');
</script>

<div>
  <span>Hello!</span>
</div>

This tag adds three elements to the page:

  • <script>, which is compiled and executed in JavaScript;
  • block div;
  • <span>included in <div>

When you publish a container and look at the minimized source of the JavaScript container, it looks like this:



your beautifully formed tag looks like this because the HTML is encoded, and this is a smart step before defining strings as HTML elements.

The enableIframeMode and enableEditJsMacroBehavior flags are the old features that are no longer visible in the UI. You can make them visible in the Custom HTML tag interface if you know how. But it will not affect anything.

So, you created a Custom HTML tag and saw how it is added to the container. But what then happens on the page, and where exactly?

Injection


When the Custom HTML tag fires in the Google Tag Manager, the following mechanism starts:

  1. A dummy is created <div>, to which, using the .innerHTML attribute, a coded string is added representing your Custom HTML tag.
  2. This forces the browser to treat the encoded string as HTML, so that tags added to Custom HTML are converted to HTML elements.
  3. One by one, these elements are removed from <div>and proceed to injection.
  4. Then each element is added as the last child document.body element.

There are some nuances in this process:

  • How Google Tag Manager interacts with onHtmlSuccess and onHtmlFailure in the queue
  • how elements <script>are cleared of all user attributes before injection.

What does it mean? Everything that you enter in the Custom HTML tag is added to the end of the body, whatever it was at the time of injection. Usually they mean page footer, but this is not necessary, given modern page layouts.



Important: when you add a new element to the page, you start re-arranging the content. Typically, the browser should recalculate the sizes, positioning, layout and attributes of the elements; preceding, surrounding, or nested within an embedded element.

It's not so easy. Each item you add exacerbates the problem. And in single-page applications, which may not reset the DOM between transitions, you can observe hundreds of such elements on one page, each of which worsens performance more and more. We will return to this in conclusion, but before the conclusion I will say:

Avoid using Custom HTML tags without an obvious need.

I admit, such a disclaimer for the article is not without irony.

Custom HTML Scripting Scripts


Why use these tags and apply a tag management solution to inject an element? An excellent question for which I do not have a quick and definitive answer.

I can say that a large number of Custom HTML in the container can talk about one of the following situations:

  1. You are faced with a too complicated case for which standard GTM tags or custom templates are not suitable.
  2. You are new to GTM (or JavaScript) and you don’t understand that any of your custom HTML tags can be replaced with standard tags or custom templates.
  3. , -, .
  4. , - .
  5. , Google Tag Manager, .

This is your container, and of course, you have the right to use it as you see fit. But if scenarios 2 and 3 appear, I strongly recommend that you make changes to the status quo. Ignoring the complexity of GTM and JavaScript can interfere with the positive effects that these technologies open. Working contrary to the restrictions established in your company in the long run will also cause disagreements and lead to disrupted communication, a terrible site and unreliable storage of information.

Let's look at some scenarios in which you probably want to try Custom HTML tags.

Adding an item to a specific place on the page


The disadvantage of the Custom HTML tag is that it embeds the element at the end <body>. What for? If the element is a visual component (i.e., it should be displayed on the screen), then it is most likely that the end <body>is not the place where you would like to see it. To get around this, you need to use JavaScript and its DOM manipulation methods.

The trick is to find some element that is already on the page and place a new element relative to it.

For example, I want to add a small subheading for the page to make it look like this:



Now, if you create a Custom HTML as follows: <h3> It's really cool - I promise!</h3>, the element is added to the end <body>and will not look very good.

So instead I needCreate a new element using JavaScript , and then position it relative to the page title.

<script>
  (function() {
    //    <h3> 
    var h3 = document.createElement('h3');
    
    //  
    h3.innerText = "It's really cool - I promise!";
    
    //     <h1>
    var title = document.querySelector('h1');
    
    //      <h1>
    if (title) {
      title.parentElement.insertBefore(h3, title.nextSibling);
    }
  })();
</script>

The final result you see in the screenshot above.

This is a subtle irony - you use Custom HTML to create an element ( <script>) that will create another element ( <h3>). Yes, it would be great if you could define in Custom HTML where the element will be located. In fact, it would be even cooler if there was a custom template that allows you to create an element with the ability to select a location for the element. Thus, you do not need to inject the script at the end of the code at all! But we were distracted.

Placing the script in <head>as high as possible


This is partly due to the previous scenario, but it deserves special attention depending on how often this situation arises. Sometimes you are asked: "Place the script AS MUCH ABOVE in <head>."

So you need the script to run on the page as early as possible. The higher the element in <head>, the faster the browser will process it as part of the displayed page.

But this advantage is lost when using Google Tag Manager. Usually, when the GTM library has loaded, the processing <head>has already ended, and the browser is rendering with might and main <body>. Because of this, trying to add a script to <head>as high as possible makes no sense and actually only harms the final result.

Why? When you created Custom HTML, it forms an element and embeds it in<head>. First, the browser needs to add Custom HTML (performance hit), then create a new element (another performance hit) and finally add a new element to <head>(performance hit).


Instead, you need to add <script>HTML directly to Custom. With this method, it will be added to the end <body>, and the browser will execute it as quickly as possible.

Downloading third-party JavaScript code


Let's continue the experiment from the previous scenario. Suppose you have a third-party developer whose JavaScript code you want to upload to the site. And you realized that you only need to add an element <script>to the page using Custom HTML.

In this case, you do not need to use Custom HTML at all.

Instead, make a custom template that uses the injectScript API to load the library.

Custom templates are optimized for JavaScript injection and loading, and they offer a permission and policy model for a safe (more secure) injection.



In the future, this will be the best way to implement<script>. This will not help you with other scripts, since the standard set of JavaScript templates is quite limited. Therefore, if you want to add, for example, a custom event listener, you will need a Custom HTML tag.

Change ux


One of the things you'll want to do with Custom HTML is modifying UX (user experience). To do this, you can use something like a cookie banner, it is possible to change the styles on the page or add it <iframe>, which loads some convenient widget for your ecommerce site.

I would like to warn you about the risks involved in doing all this with the Google Tag Manager.

  1. (, Brave) / GTM. ( , ).
  2. / , . , HTML . Google Tag Manager , , , . querySelector() , – - .
  3. Added to all this are the performance-related reasons that I mentioned above. Adding each dynamic element in increasing order will degrade page performance, which will lead to annoying things: your custom elements will begin to appear and disappear; the quality of the data will deteriorate (when the iframe, which you are dynamically changing, has time before making changes) up to lags and page freezes, especially on single-page sites.

Therefore, please do not consider the use of Google Tag Manager as a content management system.

findings


This was a brief overview of the features of Custom HTML tags.

If I could talk to myself in 2012, I would advise myself to consider the shortcomings of Custom HTML tags as early as possible and stop building illusions about the endless possibilities of Google Tag Manager for adding scripts. But rather, to think in a complex way - about the organization, about the site as a whole and about the context of the environment in which GTM works - before making risky decisions.

However, there are applications for Custom HTML today. Creating a click listener using the Custom HTML tag (document.addEventListener ()) may turn out to be more advantageous than running some kind of custom code using GTM triggers.


This is because the click trigger will run the tag over and over again (injecting it again and again) each time it fires. If you create your click listener in a Custom HTML tag and process a repetitive task with it, then you will avoid confusion during implementation.

I also vigorously vouch for the convenience of Custom HTML in supporting hypotheses. You can quickly try out a new design or functionality by posting changes to a specific sample of visitors. If the results are satisfactory, it will be possible to propose these changes for inclusion in the main site code.

However, I hope that one day custom templates will replace Custom HTML tags.

As a parting word for those using Custom HTML tags, especially for those who want to add code found on the network, the famous Russian proverb comes in handy:
Trust, but verify.

If you don’t know what the code is doing, check with a familiar web developer.

More articles:


All Articles