This article is about Google Analytics 4 properties. Refer to the Universal Analytics section if you're still using a Universal Analytics property, which will stop processing data on July 1, 2023 (October 1, 2023 for Analytics 360 properties).

[GA4] Set up events

Collect additional information from your website or app through events

Google Analytics collects some information by default when you set up the global site tag or the Tag Manager snippet on your website or the Google Analytics for Firebase SDK in your app. For any additional information you want to collect, set up recommended or custom events.

This article describes how to set up an event on your website or app so you can add information that's useful to your business in Google Analytics. If you want to modify an existing event, see Modify and create events via the user interface.

Set up an event

While setting up custom events, note that event names are case-sensitive; two events whose names differ only in case will result in two distinct events.

Use the following drop-downs to see information about how to set up an event:

Global site tag (Websites)

How events are structured

Once you add the global site tag to your website, Google will process any events you include in your website code. All global site tag events have the following structure, which you can learn more about in the Global site tag API reference:

gtag('event', 'screen_view', {
  <event_params>
});

An event includes the following parts:

  • <event_name> is the name of the recommended or custom event
  • <event_params> is one or more parameter-value pairs, each separated by a comma

For example, the following event screen_view event includes two parameters:

gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

Where you place the events on your website

All global site tag events are sent as JavaScript. If you have a standard HTML website, you can add events anywhere within a <script> tag.

For example, if the following were your HTML website, you could add a <script> tag in the following place and add the event inside of the <script> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Your tag goes here -->
    
    <title>The title of the page</title>
</head>
<body>
    <!-- The part of your site that's shown to users -->
    <script>
        <!-- You can place ecommerce events here -->
    </script>
</body>
</html>

Modify when events are sent

Because events are all written in JavaScript, you can apply additional JavaScript to your events to change when and how they're sent. For example, if you want to send an event when someone clicks an Add to cart button, you could do the following:

Step 1: Add the button with an ID

For example, you could add an addToCart ID so you can send the event when the button is clicked.

<button id="addToCart">Add to cart</button>

Step 2: Wrap the event in an event handler

This code identifies the button by its id and then triggers the function when a user clicks the button. By placing the event in the function, the event only triggers when the button is clicked. As long as you use the same id for the button and getElementById() method, you can use these steps for any button on your site.

document.getElementById("addToCart").addEventListener("click", function () {

  gtag("event", "add_to_cart", {
    currency: "USD",
    value: 7.77,
    items: [
      {
        item_id: "SKU_12345",
        item_name: "Stan and Friends Tee",
      }
    ]
  });

});

Note: To measure scroll activity beyond what's provided with enhanced measurement, use the scroll depth trigger in Google Tag Manager. Writing a custom script using the global site tag is not recommended.

Google Tag Manager (Websites)

Once you add the Tag Manager snippet to your website and create a Google Analytics 4 Configuration tag, create a Google Analytics 4 Event tag for the event.

To create a Google Analytics 4 Event tag, follow these steps:

  1. In Google Tag Manager, click Tags > New.
  2. Click Tag Configuration > Google Analytics: GA4 Event.
  3. In Configuration Tag, select your Google Analytics 4 Configuration tag.
  4. In Event Name, enter the name of the event (for example, view_item_list).
  5. In Event Parameters, add a row for each event-level parameter.

    Event-level parameters are parameters that you include within the event, outside of the items array, such as the item_list_id and item_list_name parameters in the view_item_list event.

  6. Save and publish the container.

When you want to trigger an event under a condition (for example, when someone clicks a button), create a trigger and then add the trigger to the Google Analytics 4 Event tag.

Google Analytics for Firebase (Mobile apps)

Once you install the Google Analytics for Firebase SDK, refer to the Firebase documentation to learn how to set up events for a mobile app.
If you've installed the Google Analytics for Firebase SDK, you can also add Tag Manager to your app so you can remotely configure events and parameters within Tag Manager.

Verify your configuration in realtime

Reports and explorations can take up to 24 hours to populate with your ecommerce data. In the meantime, you can verify whether you've set up your events correctly by enabling debug mode. Once you enable debug mode, you can use the DebugView report to see your data in realtime.

Was this helpful?
How can we improve it?
Search
Clear search
Close search
Google apps
Main menu
Search Help Center
true
69256
false