What is a Tag? Explaining Types, Applications, and Management Tool Settings

2024.06.11

You may have heard about “HTML tags” and “tracking tags” but might be wondering what exactly they mean.

The term “tag” is frequently used in website management and advertising. While the general concept of a tag is consistent, the types of tags and their applications vary significantly.

In this article, we will explain the basics of tags, cover the main types, and provide detailed instructions on how to set them up.

What is a Tag?

A tag is a command used in HTML files and other formats to display information on the internet.

For instance, the page you are currently viewing is displayed using multiple tags. Tags that specify paragraphs, bold text, and other formatting allow for the display of complex layouts.

Tags also have various functions, and a key feature is the ability to use different types of tags depending on the application. Therefore, understanding the types and applications of tags is crucial to utilizing them effectively.

Types and Applications of Tags

The tags commonly found in HTML files are known as HTML tags, and they play a role in displaying web pages. There are also tags used for measuring web advertising and tags necessary for using certain tools. Here, we’ll delve into the types and applications of tags in more detail.

HTML Tags

HTML stands for HyperText Markup Language, which is the language used to create web pages. HTML files, made up of tags, are interpreted by web browsers to display as pages.

HTML documents are primarily composed of three elements

HTML tags
Head tags
Body tags

Let’s discuss each one.

HTML Tags

HTML begins with a “DOCTYPE declaration,” which indicates what document type the content is written in.

Following this is the HTML tag, which forms the core of the HTML structure.

HTML Tag

The HTML tag acts as the parent element for other tags, meaning that everything except the DOCTYPE declaration is included within the HTML tag. The HTML tag also encompasses the head and body tags discussed below.

Head Tags

The head tag contains information for search engines and other data recognized by computers, hence the content within a head tag does not appear on the browser screen.

Here are some of the tags you should include in the head section.

<meta charset=”utf-8″>: Specifies the character encoding.
<title>…</title>: Sets the page title.
<meta name=”description” content=”…”>: Provides a description or summary of the page.
<meta name=”robots” content=”noindex,nofollow”>: Settings to refuse page indexing.
<link rel=”canonical” href=”URL”>: Normalizes the URL.

Body Tag

The body tag represents the main content of the document, containing the elements that will be displayed in the browser. It should be written immediately after the closing head tag. Here are some tags you should include within the body tag.

<p>…</p>: Paragraph
<h1>…</h1>: Headings (from h1 to h6)
<img src=”…” />: Image
<a href=”URL”>…</a>: Links (can contain text or images)
<br>: Line break
<!– … –>: Comment

These are just examples; many other tags can be used within the body tag.

Also, note that both head and body tags should each be included only once within the HTML document.

Tags for Web Advertising

Web advertising tags play a role in measuring the effectiveness of ads by tracking user information and page clicks. While general effect measurements are done using analytics tools, tags allow for more detailed access analysis.

The following are main types of web advertising tags.

Conversion tags
Retargeting tags

Let’s discuss each type in detail.

Conversion Tags

Conversion tags measure the results against predetermined goals like inquiries or material requests. Normally, while you can see the number of ad views, you can’t measure the exact number of conversions. Conversion tags are placed on a “thank you page” that appears when a conversion is completed, measuring the event when specific conditions are met.

Methods for using conversion tags are as follows.

Unique Conversions: Measure conversions from the same user only once within 30 days.
Total Conversions: Measure all conversions.
View-Through Conversions: Measure conversions that happen after the ad is viewed but the user later comes through another entry point.

Adjusting the conversion measurement method based on the product and situation allows for deeper user analysis.

Retargeting Tags

Retargeting tags are used for the ad delivery method known as “retargeting.” Retargeting involves marking users who have previously accessed a site and then showing ads to them on other sites. The retargeting tag assigns a cookie to the user when they visit the site, serving as a marker.

Retargeting tags are known for their high conversion rates compared to other ads, making them essential for those looking to achieve significant results.

Tool Control Tags

Tool control tags are used to integrate tools like Google Analytics and Google Optimize with HTML. These tags collect data on incoming traffic and user information whenever someone accesses a tagged page. For any tool that interacts with your site, you’ll typically need to set up these tags. Check the details for each tool for specific setup instructions.

In this guide, we will cover the following three tools.

Google Analytics
Google Optimize
User Heat

Google Analytics

Google Analytics is a tool that analyzes the flow of users from the source of access to the site until they leave. The tag used for this purpose is the tracking code.

The tracking code allows you to monitor the following information.

Pages/Session: Number of pages viewed during a session
PV: Page views
Users: Number of people who accessed the site
New Users: Number of new visitors to the site
Average Session Duration: Time users spent browsing the site
Bounce Rate: Percentage of users who left after viewing only the first page

Google Analytics is powerful because it can track almost anything related to the site. Therefore, the tracking code is an essential tag for any site operator.

Google Optimize

Google Optimize is a tool for conducting A/B testing by comparing multiple pages. A/B testing typically involves preparing two variations and comparing parts of the page, but the following types of tests can also be conducted.

Redirect Test: Comparing different page layouts or content across entire pages
Multivariate Test: Comparing multiple patterns by combining various conditions

