gtag.js - How to set up click tracking by CSS ID in Google Analytics 4?

Question

I have a website that has CTA buttons at various places that all link to the same external URL.

I need to set up click tracking for a specific CTA button in the header. It is important to report specifically on this particular button as opposed to the rest of the buttons that link to the same external URL.

On another website, which uses Google AMP and the old Google Analytics, I could simply submit custom triggers via a json:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "{{ site.ga }}"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    },
    "click-bf-callout": {
      "on": "click",
      "selector": "#bf-callout",
      "request": "event",
      "vars": {
         "eventCategory": "purchase-lead",
         "eventAction": "home-bf-callout",
         "eventLabel": "home-bf-callout-lead"
       }
    },

The website where this needs to be set up uses this version of tracking code:

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

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

I cannot find anything even remotely similar in non-AMP Google Analytics 4. Wherever I come it leads me to a new (to me) user interface called Tag manager, I have given this tool the past two hours and have not managed to understand how to do get the equivalent of that JSON setup out of it.

How can I set up a click trigger in non-AMP Google Analytics 4 via a JSON definition?

Answer 1

等待大神答复