Configure Google products and send event data

This page is for developers who need to configure the Google tag using gtag.js. The Google tag also allows you to adjust some settings in the user interface, see Configure your Google tag settings.

After installing the Google tag, you can call gtag() commands anywhere in your code after the Google tag snippet.

This page shows you how to:

  1. Establish data flow between your website and Google products using the config command
  2. Send events to your Google products using the event command
  3. Set values that are sent with every event using the set command

Before you begin

This guide assumes you have done the following:

To set up the data flow, you need:

  • Access to the website code where you installed the Google tag
  • The tag ID of the Google product you want to connect to the Google tag

What is a tag ID and where to find it? A tag ID identifies a Google tag. A single Google tag can have multiple tag IDs. For example, if you use Google Ads, your tag now has two IDs: One legacy ID (AW) and one Google tag ID (GT).

Screen showing a Google tag within Google Ads with two tag IDs.

The tag IDs are interchangeable. The table below contains an overview of which tags are compatible with the Google tag.

Prefix ID type Description
GT-XXXXXX Google tag Each newly created Google tag gets a GT prefix and unique ID.
G-XXXXXX Google tag (legacy prefix) Google Analytics 4 tags are Google tags with a G prefix and unique ID.
AW-XXXXXX Google tag (legacy prefix) Google Ads tags are Google tags with a AW prefix and unique ID.
DC-XXXXXX Google tag (legacy prefix) Google Floodlight tags are Google tags with a DC prefix and unique ID.

Universal Analytics (UA) tags are not compatible with the Google tag (GT).

Find your tag ID:

Step 1: Connect Google products to your tag

About the config command

The config command specifies Google products you want to send event data to. The command has the following format:

gtag('config', 'TAG_ID', {<additional_config_params>});

Additional configuration parameters

You can adjust and extend a config command by specifying parameters in the optional {<additional_config_params>} object. For example, adding the following parameter will prevent a Google Analytics pageview from being automatically sent:

gtag('config', 'TAG_ID', {'send_page_view': false});

Set up data collection

To set up data collection for a Google product, add the config command with a tag ID.

Example

The Google tag (GT-XXXXXX) sends data to the destinations you defined for it, for example Google Ads and GA4.

The following example shows how to update your code to load a second Google tag that is connected to a Floodlight destination.

To send data to Floodlight (tag ID DC-ZZZZZZ), add another config command after initializing the first Google tag (tag ID GT-XXXXXX):

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

Product-specific config behavior

Depending on the product specified in TAG_ID, the config command may also initiate certain behavior for that product. For example, in some cases the config command tells gtag.js to initiate a pageview event.

To learn more about how the config command behaves in relation to individual products, read the product-specific documentation:

Step 2: Send data with event

About the event command

The event command lets you send event data to the products you specified with config. The command has the following format:

gtag('event', 'event_name', {
  'key': 'value',
});

About event names and key-value pairs

Recommended events: Recommended events are events that you implement, but that have predefined key-value pairs. These events unlock existing and future reporting capabilities.

Custom events: To define your own events and data structures, you can enter custom values to send a custom event.

Setting up events

You can call the event method anywhere in your code after initializing the Google tag.

  1. Define an event. If you are using a recommended event, make sure you use the standardized event names and predefined key-value pairs.

  2. Define when the event will be triggered, for example if it gets sent with a page load or when someone clicks on a button.

Example

The following example illustrates one possible way to measure newsletter signups when a user clicks a button. The example uses a custom event and sends it to a Google Analytics 4 property.

<head>
   ...
   /* 1. Initialize the Google tag and gtag.js library */
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments)};
     gtag('js', new Date());
     gtag('config', 'TAG_ID');
   </script>
</head>

<body>
   <script>
     let date = Date.now();
     /* 2. Define your event. */
     function newsletterSignup() {
       gtag('event', 'newsletter_signup', {
       'time': date,
       });
   }
   </script>
   ...
   /* 3. Trigger your event */
   <button type="submit" onlick="newsletterSignup()">Sign me up!</button>
   ...
</body>

Optional: Send data with every event using set

The set command lets you define parameters that will be associated with every subsequent event on the page.

For example, you can share campaign parameters so that they can be accessed by multiple tags on the same page.

The command has the following format:

gtag('set', 'parameterName');

Next steps

After setting up your Google products and events, you are done with the basic Google tag configuration.

If you are managing multiple products and want to manage their data flow in more detail, see Group and route data.