Set up events

Stay organized with collections Save and categorize content based on your preferences.

This guide shows you how to set up recommended events and custom events so you can collect more information about user activity on your website.

Audience

You are starting to see data in Google Analytics, but you want to collect more data than what Google Analytics collects automatically or you want to unlock certain features and capabilities in Google Analytics.

You use either the Google tag (gtag.js) or Google Tag Manager on your website. If you want to set up events for a mobile app, see Log events.


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 (or above) role to the Google Analytics account

For more information about events, read Events.

Set up events

To send data to measurement and advertising products like Google Analytics, the Google tag uses an API called the gtag.js API. The gtag.js API consists of a single function called gtag(). Learn more about the API

When you want to set up an event, use the gtag() function as follows:

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 to your <script> tags.

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 at the end of the <body> 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 function to call the event when certain
      * events (e.g., a click event) happen on your site.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
    </script> 
</body>
</html>

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