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

Jun 25th 2021

Digital Analytics Insights

3 min read

Posted by Michael Wilson

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...

GlowMetrics Social Link GlowMetrics Social Link GlowMetrics Social Link GlowMetrics Social Link GlowMetrics Social Link

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!


GlowMetrics Social Link GlowMetrics Social Link GlowMetrics Social Link GlowMetrics Social Link GlowMetrics Social Link

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

  1. humaira says:

    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,
    }
    });

  2. humaira says:

    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,
    }
    });

  3. humaira says:

    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,
    }
    });

  4. humaira says:

    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?

    • 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

  5. lukas says:

    thank the lord aka glowmetrics

Leave a Reply

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

GlowMetrics

Posted by
Michael Wilson

Michael is the Digital Analytics Director at GlowMetrics, implementing complex tracking for our largest clients via Google Tag Manager while leading our wider analytics work across Google Analytics, Data Studio and Optimize
Read more from Michael Wilson

Browse by Category



GlowMetrics
Optimise your website and marketing campaign performance with Ireland’s leading digital analytics agency
Sign up to our newsletter