How to tag web events with GTM and GA4 easily thanks to AI

Measuring events on a website sounds easy.

But then you open each of your WordPress templates and start thinking about clicks, buttons, modules, transactions, forms, menus, CTAs, cards, banners, sidebars…

And you leave it for another day.

Because one thing is thinking “I want to measure what happens on my website” and another very different thing is properly tagging a real website.

A website with different templates.

With modules repeated across several sections.

With cards and tabs that look the same but change in some way.

With buttons that look identical but perform completely different functions.

And here, as in many other areas, AI can help you quite a lot.

Not because it is going to decide your measurement strategy for you—that is still your job, although it can also give you ideas—but because it can do almost all the work: 

• Review templates.
• Detect similar modules and components.
• Suggest a reusable structure.
• Define a naming convention if yours is not clear.
• Prepare a GTM container.
• And even touch your website code to, for example, add “data-” attributes that make measurement easier. 

I have just done all this on my own website, so I’ll walk you through the process using my real case as an example.

I have prepared the click measurement for the editorial modules on my website (featured articles, recommended articles, new posts, etc. on each page), but the system works for any event.

That said, there are two routes here: the manual one and the AI-automated one.

Let’s start with the simple one so you can see how fast it is, and then later, if you want, you can look at all the work you saved by leaving it to AI.

Route 1: step-by-step tutorial to track your website events quickly with AI

We’ll start with the quick, short version.

Step 1: ask AI to help you design the structure

If you have analytics experience, you already know this. But if you don’t, or if you don’t know GA4, AI can be very useful.

To do that, just go to your favorite tool (ChatGPT, Claude or Gemini) and do two things in one prompt:

1. Add full screenshots (from top to bottom) of each section of the website (home, categories, checkout, etc.)
2. Explain what you want.

That is: 

<em>“I want to measure clicks on the main modules of my website. Before touching code, help me define an event naming convention and parameters so it can be reused in GTM and GA4.</em>
I don’t want one event per module. I want a single event with parameters.

The templates I have are:

- home

- category

- subcategory

- tag

- post

Suggest:

1. event name

2. minimum parameters

3. allowed values

4. real dataLayer examples

5. dimensions I should create in GA4”

This forces AI to think about structure before code.

And that is exactly what you want, because it will usually suggest a plan that makes quite a lot of sense. Because if you start tagging a website with no naming convention, you will end up with Frankenstein analytics.

Bounce ideas back and forth with AI until the structure is clear to you and you understand why it should be done that way.

Step 2: give it your GTM container

And let it do almost all the work:

1. Export the project’s GTM container and feed it to AI.
2. Ask it to make the relevant changes based on the strategy defined in the previous point.
3. Once it has it ready, download it.
4. Import it into GTM. AI will tell you whether you need to merge it with the one currently live or replace it.

Here we may or may not be done, depending on how AI creates the tagging plan or how we told it to execute it.

Step 3 (optional): give AI the code from your templates

If the tagging requires adding data attributes (I explain what they are in the manual tagging section) you can pass AI the real templates from your website. And this is where you really save time.

In WordPress, these may be files from your active theme, such as:

• front-page.php
• category.php
• tag.php
• single.php
• functions.php

Or whichever ones your theme uses.

Upload them and give it a specific instruction:

<em>“I’m sending you the current templates from my website.</em>
I want you to add data-* attributes to the links in the main modules to measure the editorial_module_click event.

Do not change the design.

Do not change CSS classes.

Do not change query logic.

Do not change text.

Only add analytics attributes.

Use these parameters:

- data-analytics-event

- data-page-type

- data-module-type

- data-module-area

Return the full corrected files and check for PHP syntax errors.”

Watch out for this: do not let AI “improve” your template.

AI tends to touch more than necessary if you do not limit it. Tell it clearly to only add analytics attributes. Nothing else.

Once the files are downloaded and uploaded to the website, we would then test everything before publishing the changes and creating the necessary custom dimensions in GA4. 

Below I explain everything, but first I want you to see all the manual work we have saved by following this process.

Route 2: step-by-step tutorial to track manually your website events

Now let’s go with the long route, so you understand what AI has actually done.

Step 1: decide which event you want to create

First: do not create twenty events if you can create one reusable, well-thought-out event.

In my case, I wanted to measure clicks on editorial modules on the website, so I created one single event:

editorial_module_click

But the same process works for other events:

• cta_click
• resource_download
• pricing_click
• affiliate_click
• lead_magnet_click
• video_module_click
• product_card_click
• internal_navigation_click

The key is to think about whether the event can be reusable now or in the future. For example, if you want to measure CTAs, do not create this:

• click_boton_home
• click_boton_sidebar
• click_boton_footer
• click_boton_categoria
• click_boton_post

Better create cta_click and differentiate each click with parameters. It is cleaner and more scalable.

