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”
Leave a Reply
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 WilsonBrowse by Category
- Social Media
- SEM
- SEO
- Google Ads
Digital Marketing
- Google Analytics
- Google Tag Manager
- Google Opimize
Digital Analytics
Optimise your website and marketing campaign performance with Ireland’s leading digital analytics agency
Sign up to our newsletterEnjoyed reading this article? Find more like it below…
Posted by
Conor Ross
Jan 16th 2020
Digital Analytics Insights
3 min read
Navigation Buttons in Google Data Studio
Guide Users Through Your Data Dashboards Creating an intuitive user experience is a hugely important aspect of web design, and there is no reason that the same principles shouldn’t be...
Posted by
Conor Ross
May 8th 2021
Digital Analytics Insights
5 min read
A Guide To Using Filters in Google Data Studio
Filters are a key part of any dashboard in Data Studio, as they help you to present and visualise the data most relevant to you and your report users. Most...
Posted by
Michael Wilson
Jan 18th 2023
Google Analytics
5 min read
Six Steps to Smooth Transition from UA to GA4 in 2023
Happy New Year! 2023 is the year that GA4 will officially become Google’s main analytics product with Universal Analytics scheduled to be sunset. On July 1, 2023, standard Universal Analytics...
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,
}
});
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,
}
});
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,
}
});
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
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
thank the lord aka glowmetrics