We are using React styled components in our project, so there is an issue where the class name is variable when the GTM manager catches the selector of a specific element.
To solve this, I think of a way to give an id value to the element to be grabbed with the GTM tag. Is this the best?
No, the best you can do if you have access to the front-end code base is to add a dataLayer.push() event in the CTA's click callback. And in GTM, use a Data Layer event as a trigger. Read more about it here. That way, you don't need to be careful when you're changing the design of the page.
Another good way of doing this is to add a data- attribute to the CTA, which would not only indicate that this is a tracked CTA, but also give some info about it. Something like this:
data-analytics-cta='global-menu||toys||for toddlers'. Then in GTM you can use the {{Click Element}} variable in a few CJS variables to get its data-analytics attribute value and parse out key elements of it to populate different dimensions of the button click, if needed.A poorer option would be just using a simple CSS selector in GTM. You don't need a class or ID to select anything. There are many ways of selecting things, so it's fine. But that makes your tracking dependant on the page structure around the CTA.
Implementing ids is unnecessary for tracking.