Step 2: define the minimum parameters

You never need to measure everything, only what matters. What you are actually going to use and what will let you make decisions.

In my case, for clicks on editorial modules, I used these parameters:

• page_type
• module_type
• module_area
• link_url
• link_text

Translated:

Parameter	What it indicates
page_type	Type of page where the click happens (home, category, subcategory, tag or article). Each one has a different structure.
module_type	Type of module clicked: new posts, recommended section, latest articles section… Each template has a good handful of sections.
module_area	Content, sidebar, footer…
link_url	Link URL. I added it because I had already created the variable; otherwise I would not have done it, because I know I will barely look at it.
link_text	And this one even less

Example:

• page_type  = category
• module_type  = latest
• module_area  = main
• link_url = https://yagogonzalez.com/ocio/
• link_text = How to download long YouTube playlists...

With this I can now compare:

• Which pages and page types generate more clicks.
• Which areas of the page generate more clicks.
• Which modules generate more clicks.

More than enough to start.

Step 3: create a closed naming convention

This is important: do not let each event have a name invented on the fly. Define closed values.

For example, for page_type they could be:

• home
• category
• subcategory
• tag
• post
• page
• landing
• product
• checkout

Use only the ones you need. In my case:

• home
• category
• subcategory
• tag
• post

For module_area:

• main
• sidebar
• bottom
• footer
• post_footer

And for module_type, define a list based on your website.

In my case, this list was quite long, because I have quite a few different modules. Some were:

• home_hero
• home_hero_side
• featured
• latest
• sidebar_popular
• sidebar_more
• bottom_cta_newsletter
• home_section_tecnologia
• home_section_ocio
• home_section_negocio

If your website is a services site, you might have:

• hero_cta
• services_grid
• case_studies
• testimonials
• pricing_table
• contact_cta
• lead_magnet

Or, if it is an ecommerce:

• product_card
• category_grid
• promo_banner
• recommended_products
• cart_cta
• checkout_step
• wishlist_button

The logic is the same; only the context changes, but the method is the same.

Step 4 (optional): use data attributes in the HTML

In my case, this was an important part of the system.

I could have tried to make GTM identify the clicked module through some odd CSS class or the button text, but in medium-sized projects that is fragile: it works today, but in 3 months you change the design and it stops working, because you no longer remember how you built the event.

The solution I chose was to add data attributes directly to the links or buttons you want to measure.

Example:

<a
href="https://tudominio.com/articulo/"

  data-analytics-event="editorial_module_click"

  data-page-type="home"

  data-module-type="home_hero"

  data-module-area="main"

>

  Título del artículo

</a>

With this, the link itself already carries the information you want to send. GTM does not have to guess anything, just read the attributes.

This works for almost any event:

<em><a</em>
href="/contacto/"

  data-analytics-event="cta_click"

  data-page-type="landing"

  data-module-type="hero_cta"

  data-module-area="main"

>

  Request a quote

</a>

Or for an ecommerce:

<em><a</em>
href="/producto/zapatilla-x/"

  data-analytics-event="product_card_click"

  data-page-type="category"

  data-module-type="product_grid"

  data-module-area="main"

>

  Sneaker X

</a>

Yes, you add more code, but it is a simple, understandable and scalable solution.

Step 5: create a listener in GTM

Now you need Google Tag Manager to listen for clicks on links with your attribute.

Create a custom HTML tag.

For example:

<em><script></em>
(function() {

  document.addEventListener('click', function(event) {

    var link = event.target.closest('a[data-analytics-event]');

    if (!link) {

      return;

    }

    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({

      event: link.getAttribute('data-analytics-event') || '',

      page_type: link.getAttribute('data-page-type') || '',

      module_type: link.getAttribute('data-module-type') || '',

      module_area: link.getAttribute('data-module-area') || '',

      link_url: link.href || '',

      link_text: (link.innerText || link.textContent || '').trim()

    });

  });

})();

</script>

This listener does something very simple:

1. It detects clicks.
2. It checks whether the link has data-analytics-event.
3. It reads the attributes.
4. It performs a dataLayer.push().
5. GTM uses that event to send data to GA4.

There is no great mystery here, just write it properly. And you can also use AI for this.

Step 6: create the variables in GTM

In GTM, create data layer variables to read the parameters.

For example:

GTM variable	Data layer variable
DL – page_type	page_type
DL – module_type	module_type
DL – module_area	module_area
DL – link_url	link_url
DL – link_text	link_text

They are all of the type Data layer variable.

Do not improvise names. If the listener sends module_type, in GTM the variable must read module_type. Not module-type. Not moduleType. Not tipo_modulo.

Better the same. Exactly the same.

Step 7: create the trigger

Create a custom event trigger.

If your event is called:

editorial_module_click

The trigger must listen for:

editorial_module_click

If your event is called:

cta_click

The trigger must listen for:

