Google Tag Manager’s Custom HTML Tag Directory – News Couple
ANALYTICS

Google Tag Manager’s Custom HTML Tag Directory


One of the most notable features of Google Tag Manager since the dawn of history (in fact, late 2012) is Custom HTML tag. This little magic widget enables Google Tag Manager injection HTML element on the page. A long time ago (still in late 2012), it allowed us to transform Google Tag Manager from a sandbox prisoner of native tag templates to a non-blocking client-side content management solution.

In this article, we will discuss how to use a custom HTML tag Worksand what you might be tempted to use it for.


X


Simmer . Newsletter

Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!

Custom HTML tag

As the name suggests, a custom HTML tag allows you to add files HTML elements on the page.

Anything you type in your custom HTML tag will be interpreted as HTML.

Add content to the tag

Let’s create a custom HTML tag that looks like this:

Example of a custom HTML tag

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

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

add this tag three Page elements: <script> A block compiled and executed as JavaScript, a div Block, and a <span> embedded <div>.

When you publish the container and look at the JavaScript container minified source (as we all do), here’s what it looks like:

Custom HTML tag as data object

The reason why your formatted tag looks so beautiful is because the HTML is encoded – a wise step to take before evaluating any strings in HTML elements.

You may be wondering what a file is enableIframeMode And enableEditJsMacroBehavior Tags – well, it’s old features that are no longer visible in the UI. If you know your stuff, you can actually show it in the custom HTML tag interface, but it won’t do anything.

So, now I’ve created a custom HTML tag, and seen how the tag is added to the container library. But how does it end up on the page? and where?

injection

When it comes time for Google’s tag manager to “activate” the custom HTML tag, it goes through the following moves:

  1. dummy <div> The encoded string representing your custom HTML tag is generated using the . extension .innerHTML Feature.
  2. This forces the browser to parse the HTML-encoded string, which will convert the tags you added to your custom HTML tag to actually HTML elements.
  3. These items are removed from the doll one by one <div> And passed for injection.
  4. When injected, each element is added to be the last child of document.body an item.

There are some nuances in this process, such as how Google Tag Manager handles a file onHtmlSuccess And onHtmlFailure Callbacks in the tag sequence, and how <script> Elements are stripped of all custom attributes before they are entered. But in general, this is the process.

Now, basically what this means is that anything you type in your custom HTML tag is added to the end of bodyWhatever the time of the injection. Usually this translates to: “down the page”, but that’s not a given with today’s flex layouts.

Injected items

One very important The thing to keep in mind is that when you add a new element to the page, you are forcing a file recede of the content. Essentially, the browser has to calculate again the dimensions, positions, layouts, and attributes of the elements that precede, surround, and overlap the injected element.

This is not a painless process. Every element you add is a compound to the problem, and so on single page apps Which may not reset the DOM between transitions, you could end up with hundreds of elements injected onto the page, each of which harms performance in exponential increments.

We’ll get to this in the summary, but just to predict the outcome:

Avoid using custom HTML tags unless absolutely necessary.

Yes, I am aware of the irony of the disclaimer in this particular article.

Why use custom HTML tags? Why use a tag management solution for element injection?

Great question! And one I don’t have a quick answer for. I would say that the abundance of custom HTML tags in a container is a display of one (or more) of the following:

  1. You have use cases Too complicated For original GTM tags or custom templates to handle.
  2. you have a little knowledge About GTM (or JavaScript) to see that some custom HTML tags can be replaced with native tags or custom templates.
  3. you own inflexible organizationGetting web developers to add your customizations directly to page templates (or other site code) isn’t an option.
  4. I found a file Nice Online, and you want a proof of concept quickly before passing it on to web developers for proper implementation.
  5. you all Drunk with force About what you can do on your site with Google Tag Manager, and no bald man from Finland will stop you from doing it.

It’s your own container – of course you are free to use it however you like. But if scenarios (2) and (3) ring the bell, I strongly urge you to strive to change the status quo. Ignorance of the intricacies of GTM and JavaScript can be counterproductive to the beneficial effects that these technologies offer. Likewise, working against the constraints set by your organization will lead to more friction in the long run, and can lead to inflamed communication structures, poor location, and unstable data collection.

Having said all that, let’s explore a few scenarios where you might be tempted to use a custom HTML tag!

Add an item to a specific position on the page

The downside of a custom HTML tag is that it injects the element at the end <body>. But what’s the use of that? If the item is a visual component (something that should appear on the screen), it is most likely the end <body> He is Not where you want it to end up.

To correct this, you need to use JavaScript And ways to manipulate the DOM.

The trick is to find an item actually on the page, and then place the new item relatively till then.

For example, let’s say I want to add a little Subtitle to this current page, so it looks like this:

translation example

Now, if you create a custom HTML tag using just this:

<h3>It's really cool - I promise!</h3>

The item will be added to the end <body> And it won’t look very good.

So, instead, I need that Create a new element using JavaScript, and then Place this new element in relation to the page title.

