Google Analytics 4: From How To Get Started To Pro Tracking

The event name “menu_clicks” can be anything you want, and it will have three parameters you provide. This is one approach if you don’t have Google Tag Manager and prefer gtag implementation.

You can use custom parameters to pass additional values to predefined events, for example, sign_up event. Per GA’s documentation, it supports only one parameter called “method” ( which can be anything, e.g., social login, email, etc. )

gtag("event", "sign_up", {
method: "Google"
});

By adding custom dimensions, you can also pass additional information such as sign-up subscription plan (for example, “free trial,” “basic,” “premium.”)

You can add custom dimension”sign_up_plan” and pass along with “method.”

gtag("event", "sign_up", {
method: "Google",
sign_up_plan: "basic",
});

To implement all these, you need basic JS programmer skills, which you can quickly learn by using ChatGPT. You can now test the prompt:

JavaScript code that triggers a gtag custom event with the name ‘menu_clicks’ when a user clicks on a menu item with a parent li tag that has class ‘.menu-item’. Pass the following custom event parameters: ‘event_category’ should be set to ‘Menu Clicks’, ‘event_action’ should be set to the link of the clicked item, and ‘event_label’ should be set to the anchor text of the clicked item.

Try this prompt, and you will see the magic happening.

You can copy and paste that code into your CMS code editor, and voila!

Now, let’s set up the same event tracking using the GTM tag.

I assume you’ve already installed GA4 via Google Tag Manager and will proceed with the steps from there.

You would need to add custom dimensions per the steps explained in the section above.

How To Set Up Event Tracking In Google Tag Manager

Create a new a new JavaScript variable in GTM that returns clicked anchor’s parent tag class name – because, in GTM, there is no built-in way to get parent DOM element attributes.

Navigate to Variables > User-Defined Variables and click the New button on the top right corner. In the popup dialog, select Custom Javascript.

Copy and paste this code into it.

function() {
 'use strict';
 try {
       var clickElement = {{Click Element}}; // clickable element DOM object
       var clickParent = clickElement.closest('.menu-item'); //clickable element DOM object parent with class .menu-item
       if (!clickParent) return ''; 
       return clickParent.getAttribute('class'); // if element exist return class attribute
 } catch (err) {
       return '';
 }
}

This code returns the parent class attribute of a clicked element when there is a parent with class ‘.menu-item’, or it returns an empty value if there is no such parent element.

We can use this to ensure that we only detect clicks on menu item links, not other links elsewhere on the page.

Create a new trigger in GTM that fires on all clicks on elements with a parent

Navigate to Triggers and click the New button in the top right corner.

From the popup dialog, select Click – Just Links.

Choose Some Link Clicks > Configure it to fire on clicks where the parent element class contains the string “menu-item.”

Navigate to Tags and add the GA4 Event tag.

Screenshot from GA4, April 2023

Fill in as event name “main_menu_clicks” or whatever you want to name the event, and add custom parameters event_category, event_action, and event_label.

Screenshot from GA4, April 2023

For event action and label, choose Click Text and Click URL build-in variables.

Screenshot from GA4, April 2023

Choose the trigger of Menu Clicks we created before, and save the tag.

Publish changes and debug to ensure when you click on your menu items, the event is triggering with all parameters set correctly.

How To Implement Custom Event Tracking By Using dataLayer.push() Method

If you still prefer custom coding and have GTM, you can use the datalayer.push() method.

In that case, you would need to add event_category, event_action, and event_label parameters in GTM as dataLayer variables.

And on your website

How Do I Know If Google Analytics Event Tracking Is Working?

It is also important to check if you see an event log with the same parameters in GA4 debug view. It may happen that GTM will fire, but because of misconfiguration, it will not be passed to GA4.

In case you have gtag implementation, you should enable debug mode by installing the Chrome extension or by adding one line of code to your GA4 configuration.

gtag('config', 'G-12345ABCDE', { 'debug_mode':true });

Always debug and make sure that all custom parameters pass as expected.

Conclusion

GA4 is quite challenging and not a plug-and-play analytics tool like Universal Analytics; you need to spend a good amount of time learning it.

On the other hand, it comes with plenty of new features you can use and enhance your analytics to an unprecedented level.

By being able to customize the event tracking, you get a powerful skill that even can help you work around some of the attribution models that Google Analytics is sunsetting by tracking users’ first visit source in a custom dimension.

With this in mind, I will be publishing a step-by-step guide on how to (partially) restore the first attribution model using custom event parameters.

More resources:

Featured Image: Andrey_Popov/Shutterstock