TL;DR Use data attribute starting with data-gtag- on the element you want to watch for triggering event, if that event is on a component that will be used in multiple places, and you only want to watch some of them, choose to pass data-gtag as the class name on the component you want to watch, to collect complicated data in an object or array type, use this instead:

window.dataLayer.push({
    event: 'your-event-name',
    propA: someObject,
    propB: someArray,
})

It's less maintainable, so I'll try to avoid using it if possible. below is for Google Tag Manager(GTM) setting:

Creating variables

tracking ID

1. GTM setting:
   this one is essential if you have user accounts in your web app, set the Variable Type to Google Analytics Settings, add your Google Analytics(GA) ID to tracking ID, and one more thing, you'll need Custom Dimensions which appears in More Settings, the index will be 1 for the first dimension, and the value will be the user_id, you can also add other user-related values here.
2. On your project:
   put the snippet below where you get the user_id

window.gtag('set', 'user_id', id);

Variable for events

Get value from data attributes(without a child on the listening event):

set a meaningful name for this variable on the upper left side, then choose Data Layer Variable as Variable Type, leave Data Layer Version as default, as for Data Layer Variable Name: gtm.element.dataset.gtagSomeContext.

p.s. gtagSearchPickerContext = data-gtag-some-context

Get value from data attributes(with a child on the listening event, like an SVG icon):

this one is a little bit tricky, you'll need to add an variable with Variable Type = Custom JavaScript, then add the following JS code(so you can catch the event that is triggered by clicking on the child element):

function findClosestElement() {
  var e = {{Click Element}}; // this one is a built-in varaible
  var closestTile = e.closest('[data-gtag-some-setting]');
  return closestTile.dataset.gtagSomeSetting;
}

Event is triggered by window.dataLayer.push:

simply add the prop name you send with that specific event, in the example above, it would be "propA" or "propB", leave Data Layer Version as default.

Creating triggers

using data attribute:

on Trigger Type: Choose "Click - ALl Elements" (if it's a link tag, use "CLick - Just Links" instead), it will fires on "Some Clicks", the condition: "Click ELement" - "matches CSS selector" - "[data-gtag-some-setting]" or "[data-gtag-some-setting], [data-gtag-some-setting] *" if it contains child element

listening on window.dataLayer.push event:

Trigger Type will be "Custom Event", Event name will be your-event-name if using the example, and set it to be fired on "All Custom Events"

Creating a new tag

When creating a new tag, I'll replace the 'Untitled Tag' with a format like 'section-action' to help the one who came back to GTM in the future, on the Tag Type, choose the 'Google Analytics: Universal Analytics', then set Track Type to 'Event', Value to the variable you set before for this specific event, as for Google Analytics Settings, you will want to use the Tracking ID variable. add a trigger type from the above, the rest of parameters like Category, Action, Label are up to you.

That's it, well done, get yourself a cup of coffee or listen to music to relax for a while, you earned it!