cta_click

It seems obvious, but many GTM errors are simply names that do not match.

In my case, the trigger was:

• CE – Editorial Module Click
• Type: Custom event
• Event name: editorial_module_click

Step 8: create the GA4 tag

Create a GA4 event tag.

Event name:

editorial_module_click

Or whatever event you have decided on.

Add the parameters:

GA4 parameter	GTM value
page_type	{{DL – page_type}}
module_type	{{DL – module_type}}
module_area	{{DL – module_area}}
link_url	{{DL – link_url}}
link_text	{{DL – link_text}}

And use the custom event you just created as the trigger.

With this, every time someone clicks on a tagged link, GTM will send the event to GA4.

Testing and next steps

It does not matter which route you followed; this is where they converge. Once everything is implemented, what you need to do is make sure that everything works as it should.

Also, you still need to tweak one more little thing in GA4.

Step 1: test before publishing

Do not publish blindly:

1. Open GTM preview.
2. Click on several modules on the website.
3. Check that the event appears editorial_module_click (or the event you created).
4. Then go into the GA4 tag and check that the parameters have values (page_type, module_type…).

If you see empty values, check:

• That the HTML has the data attributes.
• That the listener is loading.
• That the event attribute has the correct name.
• That the GTM variables read the same name sent by the dataLayer.
• That the trigger listens for the correct event.

Do not continue until this works. Here GTM preview is your friend. Use it.

Step 2: check DebugView

When you publish, check GA4’s DebugView .

You should see your event coming in, but watch out: DebugView sometimes takes time, does not refresh properly or shows you another session.

That is why, if in the extension Tag Assistant you see the hit sent correctly, the event is going out.

DebugView is useful, but do not go crazy if it takes a while or does not show up.

In my case, in Tag Assistant I could see the event sent as a hit to GA4, even though DebugView did not show it on the timeline.

It can happen.

Step 3: create custom dimensions in GA4

To finish, in GA4, go to:

Admin > Data display > Custom definitions

And create only the dimensions you will actually use. That is, the event parameters you are going to analyze.

In my case:

Name	Scope	Parameter
page_type	Event	page_type
module_type	Event	module_type
module_area	Event	module_area

I had already registered link_url and link_text as custom dimensions from previous tagging work.

Step 4: (optional) document the naming convention

If the project is big, it is essential to create an event tagging table like this one:

Event	Parameter	Possible values	What it is for
editorial_module_click	page_type	home, category, subcategory, tag	Template type
editorial_module_click	module_type	featured, latest, sidebar_popular	Module type
editorial_module_click	module_area	main, sidebar, bottom	Visual area

That way, when in two months you need to add another module, you do not reinvent anything; you simply follow the system without having to think or rethink it again.

And that is it, we are done.

If you followed the manual route, congratulations. It will have taken you a bit.

If you followed the AI route, you are probably wondering whether you are really done. And yes, the answer is yes. A bit surprising, right?

Typical mistakes

Come on, let’s collect all the ones mentioned here and that we have all suffered at some point.

Creating too many events

Bad:

• home_button_click
• sidebar_button_click
• footer_button_click
• category_button_click

Better cta_click   with parameters.

Depending on CSS classes

Bad:

If the user clicks on .boton-verde-grande…

Tomorrow you change the design and goodbye measurement.

Better to add data attributes: data-analytics-event="cta_click"

Not testing in GTM

Publishing without testing is playing roulette. Always use Preview.

Registering too many dimensions in GA4

Do not turn every parameter into a custom dimension.

Start only with the ones you are going to use for analysis. Everything else can wait and, if you see that you really need it, add it later.

Changing names halfway through the process

If you use module_type always use it the same way.

Do not change to:

• module-type
• moduleType
• tipo_modulo

Not halfway through the process, not in the future. It seems silly, but it will complicate your analytics when you compare time periods with both events.

Quick summary and conclusions

Let’s review the general manual process, which is this:

1. Define what you want to know.
2. Create a reusable event.
3. Define few parameters.
4. Add data-* attributes to important links.
5. Use AI to review and modify templates.
6. Create a listener in GTM.
7. Create data layer variables.
8. Create a custom event trigger.
9. Create a GA4 tag.
10. Test in Tag Assistant.
11. Publish.
12. Register only the necessary dimensions in GA4.

And, as you have seen, it can be very easily reduced if you ask your friend ChatGPT for help.

This, which would take hours to do manually, took me just over 30 minutes to get operational.  

It feels like magic when you try it. Really.

And I’ll leave you with a couple of recommendations to close:

Measuring events is not about having lots of data or all the data, but about getting information to decide. And for that you only need some of it.

AI does not replace your measurement judgment—the one that tells you what data to measure—but it does save you a huge amount of mechanical work and, above all, it helps you maintain consistency. 

And this, in large projects, is pure gold. Do not waste it.