Build an H1 (DOM Element) Variable in Google Tag Manager

There are many examples where having this type of data, the text of the H1, available will make auto events and pageview tracking easier and cleaner to report. By implementing an H1 variable I was able to simplify reporting and present a much cleaner report using the H1 test on a page instead of filtering through a large number of URLs.

H1 Variable in Google Tag Manager

Building a variable with the H1 test is actually pretty easy to do. You need to create a DOM Element variable with the following settings:
Variable name: H1
Selection method: CSS Selector
Element selector: H1

H1 Variable in Google Tag Manager

Ideally only one H1 should be present on a page. If you have multiple H1s Google Tag Manager will pick up the H1 header that appears first in the code of the page.

How to Use H1 Variable for Auto Events and Reporting

Here is how I set up an event for a client to report on the most popular service page using the H1 on the page. There are a number of ways to report on the most popular product or solution or blog post but except you are using the enhanced eCommerce that will report using the actual product name, you will use the page URL in your reports and not the name, H1, of the page.

After building the variable, build a new trigger with the following settings:
Trigger name: {Page Name} Pageview
Trigger type: Pageview
Fire on: Page URL contains {URL identifier}

H1 Variable in Google Tag Manager

Then build your auto event tag with the following settings:
Tag name: Most popular product
Tag type: Universal Analytics
Track type: Event
Event category: Most Popular Product
Event action: {{H1}}

H1 Variable in Google Tag Manager

Then select the trigger and you are all set!

You should be able to see your report under Events. Drilling down to the event action will report on the page H1 and the number of pageviews it has received for a selected period of time.

Leave a Reply

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