Visualizing Button Clicks with Google Tag Manager and GA4

3-Line Summary of This Article

• This implementation is for solving questions like "How much is this button/feature being used?" in services you operate.
• This guide is for people using GA4 (UA is not covered).
• It assumes that you have already completed the environment setup for both GA4 and GTM.

Intended Audience

• People who want to improve the UX of the sites or services they operate.
• People who want to visualize the usage of the features in their services.

Tools Used

• Google Analytics 4
• Google Tag Manager

Prerequisites

It is assumed that the installation of GA4 and GTM is already completed.
If the installation is not yet finished, there are many articles available via search, so please check those.

Overview of Implementation Steps

The rough steps for implementation are as follows:

• Linking GA4 and GTM
• Setting up triggers in GTM
• Setting up tags in GTM

Linking GA4 and GTM

To set up tags and triggers in GTM and confirm specific action information in GA4, you need to perform the linking with GA4 within GTM.

First, create a new tag in GTM.

Reference Screen

Tag Name

• Set any name

Tag Configuration

• Google Analytics: GA4 Configuration

Measurement ID

• Set the GA4 ID.
  The GA4 ID starts with G-. IDs starting with UA are for Universal Analytics and are not covered this time.

Trigger

• All Pages

Save the settings after the above configuration.
With this, the linking between GA4 and GTM, which is used when creating new events, is complete.

Setting the Trigger for the Event to be Measured

In this step, we will configure the trigger for when the event fires and is sent to GA4.
This time, we will set it up so that when a specific button is clicked, an event with an arbitrary name is sent to GA4.
We will assume that the event fires when an element with the ID hoge is clicked.

Reference Screen

Trigger Name

• Set any name (In the yellow box, we used "Sample Trigger")

Trigger Type

• Click - All Elements

This Trigger Fires On

• Some Clicks

Event Conditions

Event	Condition	Element
Click Element	contains	# hoge *

Configure the settings as shown above and save.
Note: There is also an option for "Click ID" in the event selection, but since it didn't fire in my environment, I used the Click Element configuration as described above.
I'm not sure why...

Setting the Tag for the Button to be Measured

Next, we will configure the tag.

Reference Screen

• Tag Type

  • Google Analytics: GA4 Event

• Configuration Tag

  • Select the tag configured in the "Linking GA4 and GTM" step.

• Event Name

  • Set an arbitrary event name that will appear in GA4.
    This name will be displayed as the GA4 event. (e.g., sample_event)

• Trigger

  • Select the trigger configured earlier.

That completes the configuration. By doing this, whenever the #hoge element is clicked, an event named sample_event will be sent to GA4.

Verifying that the Event is Correctly Sent to GA

For how to verify that the event is correctly being sent to GA, the Preview function is very convenient.
Since I didn't have a suitable demo environment, this article here should be helpful for a detailed explanation.
If anyone wants to know more, I can add more details, so please let me know in the comments!

Closing

Linking GTM and GA4 is a very useful feature for understanding how much each feature of the service you operate is being used.
It's a helpful metric for UX improvement, so please give it a try!