Set up events

Events let you measure user interactions on your website or app; for example, you can measure when someone loads a page, clicks a link, and makes a purchase. Google Analytics uses data from events to create reports with information about your business. Learn more

This guide shows you how to set up recommended events and custom events on your website using the Google tag (gtag.js) or Google Tag Manager. You don't need to set up automatically collected and enhanced measurement events.

Audience

You've set up Google Analytics and are starting to see data in your reports, but you want to collect more information than what Analytics collects automatically, or you want to unlock certain features and capabilities in Analytics.


Before you begin

This guide assumes that you've done the following:

It also assumes that you have the following:

  • Access to your website source code
  • The Editor role to the Google Analytics account

Google tag (gtag.js) overview

Use the Google tag (gtag.js) API to send events to Google Analytics. The API has one function called gtag(), and whenever you want to send an event to Google Analytics, you use the following syntax:

gtag('event', '<event_name>', {
  <event_parameters>
});

In this example, the gtag() function includes the following:

  • An event command that tells Google that you are sending an event
  • The name of the recommended or custom event
  • (Optional) A collection of parameters that provide additional information about the event

For example, the following is a recommended event called screen_view with two parameters:

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

Add events to your JavaScript

gtag() is a JavaScript function so you need to add the function to the JavaScript on your web page. For example, you could add the function within your <script> tags or in a separate JavaScript file that you import into your HTML page.

You can add events to your JavaScript anywhere below the Google tag snippet. Google won't process data from events that you place above the Google tag snippet. For example, the following sample code includes an event called screen_view within a <script> tag:

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

    gtag('config', 'G-XXXXXXXXXX');
    </script>

    <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>Title of the page</title>
</head>
<body>
    <p>Welcome to my website!</p>
    
    <script>
      /**
      *   The following event is sent when the page loads. You could
      *   wrap the event in a JavaScript function so the event is
      *   sent when the user performs some action.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
    </script> 
</body>
</html>

If you want to send the event based on a button click (or some other user action), you can add some additional JavaScript to your event.

See your events in Analytics

You can see your events and their parameters using the Realtime and DebugView reports. Note that the DebugView report requires some additional configuration before you can use the report. These two reports show you the events users trigger on your website as the events are triggered.

Next steps