<script>
  (function() 
    // Create a new H3 element
    var h3 = document.createElement('h3');
    
    // Add the text content
    h3.innerText = "It's really cool - I promise!";
    
    // Get the reference to the current heading
    var title = document.querySelector('h1');
    
    // Inject the new element right after the H1
    if (title) 
      title.parentElement.insertBefore(h3, title.nextSibling);
    
  )();
</script>

The final result? You can see it in the screenshot above.

There is a subtle irony here – you are using a custom HTML tag for Create an item (The <script>) who – which creates an element (The <h3>). Yes, it would be nice to specify in a custom HTML tag where to insert the element. In fact, it would be even cooler if there was a file custom model Allows you to create items with positioning options. This way you won’t need to inject the end body text at all!

But I digress.

Add ‘at the highest level’ script in As much as possible

This is somewhat related to the previous scenario, but it deserves its own treatment due to the number of times the scenario appears.

Sometimes the seller will guide you to it “Put our scenario as high <head> as possible”.

This was directed because the seller wants to launch their own script As soon as possible on the page. The more an element in <head>The faster the browser parses it as part of the page rendering.

Head shot in the head

However, this benefit greatly Lost When using Google Tag Manager. When the Google Tag Manager library is loaded, it is usual to parse files <head> Already finished, the browser is working fine to display a file <body>. For this reason, trying to enter an elevated script in <head> As far as possible does not make any sense, which in fact Harmful to the intended end result.

why? Because when you create a custom HTML tag you then create an element and insert it into it <head>, the browser first needs to enter the custom HTML tag (performance score), then it needs to create a new element (another performance score), and finally it needs to enter the new element in <head> (hit performance).

Correct injection of the text

Instead – all you have to do is add the extension <script> Directly to the custom HTML tag. This way it will be included at the end <body>, and the browser will implement it as quickly as possible.

Download vendor JavaScript

In fact, let’s continue the thought experiment from the previous scenario. let’s tell you Act You have a resource whose JavaScript you want to upload to the site, and you’ve proven that all you have to do is add <script> to the page with a custom HTML tag.

my friend. Never use a custom HTML tag.

Instead, create a custom tag template that uses the . extension injectScript API to load the library.

Custom templates are optimized for JavaScript input and loading, and they provide a permissions and policy model for safe (r) injection.

custom injection mold

Moving forward, this will be the best way forward <script> Injection. This won’t help you in some other scenarios, as JavaScript sandboxing for templates is very restrictive. So if you want to add custom event listeners, for example, you’ll still need the old custom HTML tag.

Modify the user experience

One of the things you might be tempted to do with custom HTML tags from Google Tag Manager is Modify the user experience. This may be adding something like cookie banner, or maybe edit patterns on the page, or maybe add <iframe> It uploads some gadgets to your e-commerce site.

I would like to warn you about the dangers of doing these things with Google Tag Manager.

Google Tag Manager Approval Popup

First, Google Tag Manager It can be blocked by browsers (eg Brave) and by ad/content blockers. This is an uptrend (with tracking protection in browsers reducing the need for separate ad blockers).

The second reason is that you are separating jobs and/or experience from the site itself. You likely rely on positioning and selecting certain HTML elements to anchor your custom code. However, Google Tag Manager is Disconnected of your site construction, which is very risky I assume The website will remain unchanged.

Thus, even if one is specified in a file querySelector() The argument on the site changes, your custom code can stop working, or worse yet, break something else on the site.

On top of these performance-related reasons I mentioned earlier in this article. Introducing every dynamic element will drastically degrade page performance, causing annoying things like custom elements moving in and out, data quality degradation (when the iframe you’re dynamically modifying has time to load before changes are made), down to page stutter, slow User experience, especially in single page applications.

So, please, keep in mind Not Using Google Tag Manager as a content management system.

summary

This was a brief foray into the magical world of custom HTML tags.

If I could speak to 2012 me, I’d tell him to start thinking about the downsides of custom HTML tags soon, and stop getting drunk on Google Tag Manager’s endless ability to inject script and instead think about the entire organization, the entire site, and the whole context of the environment where GTM is triggered, before making dangerous decisions just because.

However, custom HTML tags have their use cases today. Actually creating a click listener with a custom HTML tag (document.addEventListener()) could actually be better Than launching some custom code using Google Tag Manager click triggers.

Click listener

This is because the click trigger will trigger the tag over and over (by injecting over and over) whenever the click trigger succeeds. Whereas if you create your own little click listener in a custom HTML tag and handle the recursive task in the callback, you will avoid injection mess.

I also strongly support the usefulness of custom HTML tags for building proof of concepts. You can quickly experiment with different experiences and designs, and you can publish changes to a sample of your site visitors. If you are satisfied with the results, then you can suggest these changes to add to the appropriate site code.

However, maybe one day, I hope that custom templates will make custom HTML tags obsolete.

As separator words, when using custom HTML tags Especially To enter a code that I found on the Internet, the famous Russian proverb is not out of place:

Trust but verify.

If you don’t understand what the code does, consult your friendly local web developer and ask.



Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button