This article is about Google Analytics 4 properties. If you're using a Universal Analytics property, refer to the Universal Analytics section of this help center.

[GA4] Send events

Automatically collected and enhanced measurement events require little to no configuration for Google Analytics to collect event data from your website or mobile app. However, to collect data using the recommended and custom events, you need to send events in your code or through Google Tag Manager.

Since the gtag.js library uses JavaScript to send events to Google Analytics, you can send events by adding them to your JavaScript. You can then apply event listeners to the events to determine when you want to send the events to Analytics, such as when a user clicks a button or scrolls down a page.

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 gtag.js is not recommended.

You need to set up Google Analytics before you can send event data.

Verify your code

As you write code on your site or app, use the Realtime report and DebugView report to make sure you're collecting event data correctly. You can also use reports and explorations to further dissect the data once the data is ingested.

Send an event

You can add any recommended or custom event to your JavaScript directly. For example, to send the recommended view_item event when a user views a page on your site (i.e., when the page loads), you can include the following event code directly in your <script> tag:

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

</script>

You can also include custom events directly in your <script> tag. For example, to send a custom event when a user publishes an article, you can include the following event in the <script> tag on the page where the event takes place:

<script>
gtag("event", "publish", {
  role: "Writer"
});
</script>

Send an event based on user behavior

You can use event listeners to send events based on a user's behavior, such as when a user clicks a button. For example, to send an event when a user clicks an "Add to cart" button, you can do the following:

First, display an "Add to cart" button by adding the following to the <body> tag of your HTML page:

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

Second, send the add_to_cart event when a user clicks the button by adding the following:

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",
      }
    ]
  });
});

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.

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