SOP 168: Set Up and Track Custom Events in Google Analytics 4
Successfully create a custom event when a user visits and clicks a key page on your website.
Last Updated / Reviewed: 11/20/2024
Execution Time: 20 Mins
🚀 Goal: Create a new tracking event when a user visits and clicks a key page on your website.
🤞 Ideal Outcome: Successfully create a custom event when a user visits and clicks a key page on your website (e.g. checkout page).
🤔 Why this is important: Tracking how users interact with your site gives you insights about their behaviors that allows you to create reports and funnel analysis to improve your marketing performance.
🧐 Where this is done In Google Tag Manager and Google Analytics 4.
🗓️ When this is done: After you’ve set up both Google Tag Manager and Google Analytics 4 on your site and have generated traffic for a period of time.
👨 Who does this: The marketing manager, business owner or the person responsible for managing website analytics.
__⚠️Prerequisites or requirements: __
Some types of goals are more easily implemented by having a Google Tag Manager running on your website. If you don’t have Google Tag Manager running on your site yet, you can follow the steps described in SOP 004 (web version).
You will also need to have Google Analytics 4 on your website and if you don’t have it yet, you can follow the steps described in SOP 009 (web version) or SOP 067 (web version), if you’re using Shopify.
__In this SOP, there are two approaches. __
-
Setting up Google Analytics 4 events using Google Tag Manager
-
Setting up events directly in Google Analytics 4
Use Google Tag Manager if:
• You need advanced tracking or custom events.
• You have multiple team members managing tags or events.
• Scalability and debugging are priorities.
Use Google Analytics 4 with direct setup if:
• You’re tracking only basic events.
• Your team is unfamiliar with GTM or lacks access to it.
• Your event setup relies on pre-existing GA4 data streams.
Click here to get the most up-to-date version of this SOP
Setting up Google Analytics 4 events using Google Tag Manager
01▸ Go to tagmanager.google.com and select the account you want to work on.
02▸ In the sidebar, click "Tags" and "New".
Note: When creating new tags, it’s recommended to define a naming convention from the beginning. This keeps your Google Tag Manager set up neatly organized and easy to maintain for many years to come.
[Abbreviated Name Of Tool]_[Use for this tag] is a good start.
e.g: “GA_Event_LeadSignup_Trial”, “GA_Event_AddtoCart”, “GA_Event_5MinutesOnSite”, “GA_Event_5PagesSession”.
03▸ Under “Tag Configuration”, click “Choose a tag type to begin setup...”. From the dropdown list on your right, select “Google Analytics”.
04▸ On the Google Analytics dropdown, input your measurement ID here:
Remember: You can copy your Google Analytics Measurement ID by heading over to your Google Analytics admin settings > under Data collection and modification, click Data streams > Select the Web tab > Click the web data stream > Find the measurement ID in the first row of the stream details.
05▸ Next, under Event Name, click on the + button and click "Event".
06▸ Now, depending on your goal, you can track page views or clicks.
- Page View: If you have a “Thank You” page where the user is redirected after the conversion, or if your goal is triggered when the user visits a specific page on your website (e.g. Pricing Page), you can select the Page View event.
- Click: If you want to set up the goal when a click on a specific element occurs, you can select the Click event.
Setting up Page View custom event
01▸ Continuing from the above steps on your Google Tag Manager, scroll down to "Triggering" and click on the interlocking circle icon above "Choose a trigger to make this tag fire…". Click the + icon to add a new trigger:
02▸ Select "All Pages".
03▸ To add parameters that match the URL where we want our goal to fire, you will need to create RegEx (Regular Expression). Go back to "Tag configuration" > under "Event Name" > click "Event Parameters" > set the event parameter to "Page URL".
Note: If you are comfortable with GTM and your website structure, you might not need to use a RegEx condition at this point or you might want to tweak the RegEx to fit your needs. If not, you can follow this procedure.
Note 2: In the following steps, you’ll be creating a RegEx that will match your URL whether:
- It starts with http, or https;
- You are using a trailing slash, or not;
- You are adding parameters to your URL, or not;
- You have deeper URLs in your folder structure, or not;
- Type the URL where you want your conversion to fire.
e.g.: http://www.retroaddicts.com/thank-you-new-subscriber/
- Remove the http:// (or https://), the www, and the last trailing slash from the URL:
e.g.: retroaddicts.com/thank-you-new-subscriber
- Add a \ right before every dot and every slash.
e.g.: retroaddicts\.com\/thank-you-new-subscriber
- Add this code after your URL: (?!\/.\/)((\/?)$|..=.)
e.g.: retroaddicts\.com\/thank-you-new-subscriber(?!\/.\/)((\/?)$|..=.)
- Add this code in the beginning of your URL: (http|https):\/\/(www\.)?
e.g.:(http|https):\/\/(www\.)?retroaddicts\.com\/thank-you-new-subscriber(?!\/.\/)((\/?)$|..=.)
04▸ Click the blue "Save" button at the top right side of your screen in the Tag configuration panel and that's it!
Setting up Click custom event
01▸ Back in your Google Tag Manager workspace, click "Variables" and "Configure".
A list of variables will be available to you. Select all the variables under "Clicks" and when that is done, close the list.
Note: If you already know which variables you are going to need, you can simply select the specific variable you are going to be using for this event.
02▸ Click "Triggers" and "New".
03▸ Rename your trigger > Click the icon above "Choose a trigger to begin set-up..." > Select "Click: All Elements" > Select "All Clicks" > "Save".
Note: When naming your trigger, it is recommended that you define your naming convention. It should be clear and fast to guess what each trigger is doing based solely on its name. For this SOP, we will be using: "GA_Engagement_AddtoCart" since this trigger is going to be used to track an AddtoCart click.
04▸ Now, you will need to find out which of the variables to use for what you want to track. To do that, open a new tab in the Google Tag Manager Overview and click “Preview” on the top right of the page.
05▸ Enter the URL of your website and click "Start".
06▸ This will open your website’s URL on a new tab. Navigate to the page where the button you want to track is. You should be able to see a message in the bottom right corner letting you know that the debugger has connected successfully.
07▸ On your keyboard hold down the “Ctrl” (or “Cmd ⌘” key if you’re using a Mac) and click on the button that you want to track. Google Tag Assistant (https://tagassistant.google.com/) will list all your actions.
08▸ Google Tag Manager will list all the information that was returned from that click.
If your “Click ID” field has been filled with a text string (e.g.: link_text-6-20), take note of the combination (e.g.: Click ID | link_text-6-20).
Note: Usually HTML IDs are unique within the page and in rare cases, your web designer might have used the same ID for different elements. If that is the case, you will want to select option (b) or (c).
If you don’t have a "Click ID" and you are sure your HTML Class is not shared with any other button that you don’t want to track, you can use that. Take note of that combination (e.g.: Click Classes | add_to_cart_button). If you are unsure, go with the next option (c).
If none of those two options apply to you, you should use the “Click Text” variable. Take note of that combination (e.g.: Click Text | ADD TO CART).
Note: Make sure this specific text is not being used elsewhere in another link. Otherwise, clicks on that link will count as conversions as well.
09▸ Back in the tab when we left off during the set-up of a Click Event with a GA_Engagement_AddtoCart trigger, continue to click "Trigger Configuration" → Under "This trigger fires on", select "Some Clicks" > Select the combination you took when setting up a Click Event of this SOP > Hit "Save".
(e.g.: [Click Text][equals][ADD TO CART])
10▸ Make a new "Tag" similar to when setting up Google Analytics Events using Google Tag Manager and rename it to "GA_Event_AddtoCart". Fill up the fields just like in the screenshot below:
11▸ Scroll down and on the "Triggering" section > Click the icon above "Choose a trigger to make this tag fire…" > Select the trigger you have just created when setting up a Click Event of this SOP.
12▸ Click the blue “Save” button on the top right corner, and that’s it! You’ve just created your trigger and added it to your tag, this event will now fire according to the conditions you have just set and send the values you configured.
13▸ You are now ready to hit "Submit" of all the changes you’ve made.
In the Submission Configuration panel, you will be given the chance to add a name and description to this version. After you have done so, hit “Publish”.
Note: Adding a name and description is optional but recommended. You should enter information here that will make it easy to know what changes are being made.
14▸ You will now be taken to see the summary of the changes you’ve just made.
Set up a new event directly in Google Analytics 4
01▸ Login to your Google Analytics account.
02▸ Ensure you’ve selected the right property (the website where you’ve implemented the Google Analytics 4 tracking code).
03▸ Click “Admin” and then select “Events”.
You will see a list of events that occurred in the period.
Note: Google Analytics automatically records user interaction events by default (e.g. session_start, scroll, etc). The events will only show once it’s occurred. To view the full list of events that Google Analytics 4 collects, visit the official documentation.
04▸ When someone visits a page, click “Create event” to create a new event.
05▸ In the next screen, click “Create”.
In the event configuration page, set the following details:
Custom event name — This event name should describe the action a user does on your page. For example, “begin_checkout” is when the user is on the checkout page. It’s recommended that you follow Google’s guidelines on event names.
Other event examples to track:
- add_payment_info ➝ When a user submits their payment info.
- add_to_cart ➝ When a user adds items to a cart.
- view_cart ➝ When a user views their cart.
- tutorial_complete ➝ When a user completes a tutorial.
Matching conditions:
Set event_name — equals — page_view
Set page_location — contains — [insert_page_url]
Important__:__ In this SOP, we’re using checkout page as an example, assuming the checkout page url contains “/checkout”. You should replace “/checkout” with the URL you want to track on your site.
06▸ Once you’ve completed the event configuration, click “Create”.
07▸ You should then see the new event created. Click the exit button to return to the events dashboard.
The next time someone visits any of your checkout pages, it’ll be recorded in the event dashboard.
If you wish to track this event as one of the conversions or goals, you can mark it as a conversion.
Note: You should only mark this event as a conversion if it’s an action that you consider important such as purchase, checkout completion, or form submission.
That’s it! You’ve now configured a new event in your Google Analytics 4 account.
How to edit an event in Google Analytics 4
01▸ Make sure you’re logged in to your Google Analytics account.
02▸ Select the right property (the website that you’ve implemented the Google Analytics 4 tracking code).
03▸ Click the “Configure” tab and then select “Events”.
04▸ Click “Create event”.
05▸ Click on the event that you’ve created previously.
06▸ Edit the event parameters accordingly and click “Save”.
That’s it! You’ve now successfully edited your event in Google Analytics 4.
How to delete an event in Google Analytics 4
01▸ Make sure you’re logged in to your Google Analytics account.
02▸ Select the right property (the website that you’ve implemented the Google Analytics 4 tracking code).
03▸ Click the “Configure” tab and then select “Events”.
04▸ Click “Create event”.
05▸ Click on the event that you’ve created previously.
06▸ In the top right corner, click on the kebab menu and select “Delete”.
Your event will then be deleted and you’ll be redirected to the Create Events page.
Verify your event setup inside Google Analytics 4
01▸ In order to verify in real-time if the lead track is working, we will utilize Google Analytics 4 DebugView. First, go ahead and install the GA Debugger Chrome Extension.
02▸ Once you’ve downloaded the extension, click on the plugin and make sure it is ON.
03▸ Next, log in to your Google Analytics account.
04▸ Head to the “Configure” tab and select “DebugView”.
In the DebugView, you will be able to see all the events tracked in real-time in Google Analytics 4.
Now, we can begin to test if the custom event we’ve set up is working. Visit the web page where the custom event is tracked.
If the lead tracking is successful, you should see the custom event tracked in DebugView.