Search
Close this search box.

10 Ways to Use ChatGPT with Google Tag Manager

Last Modified on May 7, 2024

Have you heard of the new AI tool called ChatGPT?

The future is now, as we are seeing more and more developments in the field of artificial intelligence. OpenAI, the creator of AI systems such as DALL·E and Whisper, launched another AI model called ChatGPT last November 30, 2022.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

ChatGPT is a chatbot made available to the public for free during a research preview, with plans to monetize later. This AI tool can be of great help when it comes to answering questions, generating ideas, writing code, etc.

However, did you know that you can also use ChatGPT to make your tracking more efficient? Turns out, this AI tool is extremely smart and reliable to use with Google Tag Manager. In this tutorial, we’ll be providing a step-by-step guide to integrating ChatGPT with GTM.

Here are 10 ways you can use ChatGPT with Google Tag Manager:

  1. Ask Questions to ChatGPT
  2. Write Custom HTML Listener
  3. Fix a Bug in Custom HTML
  4. Create a CSS Selector
  5. Create a RegEx
  6. Create a Lookup Table Variable
  7. Create a Data Layer
  8. Change a Data Layer
  9. Write a Custom JavaScript Variable
  10. Decode Tracking Request

Let’s dive in!

1. Ask Questions to ChatGPT

Since ChatGPT is a chatbot that’s great at answering questions, let’s start with asking it any tracking question we want.

For example, let’s ask for the steps on how to integrate Google Tag Manager on a website, specifically in a Shopify store.

Asking ChatGPT about the steps to integrate GTM into a Shopify store

Here is the result we received, and it gives us a step-by-step guide on how we can implement Google Tag Manager on our Shopify store.

ChatGPT’s response on integrating GTM to a Shopify store

The steps it gives are surprisingly accurate, even going into the theme.liquid file and delving into the step of pasting the GTM code that we see.

Another great feature is that, unlike most chatbots, we can ask follow-up questions to ChatGPT because it understands the context of the previous question.

🚨 Note: Providing more details to your questions for ChatGPT will result in the tool giving better and more specific answers.

Great! We can ask questions to ChatGPT and it will give you an answer right here. While it gave us an accurate answer this time, the response it gives is not always correct. In most cases, however, we can expect it to have a really good idea of what we’re asking. 

Now, let’s get into the use cases for maximizing the benefits of ChatGPT and GTM integration, starting with asking ChatGPT to write a custom HTML code for us.

2. Write Custom HTML Listener

Let’s go ahead and ask the question: how would I track a copy event with Google Tag Manager?

Asking how to track a copy event with GTM to ChatGPT

It gave us a lengthy answer, but it doesn’t write us any code just yet.

Steps for tracking a copy event with GTM according to ChatGPT

The last time we tried this out with the same prompt, ChatGPT gave us a piece of code right away. You can get different answers even if you ask the same question a second time.

🚨 Note: ChatGPT is sensitive to input phrasing and attempting the same prompt multiple times. Given one phrasing of a question, the model may claim to not know the answer, but given a slight rephrase, it can answer correctly.

The steps laid out by ChatGPT go into much detail, going through creating a new trigger, selecting a custom event trigger type, and suggesting a ‘copy’ event name. However, it doesn’t specify how the trigger will register the copy event.

We would need a custom JavaScript listener for this and ChatGPT has completely skipped over this step. Luckily, we can easily ask a follow-up question.

Let’s ask something along the lines of what would be the right custom HTML I need to deploy inside of GTM to make this work.

A follow-up question for getting a custom HTML listener for the copy event

There we have it! ChatGPT gave us back an answer, this time with the custom HTML code we need and would have expected in the first answer.

Custom HTML code for tracking copy events

Not only did it give us the custom HTML code, but it also provided us with a thorough explanation of what the code will do, how it works, and how to implement the code in GTM.

Explanation of how the custom HTML code works

So, the code will listen for a copy event and when it is triggered, the selected text will be pushed to the data layer using the dataLayer.push method.

💡 Top Tip: Learn more about the dataLayer.push method in our guide on the Top 5 Techniques in JavaScript for Google Tag Manager.

Let’s try out this code by first clicking on Copy code.

Copying the custom HTML code for the copy event

Go to Google Tag Manager and create a new Custom HTML tag. Paste the code in the HTML section, then provide a name for the tag.

Creating the custom HTML tag for a copy event

Next, select the All Pages trigger.

Selecting all pages trigger

After saving and previewing this tag, select and Copy any piece of text from the website connected to the Tag Assistant.

Copying text from the website

If we go to the Tag Assistant, we should see our copy event successfully triggered. Opening it should show the dataLayer.push with the selected text under the eventLabel key.

The copy event in the Tag Assistant with the dataLayer.push

Now that we have a custom HTML listener for a copy event, we can now build a custom event trigger that was described when we first asked ChatGPT. Then, you would also need to create a tag to send that data over and different variables to store that data inside of GTM.

Such an interesting way to use ChatGPT with Google Tag Manager, right? Thankfully, everything was done correctly, but what should you do if there are errors in the code?

3. Fix a Bug in Custom HTML

When you copy an HTML code from the internet, you will sometimes encounter bugs when you try to test them out. We now know that we can use ChaptGPT with Google Tag Manager to write custom code, but is it capable of fixing them? Yes, definitely!

