What are tags

Tags are JavaScript snippets, images, or other objects that are embedded in or called from a webpage and designed to perform a specific function. Banner ads, video players, social sharing widgets, and analytics are all powered by tags. Nearly all data collection and tracking functions are performed by tags. Here's an example of one of the tags used by Google Analytics.

While some tags are created by website operators and served from the same domain as the webpage, most tags are created by third parties and served from remote servers. In some instances, website operators can point a subdomain to a third party server by creating a CNAME record in DNS to make a third-party tag appear like a first-party tag.

When a user visits a webpage, tags are loaded in the browser. Sometimes, a tag management system like Mezzobit is used, which employs a container tag to bootstrap the loading of other tags. When a TMS is not used, the tags are usually embedded in the page directly or called from other tags in a process called tag chaining.

Tag chains can get very long and unwieldy, either when a single tag brings in a lot of child tags or there is a long sequence of tag chains, sometimes stretching 10-15 generations deep. Below is a typical example showing both. The only practical limit to either would be the capabilities of the visitor's browser and bandwidth.

 

Once a tag is loaded, what it can do depends on the type of tag. Images are able to transmit data to remote servers as well as drop cookies. JavaScript tags, because they are code, are more powerful, with the ability to:

  • Examine nearly any data element in the browser, such as what content the user is viewing, what website was just visited, or characteristics of the local machine.
  • Create new visual elements on the page or change existing elements.
  • Perform tracking functions, such as dropping or reading cookies, using local storage, or performing browser fingerprinting.
  • Call other scripts, either first or third party.
  • Examine and control other code in the page, with some limitations.

 

Two flavors of JavaScript tags

While JavaScript tags perform many different functions, they are classified into two broad technology categories -- synchronous and asynchronous -- based on how and when they are executed. They also are called blocking and non-blocking tags, with the difference becoming clearer when you consider how a browser renders a web page.

Before the user sees a single line of text or an image, the browser parses the HTML and CSS into structures that help it render the page. If you look at typical HTML, you'll see a series of elements such as <h1>, <div>, <image>, and <span> that influence how the page is rendered. These items -- which also are called tags, but are unlike JavaScript tags -- are often nested many layers deep and have relations to one another. The browser sorts through all of these HTML tags from top and bottom upon loading the page to create two "trees" -- the Document Object Model (DOM) and CSS Object Model (CSSOM) -- that guide rendering.

Now it's time for the browser to paint the page. This is the point where synchronous and asynchronous make a big difference. If a JavaScript tag is synchronous, the browser will stop rendering the DOM when it encounters one of these tags. The tag does its thing and then the browser goes on its merry way. If the tag execution and load is short, then it's no big deal. But if the tag hangs up by a delayed remote call or worse yet, a serious error, the entire page is delayed.

Asynchronous tags are basically ignored by the browser until the DOM rendering is complete. Then they execute based on a variety of factors, such as the response of network calls and the presence of other JavaScript on the page.

Over the past five years, many third-party JavaScript tags went from being synchronous to asynchronous to avoid this problem. But some tags that need to execute very soon after page load (like A/B testing systems) still may require synchronous loading. Other tags remain synchronous to ensure they finish loading and executing ahead of downstream asynchronous tags, although there are other, less disruptive ways, of fulfilling this requirement.

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.