Google Analytics 4 (gtag js) 'set' command not adding data to events

I'm trying to add data to each event I send in GA4 via javascript by using the 'set' command:

https://developers.google.com/tag-platform/gtagjs/reference#set

From those docs, it appears to be similar to Serilog Enrichment, but it doesn't appear to work and I don't see this data coming through.

I'm using localhost + Google Analytics Debugger chrome extension. Then in the Analytics > Configure > DebugView I see the custom event 'hello-world' and the property 'test', but I don't see the data I add via the "set" command.

GA DebugView

I use the set command for 2 calls - first is the "user_id" property that does work. That must be a special case, since GA treats that differently. The 2nd is for the custom object that doesn't work.

Console shows some output for both set command calls, but nothing to tell me that something has succeeded or failed

<!DOCTYPE html>
<html>

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

    // Set enrichment properties for every event "on this page"
    // https://developers.google.com/tag-platform/gtagjs/reference#set

    gtag('set', {
      'foo': 'bar',
    });

    // Set the measurement id
    // https://developers.google.com/analytics/devguides/collection/gtagjs/setting-values
    gtag('config', 'G-SOMECODE');

    //Set the GA4 user_id and keep it set for all events
    gtag('set', {
      'user_id': 'a24b935c-03cd-47f0-af68-c60a68b31303'
    });

    gtag('event', 'hello-world', {
      'test': true
    });

  </script>
  <title>Html Delivery</title>
  <script type="text/javascript">
    function myFunction() {
      // Event with nested data test. It doesnt seem to display nicely
      gtag('event', 'button-click-nested', {
        'data': {
          'type': 'nextButton'
        }
      });
      gtag('event', 'button-click', {
        'type': 'nextButton'
      });
    }

    function LinkFunction() {
      console.log("link click");
      gtag('event', 'link click', {
        'type': 'link'
      });
    }
  </script>
</head>

<body>
  <button onclick="myFunction()">Next</button>
  <a id="myLink" href="#" title="Click to do something" onclick="LinkFunction()">link text</a>
</body>

</html>

I've tried to move the calls to above/below the config command, but it makes no difference either.

There is a similar question, but my rep wont let me comment on it to see if its still the case. The accepted answer doesn't really help me since I wanted to be able to add any arbitrary data in this way.

I have tried to setup a custom metric for this in GA (im not using GTM), but still. No data comes through.

Does this just not work?

Solution

We went through the same issue here: Google Analytics custom dimension not working: gtag set() method issues tl;dr: don't use set, it's for GTM. gtag documentation is misleading.