For example, let’s look at this sample code here:

A sample custom HTML code

This piece of code is similar to the code we tested earlier, where it listens to a copy event. 

Let’s copy this code and paste it into our custom HTML tag.

Pasting the sample code to the custom HTML tag

After saving and previewing this tag, we are faced with these errors.

Errors in the sample custom HTML code

ChatGPT is great at helping you out with errors, as well. First, let’s copy the first error description so that we can use it as input into ChatGPT.

Copying the error description

Let’s first provide a request asking ChatGPT to fix the error we encountered in GTM. Paste the error description below that along with the piece of code we used.

Asking ChatGPT to fix the sample custom HTML code

Let’s see if ChatGPT is smart enough to correct this code. Here we have the answer.

ChatGPT’s response for fixing the custom HTML code

It not only gave a new code that we can try out, but it also explained why this error occurred.

At a glance, we can see that this is treading closer to the right code, as it invoked the function() expression and removed the const keyword, which is not standard of the JavaScript syntax GTM uses. Let’s test it out to be sure.

Go ahead and copy this new code.

Copying the updated custom HTML code

Replace this code in our custom HTML tag.

Replacing the custom HTML code

After saving and previewing the tag, there should be no more errors this time. If there are still errors, we can still go back and present the errors to ChatGPT to fix them a second time.

So, we can use ChatGPT with Google Tag Manager to help solve JavaScript errors by providing the input of what the error is and the JavaScript code used.

4. Create a CSS Selector

Next up, let’s go into the triggers. You may be familiar with the trigger called element visibility trigger. Here we have the CSS selector method for the element you want to track.

CSS selector method for the element visibility trigger

The CSS Selector is a very powerful tool that you can use, but it has a high barrier of entry for those unfamiliar with CSS. ChatGPT can help you out even if you have zero knowledge of CSS.

Let’s say we wanted to track a certain element on our website. Right-click on that specific element. In this case, we want to track the basket icon. Then, click on Inspect to access your browser’s developer tools.

Inspecting the basket icon element

Our selected element will be highlighted. Right-click on the element and click CopyCopy element.

Copying the selected element from the browser’s developer tools

💡 Top Tip: To learn more on how to pull data from your website, check out our guide on Scraping Data with Chrome Developer Tools and GTM.

Let’s provide this as input to ChatGPT. Before that, let’s say: write me a CSS selector for this element.

Asking ChatGPT to write a CSS selector for the selected element

What’s great about ChatGPT is that it doesn’t give one answer, but three codes that we can use, which are all written in CSS form already.

The first CSS selector we have will select any ‘a’ element with the ‘cart-contents’ class.

CSS selector for ‘a’ elements with ‘cart-contents’ class

The other two variations of the CSS selector get more specific to our selected element. The next CSS selector selects the ‘span’ elements inside the ‘a’ elements with the ‘cart-contents’ class.

CSS selector for ‘span’ elements inside the ‘a’ elements with ‘cart-contents’ class

CSS selector for ‘span’ elements inside the ‘a’ elements with ‘cart-contents’ class

Finally, the last CSS selector is essentially the same as the previous one, but it is more specific, only selecting the ‘span’ elements that are the direct children of the ‘a’ elements with the ‘cart-contents’ class.

CSS selector for ‘span’ elements that are direct children of the ‘a’ elements with ‘cart-contents’ class

This is a great starting point for exploring CSS even further. You can even copy the whole HTML code of a webpage and say, “I want to have this specific element selected. How do I do this?”

Making the scope broader and being more specific with the selected element can give you substantial insight into how CSS selectors work. ChatGPT is a great tool to get to the right CSS selector that you can then try out in Google Tag Manager.

Another way to use ChatGPT with Google Tag Manager for CSS selectors is to use the matches CSS selector option.

This option can be seen under the advanced options for the element visibility trigger.

Matches CSS selector option in the element visibility trigger

You would need further knowledge of CSS, and ChatGPT can still help you out with this.

5. Create a RegEx

Another popular option inside the matching options for the element visibility trigger is the matches RegEx (regular expressions) option.

Matches RegEx option in the element visibility trigger

Let’s say you have many different URLs and they are the import for your filter. Now, you want to filter out a specific one from that list which is this one:

The URL that we want to filter from the list

To select this one, we need to describe it a bit. This is the only URL that would have a file in only one parent folder – not two folders as with the case for the two URLs below.

So, how would we select this one using RegEx? Well, we can just ask ChatGPT.

Let’s give these URLs to ChatGPT and then write our prompt above that – In these URLs, write me a regular expression that matches the only file with only one parent folder.

Asking ChatGPT to create a regular expression to select the URL that matches the file with only one parent folder

🚨 Note: You’ll notice that there was a typo in our prompt, but ChatGPT is very forgiving of typos and will still understand our question.

Let’s see what it comes up with.

The regular expression to match URLs with a single file and one parent folder

Here, it not only gives us the regular expression we could use, but it also gives us a very thorough explanation of what these characters mean. Aside from this, it also explains why the other URLs don’t match our criteria.

Before we pass it to Google Tag Manager, let’s try it out first in RegEx101, which is another great tool for building, testing, and debugging regular expressions.

Let’s paste this in, and it says that we have a pattern error. At the right panel, the tool gives us an explanation of this error where it says that there are unescaped delimiters.