How to Count h[x] Elements Using a Custom GTM JavaScript Variable

Learn how to create a custom JavaScript variable in Google Tag Manager (GTM) that counts the total occurrences of header tags on your webpage. Get detailed step-by-step instructions for tracking each header type separately.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Custom GTM Javascript variable to count number of h[x] elements

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Counting Header Tags with Google Tag Manager

If you're trying to track how many header tags are on your webpage, you're in the right place! Many website owners and marketers often want to know how many times elements like <h2>, <h3>, and other header tags appear on their sites. This information can be useful for analytics purposes and improving SEO. In this post, we will look at how to create a custom JavaScript variable in Google Tag Manager (GTM) to count these header tags efficiently.

Understanding the Requirements

Before we dive into the solution, let’s break down what exactly you are looking for:

Total Count of Header Tags: You want to know how many times header tags (like <h2>, <h3>, etc.) appear in total.

Individual Count for Each Header Tag: You need the individual counts for each header tag (e.g., how many <h2> tags, how many <h3> tags, etc.).

GA4 Event Tag Integration: The output should be usable in Google Analytics 4 (GA4) event tags for data tracking purposes.

The Solution

Now that we have a clear understanding of the requirements, let’s create a custom JavaScript variable to achieve this. Below is a sample code snippet that accomplishes the task:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Code

Count Each Tag: Each subsequent line counts the individual header tags, so you can see how many of each type are present.

Return a Formatted String: The function returns a string that summarizes the total counts and individual counts.

Example Output

The output of the above code on a webpage might look like this:

[[See Video to Reveal this Text or Code Snippet]]

This response tells you at a glance how many header tags exist and how they are distributed among the different types.

Implementing the Code in Google Tag Manager

To implement the custom JavaScript variable in GTM, follow these steps:

Log In to GTM: Access your Google Tag Manager account and select the desired container.

Create a New Variable:

Go to Variables in the left sidebar.

Click on "New."

Choose "Variable Configuration."

Select "Custom JavaScript."

Paste the Code: Copy and paste the provided JavaScript code into the code editor window.

Name Your Variable: Name your variable appropriately, e.g., "Header Tag Counter."

Save Changes: Don’t forget to save your new variable.

Using the Variable with GA4 Tags

Once your custom variable is set up in GTM, you can utilize its output as a parameter in your GA4 event tags. This way, you'll be able to track header tag counts as events in Google Analytics.

Conclusion

Creating a custom JavaScript variable to count header tags in Google Tag Manager is simple and effective. This data can enhance your analytical capabilities and potentially improve your website’s SEO strategy. If you have any further questions or need additional help with GTM, feel free to ask!

Remember, tracking the right metrics is the key to understanding and enhancing your website’s performance.