← Writing archive
Analytics Engineering · Product22 September 2026Sajid Hasan Sifat

Why I Built Browser Tools for GA4 and GTM Debugging

A case study on turning repetitive analytics QA work into lightweight Chrome extensions for faster event, tag and tracking inspection.

Analytics implementation work has a strange property:

the individual checks are often simple, but the repetition is expensive.

Open a page. Trigger an action. Check the browser. Inspect the data layer. Look for the GA4 request. Confirm the event name. Check parameters. Repeat on another page.

None of those steps is especially difficult.

But when you do them hundreds of times, friction becomes the problem.

That is why I started building small browser tools around analytics QA.

I have published Chrome extensions including:

  • Event Tracker
  • GTM & GA4 Inspector
  • Google Analytics Event Tracker

They are small products, but they came from a very familiar data problem:

If a task is repeated often enough, the right answer may be a tool rather than another checklist.

The analytics QA loop

A typical implementation question sounds simple:

“Did the purchase event fire correctly?”

But validating it properly can involve several layers.

User action

Website event / data layer

Tag Manager logic

Analytics request

GA4 event + parameters

Reporting

If something is wrong in the final report, the issue could be anywhere in that chain.

The fastest debugging process therefore tries to answer:

  1. Did the interaction happen?
  2. Did the expected event appear?
  3. Did the correct tag fire?
  4. Did the analytics request leave the browser?
  5. Did it include the expected event name and parameters?

Browser developer tools can answer most of this.

The problem is that they expose everything.

For someone who only wants to validate analytics, a generic network panel contains a huge amount of irrelevant information.

Product idea: reduce the surface area

The browser tools are built around a simple product principle:

show the analyst the part of the browser they actually care about.

Instead of asking someone to repeatedly filter through network calls or inspect several panels, a focused extension can surface tracking information in one place.

That is useful for:

  • analysts;
  • marketers;
  • QA teams;
  • implementation specialists;
  • product teams;
  • developers debugging instrumentation.

The goal is not to replace browser DevTools.

It is to remove unnecessary steps for a specific workflow.

What makes analytics debugging difficult

Event names are only the beginning

Seeing purchase fire is not enough.

You may also need to validate:

  • transaction ID;
  • value;
  • currency;
  • item information;
  • page context;
  • user properties;
  • custom dimensions;
  • campaign values.

A tool that only says “an event happened” is therefore useful but incomplete.

The more valuable view connects the event to the parameters that make the event analytically meaningful.

Multiple tracking systems coexist

Modern websites may contain several systems at once:

  • Google Analytics 4;
  • Google Tag Manager;
  • Meta Pixel;
  • TikTok Pixel;
  • advertising tags;
  • consent systems;
  • first-party event layers.

That means the debugging experience should avoid assuming there is only one source of truth.

Even if a tool begins with GA4, the architecture should make it possible to inspect multiple tracking systems.

Timing matters

Events are not always visible at the moment a page first loads.

Some fire after:

  • user interaction;
  • async requests;
  • SPA route changes;
  • consent decisions;
  • delayed scripts.

A useful tool therefore needs to observe what happens over time rather than taking a single snapshot.

Why browser extensions made sense

I could have built a standalone website where someone pastes a URL.

But analytics QA often happens inside the page being tested.

A browser extension is closer to the workflow.

It can sit where the analyst already works and reduce context switching.

That decision created its own constraints:

  • permissions should be minimal;
  • the interface has limited space;
  • the tool must not interfere with the host page;
  • state should remain understandable;
  • debugging output can become noisy very quickly.

Those constraints are useful.

They force the product to stay focused.

Designing for scanability

Debugging interfaces should not look like a marketing landing page.

They should help the user answer questions quickly.

A good event row might prioritize:

EVENT NAME
timestamp
key parameters
source
status / warning

Then secondary details can expand only when needed.

This is the same principle I use in dashboards:

The most important analytical hierarchy is often visual hierarchy.

If every field looks equally important, the interface makes the analyst work harder.

A tiny tool can still need a data model

Even a browser extension benefits from separating the raw observation from the UI.

Conceptually:

Raw browser signal

Parser

Normalized event

Display model

Filter / search / inspect

The normalization layer matters because different systems name similar concepts differently.

If the extension wants to support multiple tracking technologies, it becomes much easier when the UI receives a consistent object rather than a technology-specific request.

For example:

{
  "source": "ga4",
  "event": "purchase",
  "timestamp": 1720000000,
  "parameters": {
    "value": 1250,
    "currency": "BDT"
  }
}

The real request may be much messier.

The user should not have to care.

Product lesson: build for the error, not only the happy path

A debugging tool is valuable when something is wrong.

So success states are only half the design.

The interface should also make common mistakes obvious:

  • event never appeared;
  • duplicate events;
  • missing parameter;
  • unexpected value;
  • multiple IDs;
  • wrong tracking destination;
  • repeated pageview;
  • tag firing too early or too late.

This is where lightweight validation can become more useful than passive logging.

A tool can move from:

“Here are the events.”

to:

“Here are the events, and here is what looks suspicious.”

That is a much stronger product direction.

What publishing taught me

Shipping an extension publicly changes the way you think about a side project.

Locally, you know how it is supposed to work.

Publicly:

  • users have different websites;
  • frameworks behave differently;
  • permissions matter;
  • browser changes can break assumptions;
  • UI bugs become obvious on smaller screens;
  • documentation matters.

The Chrome Web Store also makes the project concrete. It is no longer a script sitting in a folder.

Someone can install it, use it and decide whether it saved them time.

How I decide whether an automation is worth building

I use a rough filter:

QuestionSignal
Is the task repeated?Strong reason to automate
Is the input structured enough?Makes automation easier
Is the task annoying but predictable?Excellent candidate
Does failure matter?Add validation and transparency
Will the tool be reused?Product beats one-off script

Analytics QA checks almost every box.

That is why browser tooling became a natural extension of the work.

The broader lesson

A data analyst does not have to stop at analysis.

If the same analytical friction appears repeatedly, there are several possible outputs:

  • a query;
  • a dashboard;
  • a notebook;
  • a monitoring job;
  • a browser extension;
  • a small web application.

Choosing the right output is part of the job.

For me, these Chrome extensions are a reminder that data work can become product work very quickly.

The interesting question is not:

“Can I automate this?”

It is:

“Can I turn this repeated pain into something simple enough that other people can use it without me?”

That is the standard I want these tools to keep moving toward.


Try the tools

End of analysis

More things
I’ve been thinking about.

Browse all writing ↗