Published January 28th, 2023 by Assaf Trafikant

Google Tag Manager Useful Tricks and Scripts

Table of Contents

How To Fetch H1 with GTM

Go to GTM->Variables, and create a new Java Script Variable Add a custom Java Script variable called “Get H1 text” or something, and paste the following code. You can change it to whatever headline type you wish (h1,h2,h3…)

function() {
 return window.document.getElementsByTagName('h1')[0].innerText;
}

How to Fetch Open Graph Schema Attributes Using GTM

Facebook Open Graph has a list of attributes you can use on your site <head> section. It can look something like this :

<head>
    ...
    <meta property="og:title" content="----PRODUCT TITLE----" />
    <meta property="og:description" content="----PRODUCT DESCRIPTION----" />
    <meta property="og:type" content="product" />
    <meta property="og:url" content="http://-----PRODUCT_URL----" />
    <meta property="og:image" content="http://-----PRODUCT_IMAGE_URL----" />
    <meta property="product:price:amount" content="----PRICE----" /> 
    <meta property="product:price:currency" content="USD" />
    ...
</head>

. You can use this information and extract it to your GTM needs. Go to GTM->Variables, and create a Custom Java Sctip variable with the following code, just change the property name from product:price:amount to any schema attribute you want such as og:type, og:image etc.

function() {
var metas = document.getElementsByTagName('meta'); 
      for (i=0; i<metas.length; i++) { 
            if (metas[i].getAttribute("property") == "product:price:amount") { 
            return metas[i].getAttribute("content"); 
            } 
      }
}

How To Fetch User Local Time in GTM

Most, if not all, analytics tools align all users to one time zone. If a UK visitor lands on your site at 3am (local time), but your account is set to EST Timezone, then the recorded visit time will be 10pm. With this variable, you can extract the user local time and push it to your analytics data and use it to understand the real time of visit (read more).

Go to GTM->Variables, and create a new Custom JavaScript variable with the following code:

function test(string) {
 ourTime = new Date()	;
 return ourTime.getHours() ;
}

How To Extract URL Query Parameter Value With GTM?

You have URL with several query parameters like domain.com/?param1=11&param2=22 and you wish to extract the value of a specific query parameter, let’s say param1.

Go to GTM->Variables, and create a new URL variable type. Then, choose “Query” under Component Type and set your desired query parameter value, I this case param1.

How to Add Noindex or Nofollow Meta Tags With Google Tag Manager

Add the following Custom HTML tag, and create a trigger to fire it on the pages you want to add noindex or nofollow tags. This example adds noindex and nofollow. Of course you can change the meta.content line to align with your needs. Also note this script uses jQuery.

<script>
jQuery(lmeta[name="robotsu]').remove(); v
ar meta = document.createElement('meta'); 
meta.name = 'robots'; 
meta.content = 'noindex, nofollow'; 
jQuery('head').append(meta);
</script>

How To Exclude Query Parameters Using Google Tag Manager

With Google Tag Manager you can create a “cleaner” version of the site URL, especially if it adds unnecessary URL parameters. This way you Google Analytics reports can have clear and more unified data. In the next chapter, we’ll use it to use it as a canonical URL.

If you wish to take the URL path without ANY parameters, GTM has a built-in variable for that call {{Page Path}}. If you want to be selective, and exclude only several parameters, I strongly suggest not to take the original URL and remove unnecessary parameters, but instead, take the clean the clean {{page path}} and append it the desired parameters. If you want to take the “exclude parameters” way, add this Custom Javascript Variable (taken from this Stack Overflow thread)

Replace param1, param2, param3 with your parameters
Make sure all default URL-related built-in variables are enabled:

function() {
var params = [‘param1′, ‘param2’, ‘param3‘];
var a = document.createElement(‘a’);
var param,
qps,
iop,
ioe,
i;
a.href = {{Page URL}};
if (a.search) {
qps = ‘&’ + a.search.replace(‘?’, ”) + ‘&’;
for (i = 0; i < params.length; i++) {
param = params[i];
iop = qps.indexOf(‘&’ + param + ‘=’);
if(iop > -1) {
ioe = qps.indexOf(‘&’, iop + 1);
qps = qps.slice(0, iop) + qps.slice(ioe, qps.length);
}
}
a.search = qps.slice(1, qps.length – 1);
}
return a.href;
}

Now you can use this variable in Google Analytics like this:

How To Modify Canonical URL With Google Tag Manager

As in my previous tip, with Google Tag Manager you can create a “cleaner” version of the site URL, especially if it adds unnecessary URL parameters. Now we can use it as canonical URL for SEO purposes. Of course, hard-coding it or using a plugin works better, but GTM can be very useful in other cases.

Let’s assume you’ve already created a clean URL to be used as canonical URL, and called it {{canonical URL}}.

Now, add a Custom HTML tag, with the following code, and use a All Pages trigger or any other trigger you wish.

<script>
 jQuery('link[rel="canonicaln"').remove(); 
 var link = document.createElement('link'); 
 link.rel = 'canonical';
 link.href = '{{canonical URL}}'; 
 jQuery('head').append(link); 
</script>

All articles