Traditionally, conducting A/B tests involves preparing separate pages and ensuring conditions are identical, which can be challenging. However, Google Optimize simplifies this process through the use of a tag called a snippet.

The Google Optimize tag is usually set up via Google Tag Manager.

User Heat

User Heat is a tool for visualizing user behavior on a page through “heat map” analysis. It helps identify areas for improvement by showing detailed user interactions.

Elements you can track with User Heat are as follows.

Engaged Areas: Displays the time users spend and mouse movements in red
End Areas: Shows the completion rate of page reading in %
Click Areas: Indicates where users last clicked on the page
Mouse Moves: Displays mouse movements of multiple users on the page
Exit Areas: Shows the scroll rate of the page in %

User Heat is a free tool with comprehensive features. The tag for this tool is easy to generate and implement.

How to Install Tags

To install tags, you need to obtain the code from each tool and add it to the site’s HTML.

This process might seem challenging if you’re not familiar with HTML. If handling HTML is intimidating, consider using Google Tag Manager to manage your tags.

Here, we introduce two methods for installing tags.

Embedding Directly into HTML Code

The first method involves editing the HTML file and embedding the tag directly.

This method is advantageous because it doesn’t require initial setup, allowing for quick configuration if the page structure is clearly defined.

However, for sites with extensive content, or if HTML is incorrectly written, this method can become cumbersome.

Especially if there’s an error in the HTML code, it could mix with the tag code and cause significant layout issues on the site.

Therefore, it is generally recommended to use a tag management tool, as described below.

Using Tag Management Tools

The second method involves using tag management tools like Google Tag Manager.

The primary benefit of tag management tools is that once initially set up, tags can be easily added or removed later.

When embedding tags directly, you need to open and edit the HTML file each time a tag is changed. However, with a tag management tool, not only is tag editing more efficient, but the addition and removal of tags are also streamlined.

However, initial setup requires some knowledge of HTML, so a basic understanding of HTML is necessary.

Setting Up Google Tag Manager

Google Tag Manager is a tool designed to manage tags collectively. Whether they are HTML tags or advertising tags, you can set them all up together.

Additionally, the management interface allows for easy tag verification and preview mode to check the implementation, making it very convenient.

Therefore, when managing multiple tags, using Google Tag Manager is recommended for efficiency.

Here is a detailed guide on how to set up Google Tag Manager.

Creating an Account

The steps to create a Google Tag Manager account are as follows.

-Open Google Tag Manager.

-Display the account creation screen.

-Enter the account name, container name (URL), and container usage location (web or app).

-Agree to the terms of service and complete the creation process.

Installing GTM Code

After creating your account, the GTM code will be displayed along with the phrase “Install Google Tag Manager.”

There are two types of code, so make sure to place each in the correct location

Top code: Just below the <head> tag in your HTML file.
Bottom code: Just below the <body> tag in your HTML file.

Setting Up Google Tag Manager

Next, let’s go over how to configure the tags.

-Open the Google Tag Manager admin screen.

-Select “New Tag” → “Tag Configuration.”

-Choose “Tag Type” → “Custom HTML.”

-Add the tag in the code input field.

-Click “Trigger” to display the settings screen.

-Select the appropriate item from “Trigger Configuration.”

-Click save to complete the setup.

In the trigger configuration field, you can specify the conditions for displaying the tag. For example, if you select “All Pages,” the tag will be added to “all pages” where Google Tag Manager is installed.

To specify a page, enter the URL, such as “https://www.example.com/,” in the trigger. For conversion tags, you might enter “when the user visits https://www.example.com/.”

Publishing the Settings

After configuring the triggers, you need to publish the settings.

-Open the Google Tag Manager admin homepage.

-Click “Submit” in the top right corner.

-Select the relevant URL, enter the tag name and details.

-Click “Publish” again in the top right corner to complete the setup.

Verifying the Settings

Next, verify that the tag is functioning correctly.

-Download the “Google Tag Assistant” extension from the Google Chrome Web Store.

-After installation, the “Google Tag Assistant” icon will appear in the Chrome browser.

-Click the icon and select “Enable” → “Disable” to check the settings.

-If the tags appear in the “Result of Tag Analysis” screen, everything is functioning correctly.

Summary

In this article, we’ve detailed the basics of tags, their main types, and specific setup methods. Tags can be broadly categorized into HTML tags, advertising tags, and tool control tags. While there are multiple tags within each category, it’s challenging to learn them all at once. Start by focusing on the tags introduced in this article. Additionally, using Google Tag Manager is crucial for tag management. It allows for easy addition and deletion of tags, so we recommend early adoption even if you currently handle only a few tags.

Author Profile

Mr. Takeshi Amano, CEO of Admano Co., Ltd.

Mr. Takeshi Amano is a graduate of the Faculty of Law at Nihon University. With 12 years of experience working in the advertising agency industry, he discovered SEO and began his research during the early days of SEO. He self-taught and conducted experiments and verifications on over 100 websites. Using this expertise, he founded Admano Co., Ltd., which is currently in its 11th year of operation. Mr. Amano handles sales, SEO consulting, web analytics (holding the Google Analytics Individual Qualification certification), coding, and website development. The company has successfully managed SEO strategies for over 2000 websites to date.

Return to the top of Japan SEO