On July 1, 2023, Google Analytics was updated to version 4, preventing its previous version from being able to be used, and it was a real headache for many people. I had to relearn how to enter metrics and document many functionalities again.

The truth is that I am not a great expert in metrics, but I am going to leave here how to create two types of them in case you find yourself in the same situation as me.

Initial setup

The first thing is to integrate Google Analytics and Google Tag Manager into our project. Depending on what technologies it is made with, we will have to do one thing or another. In this article, I am not going to cover this part since there are many others that explain in detail what the process is like.

Once we have these two points covered, we can continue.

Simple metrics

I call simple metrics those that don't have much configuration or complexity and, in fact, have barely changed between Universal Analytics (UA) and Google Analytics 4 (GA4). For example, when you want to measure that a button has been clicked.

To do this, we must first go to Google Analytics > Manage > Data Flow > the project you want to select

On that screen, we copy the "MEASUREMENT ID".

Next, we go to Google Tag Manager and create a new trigger. To do this, click on "activator" in the menu on the left and follow the following steps:

At the top, we put a name.
In "activator type" we introduce the type "Click" and within this "all elements".
In "this activator is activated" we indicate "some clicks".

In the 3 selectors below, in the first one we click on "choose integrated variable".

A screen will open and there you have to choose "Click ID".
In the second selector "equals".
In the third, the id that we have selected for the button to be clicked.

We create a variable to link the analytics code, of constant type, and paste the "MEASUREMENT ID" into the value.

Add a label with a descriptive name, such as "GA4 event" and "measurement ID" and we introduce {{Analytics Code}}, or whatever we called the constant above.
In the name of the event we put the one we chose in the activator and activation we link the activator we made previously.

Next, we must establish a new tag to add the Analytics code.
In the tag ID we indicate {{Analytics Code}}, in the configuration parameter send_page_view and true, and in activation All Pages. After this step, the warning that we saw in the previous screenshot will no longer appear in the Button Clicked label.

Finally, we will indicate the same ID that we have established in Google Tag Manager to our button.

<button id="buttonClicked">Button to measure</button>

With this whole process, when you click on the button on our page, if we go to Google Analytics to Reports > Interaction > Events, we can see a table like this, and our event will appear in it.

Complex metrics

When we aspire to measure more than just that an event like a click has happened, that is when I talk about complex metrics. For example, you want a metric to only be recorded if more than one product has been purchased, you want to measure how many products have been purchased, and you want to know if the user was registered or a guest.

First we must create an activator, in this case we are going to call it "multiplePurchase". Of type "custom event" and will be activated on "all custom events"

Next, we add a GA4 event type tag, in the measurement ID we enter {{Analytics Code}} and in the name of the event "multiplePurchase".
In event parameters, we added two parameters: one to know the number of objects purchased, "numberOfPurchases", and another to know if the user was registered, "registeredUser". The values of these parameters will be the variables {{dlv - numberOfPurchases}}, {{dlv - registeredUser}} respectively, using "dlv" to indicate that they are a data layer variable, "data layer variable".

To finish the label, we incorporate the activator that we created previously.
Once the label and activator have been created, we must add these variables ("numberOfPurchases" and "registeredUser") in GTM, one for each of those that we have introduced in the label.

Once the procedures are completed in Google Tag Manager, we must indicate in our code when we want this metric to be activated.

I am going to show how to do it in a code in React, since depending on the technologies you are using you will have to do it one way or another. To integrate it into React I recommend this article.

The code could be something like this

import TagManager from 'react-gtm-module'

if (purchases.length > 1) {
   TagManager.dataLayer({
     dataLayer: {
       event: 'multiplePurchase',
       registeredUser: <-- insert true or false here,
       numberOfPurchases: <-- insert the length of purchases here
     }
   })
}

Finally, for Google Analytics to have access to these values ("registeredUser" and "numberOfPurchases"), you must add them and wait 24 hours for them to start giving us data about them. To do it:

Let's go to Manage > Custom Definitions
There we add two custom dimensions, one for "registeredUser" and another for "numberOfPurchases". None of them may appear in the "event parameters" selector yet, but we can write it.

Once Google Tag Manager has been configured, the code has been added to our project, and these parameters have been added to Google Analytics, we can now see the event as we show in "simple metrics" and if we click on it, we can see what data the parameters we have registered show.

Important

Whenever we make any changes in Google Tag Manager we must save it. To do this, you have to go to the top right of the page, there we will find the number of changes we have made and if we click on "send" we can save what we have done. Likewise, if, for example, there is a label with linked variables and you have not created those variables, the system will warn you and will not let you save until everything is correct.

Create metrics in Google Analytics 4

Initial setup

Simple metrics

Complex metrics

Important