Web Tools · Selected work

DataLayer Sidepanel

Chrome side-panel extension that shows Google Tag Manager dataLayer events in real time.

Stack
  • JavaScript
  • Chrome Extension API
  • Google Tag Manager
  • DataLayer API
Impact
  • Featured on Product Hunt
  • Used daily by marketing & analytics teams
DataLayer Sidepanel — Chrome side-panel extension that shows Google Tag Manager dataLayer events in real time.

DataLayer Sidepanel is a Chrome extension for monitoring and analyzing Google Tag Manager dataLayer pushes and events in real time. Instead of opening the developer console, switching tabs, and parsing raw arrays by eye, it gives you a clean, persistent view inside Chrome’s own side panel, running alongside whatever page you’re auditing.

Real-time dataLayer monitoring

Every dataLayer push appears the moment it fires, with auto-refresh so there’s no manual reload to trigger between page interactions. Click through a funnel, submit a form, trigger a custom event: the panel updates as the page does, live, without a second window competing for screen space.

Inspecting events without the console

Each entry is expanded into a readable structure rather than a stringified blob you have to mentally parse. That distinction matters more than it sounds: console.log(dataLayer) gives you an array of objects that’s technically inspectable but slow to scan under pressure, especially mid-QA when you’re trying to confirm one specific field fired correctly. A structured, always-visible panel turns that into a glance instead of an expand-click-scroll cycle repeated for every event.

Why the side panel beats a modal debugger

GTM debugging tooling has always been a little awkward. Google’s own Tag Assistant works, but it’s modal and disruptive: it takes over the browser window instead of sitting alongside your work. Console.log spelunking is the fallback, and it’s worse. The side panel is the natural place for a live tracking inspector: always visible, never in the way, updating in the background while you interact with the page normally. Once Chrome shipped the side panel API, building the right tool on top of it became the obvious move rather than working around Tag Assistant’s limitations.

Adopted by analytics teams

Featured on Product Hunt at launch, and adopted since as a default install by marketing analytics teams, specifically for QA’ing tracking changes before they ship to production, where catching a broken or missing dataLayer push before a release matters more than catching it after.

  • PageNote keeps research notes attached to the URL where they matter.
  • ChatGPT Copier is another one-purpose Chrome extension designed to remove repeated friction.