Google Tag Manager is one of the most useful tools for SEO, allowing us to track custom events that aren’t visible in GA4 by default. However, GTM is a very versatile tool that can be used to achieve much more than this. So, what are the things you didn’t know you could do with Google Tag Manager?
Our 5 things that you didn’t know that you could do with Google Tag Manager are:
- Scroll depth tracking
- Injecting HTML or CSS into the head
- Custom JavaScript variables
- Tracking page load times
- Lead value estimate calculations
Read on to find out more about the 5 things that you didn’t know you could do with Google Tag Manager, how to set them up, and why they’re so useful!
Scroll Depth Tracking
With Google Tag Manager, you can implement tags to track when a user reaches a certain part of the page, whether that’s a certain percentage or the number of pixels scrolled.
Setting this up is easy, simply create a new tag for a GA4 Event, assign your Measurement ID, give the event a name like “scroll_depth_50”, and move on to creating a new trigger.
On Trigger Configuration, scroll down to the User Engagement section and select Scroll Depth. From here, you can choose to measure either Vertical Scroll Depth or Horizontal Scroll Depth and select either Percentages or Pixels.
Percentages are great for getting a general idea across the whole site, whereas pixels can be the better choice for tracking whether users reached an important section of a specific page.
Inject HTML or CSS
As SEOs, we often need to make small changes to a specific page. Most of the time this can be achieved through the text editor on WordPress, but on some custom themes and other site builders, there’s often no option for this.
This can be frustrating to have to send to the developer to code into the site directly, just for the sake of one page.
Luckily, GTM is here to save us again! By adding a Custom HTML tag, you can inject lines of code into the head of the site quickly and efficiently.
Custom HTML Example
On one of our client’s recent blogs, we came across an issue on mobile where the table wasn’t conforming to the viewport and it would end up off-screen – allowing users to scroll the entire page horizontally to see it.
Unfortunately, this particular client has a custom-built (not by us!) backend that doesn’t offer much functionality and we don’t have access to the site’s CSS files.
To get around this, we created a simple Custom HTML tag to edit the scroll effect of the .table-container class that was already on the table element.
<style>
.table-container {
overflow-x: scroll;
}
</style>
This gives the table a scroll bar and fixes it to the size of the viewport, allowing users to still scroll the table but not the whole page!
Custom JavaScript Variables
Similarly to Custom HTML, Custom JavaScript variables allow you to inject JavaScript code into GTM to perform a wide variety of tasks. This can help you:
- Complete complex calculations
- Manipulate the behaviour of tags and triggers
- Retrieve data that isn’t available from the built-in GTM options
By doing this, you’re creating a function that returns a value that you can use in your tags and triggers. Examples of specific tasks that this can achieve include:
- Revenue Calculation: You can calculate the revenue of a product based on multiple factors, such as removing the cost of production and shipping.
- User Agent Detection: You can set a variable to detect the user’s browser type of device. This enables you to fire different events only when a certain device is used.
- Conditional Logic: Create conditional logic based on user interactions on the site. This can go much deeper than the standard options with built-in GTM variables.
- Third-Party APIs: You can pull in data from third-party APIs to improve your overall tracking data and provide more information on your reports.
- Custom Events: JavaScript variables allow you to create variables that check for more detailed user interactions to trigger events rather than relying on built-in triggers. This can be particularly useful when you want to track a third-party plugin.
Track Page Load Times
You can use GTM to track and monitor the page load times of your site. This was already a standard function of Universal Analytics, but this was scrapped with the move to GA4. Luckily, there’s an easy way to add this back in.
While pagespeed.web.dev will always be the gold standard for checking your site’s performance, it can be difficult to track and monitor this without completing it manually.
With a simple script, you can monitor the page load times directly from GTM. With this, you’re able to compare speeds easily and can see if a particular page performs worse than others. You can also monitor the speed of pages after completing large edits to ensure that your changes haven’t had a negative impact.
How To Track Page Speed in GA4
Step 1.
Create a custom variable in Google Tag Manager. Select the “Custom JavaScript” option and insert the script below. Finally, set the “Format Value” to 0 and save the variable. Just make sure you name it something you won’t forget! We’ll use “Page Load Speed” as our example moving forward.
function() {
if (window.performance && window.performance.getEntriesByType) {
var entries = window.performance.getEntriesByType(“navigation”);
if (entries.length > 0) {
var navTiming = entries[0];
var pageLoadTime = navTiming.loadEventEnd – navTiming.startTime;
return Math.round(((pageLoadTime / 1000) + Number.EPSILON) * 100) / 100;
}
}
}
Step 2.
Next, you’ll need to create two triggers using the “Windows Loaded” built-in option.
For the first trigger, choose “All windows loaded events”. For the second, choose “Some windows loaded events” and fire the trigger when the Page Load Speed is Less Than 0.
Step 3.
Now you can create your GA4 event tag. Set the Event Name to “page_load_speed” and add an event parameter. Name it something like loading_time and attach your JavaScript variable.
Then add the triggers that you created, with the second trigger being the exception.
Step 4.
At this point, GTM is tracking the loading time of your site and sending it through to GA4. But GA4 isn’t set up to receive it yet.
To set this up, we’ll need to go to Settings > Custom Definitions > Custom Metrics > Create Custom Metric. Enter a name for your metric, we use “Page Load Time”, and copy the parameter name from your GTM tag into the “Event parameter” field. Set the “Unit of measurement” to seconds and you’re ready to add it to your reports!
To learn how to complete a more in-depth page speed audit, read our guide on How to Audit Your Site Speed & Performance.
Event Value Calculations
With service sites, it can often be hard to show the client your SEO success – as there’s no direct monetary value like there is with an e-commerce site. One way to get around this is to track the estimated value of the leads that you earn.
This can be done by taking the client’s average revenue per conversion and dividing it by the average conversion rate of their leads to get their Expected Value Per Contact. Ideally, you would get the conversion rate of each type of lead, be it contact form submissions, email clicks, or phone calls.
*For some clients, you may need to factor in average lifetime value too.
How To Implement Estimated Values in GTM
Step 1.
For our example, we’ll say that the contact form on our site has an Expected Value Per Contact of £100. To start, we’ll need to make the site send a new data layer variable. This may sound complicated, but it’s actually some simple code that you can implement in GTM.
Because the GTM tag is implemented in the head of your site, you can add a JavaScript function here that pushes a revenueValue variable alongside the contact_form event. Here’s how that looks:
<script>
window.dataLayer = window.dataLayer || [];
function submitContactForm() {
window.dataLayer.push({
‘event’: ‘contact_form’, //Change to whatever your contact form submission event is called
‘revenueValue’: 100
});
}
</script>
Step 2.
Now you need to create a similar variable in GTM, doing the calculation of “ average conversion rate” * “average revenue per conversion”. Here’s how that looks:
function() {
return 500 * 0.20; // $500 * 20%
}
Step 4.
Now you’ll need to set up the event tag. Set this up as you usually would for your contact form event and set up the trigger and test until you know that it works. From here, you just need to add your variable to the Event Parameters section and save your work.
Step 5.
To see this information in GA4, you’ll need to set it up as a custom metric again, go to Settings > Custom Definitions > Custom Metrics > Create Custom Metric. Enter a name for your metric, we use “Page Load Time”, and copy the parameter name from your GTM tag into the “Event parameter” field. Finally, set the unit of measurement to Currency.
Google Tag Manager Experts
Here at Wildcat Digital, we’re experts in setting up detailed reports that are tailored to our client’s specific needs. If you need Google Tag Manager consultation or would like to enquire about our services, get in touch with a member of our team.
Jamie Stowe
Senior SEO Account Manager
