How to Use Custom Events With Google Analytics 4 [GA4] - 2022

﻿
You can use Google Analytics on your website in both its free and premium versions. If you run a small- to medium-sized business, you can continue using the free version because it includes the majority of the essential metrics you need. In some cases, the default configuration of Google Analytics 4 is enough, but here we need to track exact actions a user did on your website so we will need to add some custom events. e.g button click, page visit, login, sign up, comment, menu click, and more...
﻿
﻿
All you need is a Google Account, so if you already have one you are ready to follow this step, if you don't have a Google Account, create one, it's free.
﻿
﻿
Here is the step we will cover in this tutorial :
﻿
﻿
Create Analytics Account. 
Set up your property
Add measurement ID to your website
Create Custom Event in Google Analytics 4
Add Events trackers to your website 
Conclusion
﻿
For measuring website traffic and user actions on your website, Google Analytics is one of the best events tracking tools available. I'll outline in this article how to use custom events in Google Analytics 4 step-by-step.
﻿
﻿
Get Started with Google Analytics ﻿
﻿
=> Go to  Google Analytics     then click Sign in to Analytics 
=> On the second screen click Start measuring
=> Set up your Account
Fill account name
Select Sharing Settings 
Follow the step on the screen
The click Create 
﻿
See image below
﻿
 
 

Now you are ready for the next step.
﻿
Set up your property﻿
﻿
So, click Create Stream after filling out the website URL and stream name in the popup that appears after selecting Web as the platform in the Admin panel.
﻿
Once your property has been created, a new popup will show up in which you can see the MEASUREMENT ID that we will require in the following step.
﻿
=> Choose a platform : web
=> Set up website URL & name
=> Get Measurement id
﻿
 
﻿

Ok, in the next step we are going to add the tag measurement to your website, it's simple, just follow this :
﻿
=> Go to the home icon
=> You will see a button and click it: Get tagging instructions
=> The web stream details will open automatically
=> Click View tag instructions
﻿
Here, you will find both manual installations and instructions for using website builders.
Simply click it and refer to the instructions if you use a website builder.
﻿
﻿
Here, manual installations will be used:
﻿
=> Click Install manually and copy the code below : 
﻿


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'YOUR_MEASUREMENT_ID');
</script>

Add the script above to your HTML in the head 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    // add the script here
</head>

Publish your site and that's it your analytics is now live. 
 
Let's create a Custom Event now!
 
Create a Custom Event with Google Analytics 4 
 
In the left panel hover your mouse and click Configure
 
You will see your events here: 
﻿
﻿

Now follow these steps to create custom events
 
=> Click Create event
=> Popup will open then click create
=> Fill Custom event name
=> In the Matching conditions configure your parameters
=> Add conditions
=> Click create
﻿

Now you can create a Custom Event with Google Analytics.
 
The last step is to add your tracker to your website.
 Add Custom Events Trackers To Your Website 
Go back to your HTML /script site.
Here the place where you want to put your tracker depends on your desired track
 
=> Button click
=> Page load
=> Menu click
=> your_desired_here
 
To make it simple here is the function you will use 
 
Note: the gtag function is available on your website so all you need is to call it.﻿
﻿
﻿
﻿

// note you can add value etc.

gtag("event", "your_event_name", {
        event_category: "your_event_category",
        event_action: "your_event_action",
        event_label: "your_event_label",
 });

Examples :

// in click

const handleClick = async () => {
  // your logic here
  gtag("event", "your_event_name", {
    event_category: "your_event_category",
    event_action: "your_event_action",
    event_label: "your_event_label",
  });
};

// on event listener / page load

window.addEventListener("load", (e) => {
  // your logic here

  gtag("event", "your_event_name", {
    event_category: "your_event_category",
    event_action: "your_event_action",
    event_label: "your_event_label",
  });
});

Your customized tracker is now operational. You may check Google Analytics to get the metrics for your events.

You can also view Real time stats in your analytics.
 
Pouf! The way is long but I wish you appreciate it. 
 
 
Conclusion 
Google Analytics is a great tool to measure your audience's activities and traffic. It's free and available to everyone.
In this article we cover almost everything you need to get started with Google Analytics 4 :
Getting started with Google Analytics
Setting up Property
Add measurement id to website
Create Custom Events
Add Events Tracker to the website
 
If you like this article, comment below and I will write a great one for free just for you!
 
Happy day!

By Aina Flaccon, Developer && Technical Writer

05 September 2022 at 21 h 14

I am Aina Flaccon, a Technical Writer possionate with new technology and new tools. Yes I write, read and share !!!

How to Use Custom Events With Google Analytics 4 [GA4] - 2022

Get Started with Google Analytics

Set up your property

﻿

Create a Custom Event with Google Analytics 4

Add Custom Events Trackers To Your Website

Conclusion