Unable to send custom variable/value/event to GA4

I want to submit an extra variable to GA4 upon page load. But I don't see my variable anywhere in Google Analytics and I don't see it mentioned in the Google Chrome>Developer Tools>Network>Post Request to https://www.google-analytics.com/g/collect.

This is the web page I created:

<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YOURIDHERE"></script>
<script>
  const gid = 'G-YOURIDHERE';
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag("event", "athlete_type", {
    "event_category": "hockey",
    "event_label": "hockey",
    "value": "hockey"
  });
  gtag('config', gid );
</script>
</head>
<body>
</body>
</html>

Replace G-YOURIDHERE with your own google analytics ID. My goal is to use Google Analytics to keep track of each athlete_type and when they visited my website. Simply put, I want to use Google Analytics as a time-based key-value store. You can see that I tried using fields like event_category, event_label, value but none of those are being transmitted by my webpage to Google Analytics.

However things like gtag('config', gid, {page_path: 'anything-i-want'}); does properly send. I can see anything-i-want under Real Time Reports>Event Count by Event Name>page_view>page_path>anything-i-want. So I know my google analytics account is functional.

What am I doing wrong? How do I send a custom variable to GA4?

<!DOCTYPE html> <html> <head>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-YOURIDHERE"></script> <script> const gid = 'G-YOURIDHERE'; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', gid ); gtag("event", "athlete_type", { "event_category": "hockey", "event_label": "hockey", "value": "hockey" }); </script> </head> <body> </body> </html>

Recommended topics

Hot tags