How To: Use ChatGPT AI with GTM

As a website optimisation consultant I’m excited to see where AI can help me on my projgects and client work. That I’ve found ways to make my GTM tasks quicker and more efficient makes me very happy.

Google Tag Manager has come a long way since it’s inception back in October 2012, when it’s primary use was to insert tracking code snippets to a website without the need for a developer or skilled coder.

With the development a wide range functionality in the context of tags, triggers and custom variables, it’s become a powerful tool with regards manipulating a webpage in terms of either extracting data for bespoke tracking configuration or inserting code for SEO, UX or indeed for any reason at all for which you might want to amend the code or content on a page.

In turn, the need of an understanding of web coding in terms of HTML, CSS and JavaScript has become fundamental.

Despite having a background in coding, it doesn’t mean I want to spend much time coming up with the code that is required to do the things I need to do.  Back when I was an actual developer, the go to place was Experts Exchange.  Until recently, I’d find myself on stackoverflow.com.

However, life got much easier since ChatGPT came along.

This isn’t a blog post about ChatGPT and what it can do, if you want to find out more, this is as a good an article as any.

zdnet.com: What is ChatGPT and why does it matter? Here’s what you need to know

Am going to assume that you have an understanding of ChatGTP and Google Tag Manager from here on in (but if you have any questions that arise from reading this, feel free to get in touch).

So, what can you do in GTM with the help of AI?

I guess the actual answer is “anything”, but so far, this is how I’ve used it:

Write Custom JS Variables

The main area I’ve used ChatGPT is to create custom JavaScript variables to format existing variables into user friendly strings to then use for custom events within GA4 tracking.

Extract PDF name from path

by default, the file_download event tracks the file name as the full path, e.g.
/directory/uploads/folder/filename.pdf

however, I asked ChatGPT to write me a function that extracted just the filename from the Click URL as follows:

and just like that I have code that can be adapted for use within a Custom JS Variable which takes the Click URL as the input:

function()
{
  var this_url = {{Click URL}};
  var url_parts = this_url.split("/");
  return url_parts[url_parts.length - 1];
}

In this case, I call this variable “cJS – PDF”

That can then be added to a custom event:

which makes for a much cleaner looking report:

Format Email or Telephone Number Click Text

Similar to the above, if you want to track which emails or telephone numbers are clicked on your site, but don’t want the report to contain tel: or mailto:, then just ask:

which is amended to:

function()
{
  var email_address = "{{Click URL}}";
  if (email_address.startsWith("mailto:")) {
    return email_address.slice(7);
  } else {
    return email_address;
  } 
}

or for telephone numbers:

which is amended to:

function()
{
  var phone_number = "{{Click URL}}";
  if (phone_number.startsWith("tel:")) {
    return phone_number.slice(4);
  } else {
    return phone_number;
  } 
}

Format all upper case page titles

I often create a social share event that indicates when a page or post has been shared to social media when share buttons have been clicked.  As well as the platform and page path, I send the page title which is pulled in from the H1 tag.  On a recent site, the H1 was capitalised which I didn’t want in the report, so asked for a function to convert so that only the first letter was a capital:

which is amended to:

function ()
{
  var this_h1 = {{h1.title}};
  return this_h1.toLowerCase().replace(/(^|\s)\S/g, function(firstLetter) {
    return firstLetter.toUpperCase();
  });
}

The above examples aren’t the most complex of functions, and with some time, thought and research, I could have wrote these myself.  However, asking ChatGPT to do this saved a considerable amount of time, and I can then use my JS / code knowledge to take the output and convert to the required format for tag manager.

But as you can see, AI generated code is the future.

Resolve JavaScript Coding Errors

Sometimes, you may attempt to write your own code that doesn’t work.

In fact, ChatGPT may generate code that doesn’t work.

But if you prompt it with the error that is generated by the code you are tyring to implement, it will be more than likely able to fix it.

For example, when I first asked it to write me the code above to amend upper and lower case characters in a string, I got the following output:

When I tried to preview the code in GTM I got the following error:

So I informed ChatGPT of this, it apologised, then provided updated code which worked:

Write Regular Expressions

Over the years I’ve become proficient in the following languages:

ASP, HTML, CSS, JS, Coldfusion, SQL and PHP

However, I have NEVER got my head around RegEx.  I can’t do it and shy away as soon as my first attempt doesn’t work.

Not anymore though.

One of the custom events I create as part of my GA4 configurations is to track internal links clicked on a page and whether they are clicked in the header, main content or footer.

I do this my setting the click URL trigger to match the site domain so as not to confuse it for an external link click.

Recently, I was working on a site that had internal linking between the subdomains www, shop, member and tickets.

So I needed a trigger that would match the Click URL to any of those subdomains:

And it works a treat:

Write A Custom HTML Listener

This is something that I’ve never done until recently upon the request of a client.  They create a lot of useful content on there site, which they are happy for users to copy and paste for use elsewhere. They wanted to know how often this was happening, on which pages, and what text.

Under normal circumstances I would’ve spent some time trying to figure out how to do this.

Now, you just need to think about the level of detail required in your prompt:

This is then added as follows:

<script>
  document.addEventListener('copy', function(event) {
    var copiedText = window.getSelection().toString();
    var pageUrl = window.location.href;
    dataLayer.push({
      'event': 'copy_text',
      'copiedText': copiedText,
      'pageUrl': {{Page Path}}
    });
  });
</script>

Then create variables to pull in the text from the data layer, and a custom event trigger that calls the GA4 Event:

Which then fires as follows:

Summary

The examples above are just the start of how you can start to use ChatGPT or any other AI solution in your every day SEO/GTM/GA4 tasks.

The key I always find is the quality of your prompt.  You can chat away to generate ideas and get inspired, but once you know what you want, be specific and you’ll probably end up with some highly useful code or content that does exactly what you need it to do.

Good luck.