Our codebase (next 14, pages router, considering a migration to app router when next 15 releases) and our business in general (e-commerce like) depends a lot on analytics, wether it is for product analytics (A/B testing measurements, Algolia events, etc), business analytics (Google Analytics and others, generally through GTM) or marketing (google ads, facebook ads).

Analytics code is very sensitive for us as a simple error, like not signalling purchases to google ads correctly, can make us loose a lot of money. It is also very complexe to manage as it leaks absolutely everywhere : I cannot open a single file without having in there some random analytics code that can be very hard to understand.

Sometimes we use GTM (through @next/third-parties/google) but some tools does not support GTM so we have to create custom code for those, and others support GTM only partially, which make the thing even more complex as they span between GTM and our code. Sometimes we need to trigger events with the dataLayer, sometimes we need to expose variable through custom HTML attributes. It really becomes out of control.

We have an overall pretty simple app without much states. We usually want to track clicks on links, views on product pages and search results or showcased items, and conversion events like purchases, add to cart etc. We do not use any state management libraries except React Query.

How do you manage the ever growing complexity of analytics in your codebase?