How To Pull in Header Text as a Variable Using Google Tag Manager

If there’s a piece of text loaded on a page that you would like to collect as part of your data analysis, there are several ways to do this using Google Tag Manager.

In today’s example, we’re going to walk through how to collect the header text on one our blog posts – but first, you might ask why we’d want to do this?

Well, maybe we want to see which blog topics generate the most engagement. We could do this by tracking submitted contact forms or clicks to get in contact at the bottom of our blog posts as Google Analytics Events – and we could send the title of the blog through to Google Analytics as the Event Label. This will then allow us to easily breakdown and report on blog post engagement by topic.

How To Collect Header Text as a Variable in GTM

This process will work for any piece of text that’s loaded on a webpage – but we’ll look at the Header in this instance, as an example. The first thing to do is check the code behind the text that you want to collect.  The easiest way to do this is to right-click on the piece of text, then ‘Inspect’ (on Chrome).

By doing this, we can see that this particular blog header is the ‘h1’ element on our page.  Now that we know this, we can create a DOM Element Variable in Google Tag Manager  to pick up this text.

Using a DOM Element Variable in GTM to Collect H1 text

If you want to gather any static piece of text that is loaded on a page via Google Tag Manager, you will want to use a DOM Element Variable.

DOM = Document Object Model, which is a rather fancy way of referring to all of the stuff that loads on the page.

To specifically collect the ‘h1’ element text, we need to create a variable as per below:-

You can then test if your variable picks up the text you’d expected by using GTM’s debug mode.  You may find that the value is undefined until the ‘DOM Ready’ event because it is only once the ‘DOM Ready’ event occurs that we know the content of the page has fully loaded in.

Once you can see the text you’d expected, you can then use this new variable in any tags when tracking Google Analytics Events that occur on this page post-DOM Ready.

Important note: the DOM Element Variable will always return the first match it finds on the page, so if you have multiple ‘h1’ elements on the page, it will only return the text from the first element.

You can use the same technique described above to pull in any static text loaded on a page – you just need to use the correct Element ID or CSS Selector for the element you want to target.  You can find out more about testing your CSS Selectors in Chrome here.

Any questions on the above? Let us know in the comments below!

7 responses to “How To Pull in Header Text as a Variable Using Google Tag Manager”

1. humaira says:

   August 6, 2021 at 2:01 pm

   It still does not work – shows empty container – do we have to set a tag in GTM for this?
   dataLayer.push({
   ‘event’: ‘view_search_results’,
   ‘search_term’: {heavy duty, how to repair a slide,
   }
   });

   Reply
2. humaira says:

   August 6, 2021 at 2:05 pm

   also what is the difference between search & view_search_results

   what will happen to this datalayer which defined by google for search?

   dataLayer.push({
   ‘event’: ‘search’,
   ‘search_term’: {heavy duty, how to repair a slide,
   }
   });

   Reply
3. humaira says:

   August 6, 2021 at 2:07 pm

   Do I have place a new datalayer for this to work?

   dataLayer.push({
   ‘event’: ‘view_search_results’,
   ‘search_term’: {heavy duty, how to repair a slide,
   }
   });

   also what is the difference between search & view_search_results

   and what will happen to this datalayer which defined by google for search? this one also doesn’t show the search terms in GA4

   dataLayer.push({
   ‘event’: ‘search’,
   ‘search_term’: {heavy duty, how to repair a slide,
   }
   });

   Reply
   • Joanne Kearney says:

     August 9, 2021 at 10:51 am

     Hi Humaira,

     You shouldn’t need to use the data layer if the search term is passed through in the URL when a user performs a search on your site.

     You just need to follow setting up site search under Enhanced Measurement first- the blog below has steps on how to do this:
     https://glowmetrics.craftandslice.com/blog/setting-up-site-search-in-ga4/

     Then, you follow the steps above to expose the site search terms via a custom dimension to view this in the event report.

     Joanne

     Reply
4. humaira says:

   August 25, 2021 at 2:32 pm

   followed both of your blog now – placed the custom definitions as well, paused the search tag in tag-manager

   now it does not show search_term in 30 min window

   /search?keyword=hello

   placed keyword and search under admin/site search

   Am i doing something wrong?

   Reply
   • Joanne Kearney says:

     August 26, 2021 at 11:52 am

     Hi Humaira,

     You should be able to see the event parameter view_search_results in realtime reports when a search has taken place.

     Under Engagement > Events, within this table you should also be able to see the event for view_search_results and if you click that, you should be able to see the SITE SEARCH QUERY within a widget there.

     If you are still having issues, feel free to email me directly on joanne[at]glowmetrics.com and I can take a look at your set-up.

     Joanne

     Reply
5. lukas says:

   May 3, 2023 at 5:07 pm

   thank the lord aka glowmetrics

   Reply