Product Wireframes · v1.0

Tag
Sentry

A Chrome extension for martech & adtech professionals to intercept, identify, audit, and baseline-compare tracking implementations in real time.

Chrome Extension · MV3
8 Core Screens
80+ Vendor Patterns
PII Detection Engine
00
Architecture Overview

How TagSentry Works

The extension intercepts all network requests via Chrome's webRequest API, identifies vendors, parses payloads, scans for PII, and stores structured session data — all with zero page-side impact.

🌐
Page Load
Any URL
→
🪝
Intercept
webRequest API
→
🏷️
Identify
Vendor matching
→
⚙️
Parse
Decode payload
→
🔒
PII Scan
Regex patterns
→
✅
Whitelist
Check allowlist
→
💾
Store
IndexedDB session
→
🔔
Surface
Popup + badge
🏷️
Vendor Library
Pre-built patterns for 80+ vendors: GA4, Adobe Analytics, Meta Pixel, TikTok, Google Ads, LinkedIn Insight, OneTrust, Hotjar, Segment, and more. Custom vendor patterns also supported.
🔒
PII Detection
Configurable regex scanning across all query parameters and request bodies. Detects emails, phone numbers, SSNs, IP addresses, credit card patterns, and custom user-defined patterns. Severity-scored findings.
📐
Baseline Diff Engine
Save any session as a named baseline. Future sessions are automatically diff'd against it — surfacing added tags, removed tags, and changed parameter values with color-coded severity.
📤
Multi-Format Export
Export session data as CSV, JSON, HTML audit report, or HAR-compatible format. PII values can be redacted before export. Reports include diff sections and compliance-ready PII summaries.
✅
Whitelist Manager
Define the approved vendor set per property. Any tag firing outside the whitelist is flagged immediately in the live view. Import/export whitelists as JSON to share with teammates.
💾
Session Storage
All sessions stored locally in IndexedDB with configurable retention limits. Sessions can be named, tagged, backed up, restored, and compared. Zero external data transmission.
TagSentry Wireframes · 00 of 08
01
Primary View

Live Tag Feed

The default view on popup open. Shows all intercepted network requests in real time, with vendor identification, status indicators, and instant filter controls. Click any row to expand its detail panel.

shop.example.com/products/sneakers-pro
TagSentry
Recording
📡
Live
24
💾
Sessions
⚖️
Diff
🔒
PII
3
✅
Whitelist
📤
Export
⚙️
Settings
⏹ Stop
🗑 Clear
📌 Save
⚡ Baseline ▾
24
Total
20
OK
1
Warn
3
PII
🔍  Filter tags, vendors, params…
🏷️
🔒
⚠️
G
Google Analytics 4 — page_view
analytics.google.com/g/collect
GA4 200 OK page_view
12:04:01
f
Meta Pixel — Purchase
facebook.com/tr/
Meta PII 200 OK
12:04:01
T
TikTok Pixel — ViewContent
analytics.tiktok.com/api/v2/pixel
TikTok 200 OK
12:04:00
A
Google Ads — Conversion
googleadservices.com/pagead/conversion
G Ads Unlisted
12:04:00
▷
Google Tag Manager
googletagmanager.com/gtm.js
Container 200 OK
12:03:58
Popup: 420 × 600px Click row → detail panel opens below
A
Status indicators use a colored left-border + status dot. Green = OK and whitelisted. Amber = known vendor but not in whitelist. Red = PII detected.
B
Stats bar gives instant totals — Total / OK / Warn / PII — updating in real time as new requests come in.
C
Filter bar supports free-text search across vendor name, hostname, and parameter values. Three toggle buttons add quick filters: known vendors only, PII-only, unlisted-only.
D
Toolbar controls recording state. Stop / Record pauses interception without clearing data. Save opens the session-naming modal. Baseline ▾ dropdown runs a diff against saved baseline.
E
PII badge on the PII tab shows a live count. Clicking navigates directly to the PII audit view with all findings for the current session.
F
Selected row highlighted with accent border. Detail panel slides open below the list — no separate navigation required.
TagSentry Wireframes · 01 of 08
02
Inline Component

Tag Detail Panel

Expands below the tag list when any row is selected. Parses the full request into tabbed views — query parameters, request body, raw headers, and the full raw URL. PII values are flagged inline.

TagSentry — Detail View
G
Google Analytics 4 — page_view
analytics.google.com/g/collect
GA4200 OKpage_view
12:04:01
G
Google Analytics 4 — page_view
Params
Body
Headers
Raw
v
2
tid
G-XXXXXXXXXX
en
page_view
ep.page_type
product_detail
ep.product_id
SKU-00842
ul
en-us
uid
john.doe@example.com⚠ PII
_p
1234567890
dr
https://google.com/
↑ Params tab active · Body / Headers / Raw tabs available
A
Four tabs for parsing a request: Params (URL query string), Body (decoded POST body — JSON or form-encoded), Headers (request headers), Raw (full URL string).
B
PII values are highlighted in red with an inline ⚠ PII badge directly beside the offending value. No separate screen needed — engineers see the issue immediately in context.
C
Key column is fixed width (130px) with word-break to handle long parameter names. Value column is full-width and wraps naturally.
D
Nested objects in JSON bodies are flattened using dot notation (e.g. ecommerce.items.0.item_id) for easy scanning.
E
Panel height is capped at ~180px with an internal scrollbar so the popup doesn't overflow the viewport. The tag list remains visible above it.
TagSentry Wireframes · 02 of 08
03
Session Management

Saved Sessions

All saved sessions with metadata, status chips, and quick actions. One session can be pinned as the current baseline. Any session can be compared against baseline or another session via the Diff view.

TagSentry
Idle
📡
Live
💾
Sessions
⚖️
Diff
🔒
PII
✅
Whitelist
📤
Export
⚙️
Settings
🔍  Search sessions…
↕️
📌
Production Baseline — Checkout Flow
shop.example.com · Jun 1 · 31 tags
BASELINE Clean
Load
Compare ▾
📋
Staging — Sprint 42 Deploy
staging.example.com · Today 11:58 · 28 tags
3 PII 2 Missing
Load
Compare ▾
📋
QA Run — Homepage
qa.example.com · Yesterday 16:22 · 18 tags
Clean
Load
Compare ▾
📋
Dev — New TikTok Integration
localhost:3000 · May 30 · 9 tags
Draft
Load
⋯
▶ New Recording
🗑 Delete
📦 Backup All
A
Baseline is pinned with a 📌 icon and an indigo-accented border. Only one session is baseline at a time. Setting a new one prompts confirmation to prevent accidental replacement.
B
Status chips give at-a-glance health: PII count, missing tags vs. baseline, or a clean green check. These derive from the stored session's piiFindings and diff metadata.
C
Compare ▾ dropdown lets user choose: vs. Baseline, vs. another session, or opens the full Diff tab pre-populated with the selected session as Session B.
D
Sessions are stored in browser IndexedDB — no external server. Maximum count is configurable (default 50). Full backup/restore via JSON for cross-machine or team sharing.
TagSentry Wireframes · 03 of 08
04
Session Comparison

Diff View

Compare any two sessions. The diff engine groups requests by vendor, then reports: tags added, tags removed, and parameter-level changes. Color-coded for instant triage by severity.

TagSentry
Idle
📡
Live
💾
Sessions
⚖️
Diff
🔒
PII
✅
Whitelist
📤
Export
⚙️
Settings
Session A (baseline)
📌 Production Baseline
vs
Session B
Staging · Sprint 42 ▾
3 removed 1 added 4 changed
📤 Export Diff
−
LinkedIn Insight Tag — removed entirely
Vendor: snap.licdn.com
Missing
−
OneTrust CMP — not detected on staging
⚠ Consent manager missing
Critical
+
Bing UET Tag — new tag detected
URL: bat.bing.com/action/0
Unlisted
~
Meta Pixel · Purchase — param changed
value: 99.99undefined
⚠ Critical
~
GA4 · page_view — param changed
ep.page_type: product_detailpdp
Changed
A
Session selectors are dropdown inputs. Session A defaults to the saved baseline if one exists. Both can be any stored session for arbitrary cross-session comparison.
B
Color semantics: Red = removed or critical issue. Green = added. Amber = changed value or unlisted new tag. Each has a left-border stripe for color-blind accessibility.
C
Critical flags are surfaced for high-impact issues: missing CMP/consent layer, undefined purchase event values, or new completely unrecognized tags.
D
Parameter-level diffs show the exact old and new values side-by-side (old in red strikethrough, new in green). Useful for catching silent regressions in naming conventions or value formats.
E
Export Diff generates a standalone report of all changes — ideal for sharing with developers, QA leads, or clients as a validation sign-off document.
TagSentry Wireframes · 04 of 08
05
Compliance View

PII Audit

All personally identifiable information detected across the current session, grouped by severity. Exportable as a standalone compliance report for GDPR/CCPA review, handoff to legal, or client sign-off.

TagSentry
Recording
📡
Live
💾
Sessions
⚖️
Diff
🔒
PII
3
✅
Whitelist
📤
Export
⚙️
Settings
⚠ 3 PII Issues Detected
Personal data found in tag payloads. Review each finding and confirm legal basis and consent coverage before production deployment.
Findings · Current Session
HIGH
uid → john.doe@example.com
Pattern: Email address (RFC 5322)
Tag: Google Analytics 4 · req_12:04:01
HIGH
em → a8d3f1… (hashed email)
Pattern: Hashed email (Meta CAPI)
Tag: Meta Pixel · req_12:04:01
MED
ph → +1-555-867-5309
Pattern: US phone number (E.164)
Tag: Meta Pixel · req_12:04:01
📄 Export PII Report
⚙️ Configure Patterns
A
Severity levels: HIGH — clear PII (email, SSN, phone number, credit card). MEDIUM — likely PII or hashed PII (hashed emails, partial identifiers). LOW — potential PII patterns (long numeric IDs, possible dates of birth).
B
Each finding surfaces the exact parameter key, the detected value (truncated for display), the detection pattern used for transparency, and the originating tag request ID.
C
Configure Patterns opens a modal for adding custom regex patterns — useful for internal user IDs, loyalty card numbers, or other domain-specific PII unique to your organization.
D
PII Report export generates a structured PDF or JSON file with all findings, timestamps, severity ratings, and associated tag metadata — formatted for compliance documentation.
TagSentry Wireframes · 05 of 08
06
Allowlist Management

Tag Whitelist

Define the approved set of vendors for a given property or environment. Tags outside the whitelist are flagged amber in the live feed. Import and export whitelists as JSON to standardize across teams and environments.

TagSentry
Recording
📡
Live
💾
Sessions
⚖️
Diff
🔒
PII
✅
Whitelist
📤
Export
⚙️
Settings
🔍  Search vendors…
+ Add Vendor
Analytics 2 / 2
G
Google Analytics 4
analytics.google.com
Aa
Adobe Analytics
omtrdc.net
Advertising 3 / 4
f
Meta Pixel
facebook.com
T
TikTok Pixel
analytics.tiktok.com
A
Google Ads
googleadservices.com
Li
LinkedIn Insight
snap.licdn.com
Tag Management 1 / 1
▷
Google Tag Manager
googletagmanager.com
📥 Import JSON
📤 Export JSON
A
Per-vendor toggles instantly mark that vendor as allowed or flagged in the live feed. The toggle state is persisted across sessions and applied immediately to any active recording.
B
Grouped by category: Analytics, Advertising, Tag Management, Consent / CMP, Heatmaps, A/B Testing, CDP. Category header shows a chip indicating how many are active vs. total.
C
Disabled vendors (toggled off) are shown at reduced opacity so the user can see what's excluded without losing orientation. They still appear in the live feed, but are flagged amber.
D
Import/Export JSON lets consultants maintain a shared, versioned whitelist per client or project. Custom vendor entries (including URL-pattern-only entries) are included in the export.
E
Add Vendor opens a modal with name, URL pattern, and category fields. Pattern is used for matching against request hostnames. Supports wildcard and substring matching.
TagSentry Wireframes · 06 of 08
07
Export & Share

Export

Export session data in four formats for different audiences: a developer-friendly CSV, machine-readable JSON, a client-facing HTML audit report, or a HAR-compatible file for developer tools. PII can be redacted on export.

TagSentry
Idle
📡
Live
💾
Sessions
⚖️
Diff
🔒
PII
✅
Whitelist
📤
Export
⚙️
Settings
Format
📊
CSV
One row per request
📄
JSON
Full session + raw data
📋
HTML Report
Formatted audit doc
🔧
HAR
DevTools compatible
Options
Include raw payloads
Redact PII values
Replaces PII with [REDACTED]
Include diff vs baseline
📤 Export Session
24 requests · 3 PII findings
A
CSV is best for sharing with developers or importing into Google Sheets. Columns: Timestamp, Vendor, Category, Event, Hostname, URL, Status Code, PII Detected, Whitelisted.
B
JSON Full is the complete machine-readable session. Can be re-imported into TagSentry on another machine, or used in programmatic comparison pipelines.
C
HTML Report is a self-contained, client-ready audit document with vendor summary table, parameter details, PII findings section, and — if enabled — diff vs. baseline.
D
Redact PII toggle replaces detected PII values with [REDACTED] before writing any export file. Always-on recommendation for client-shared documents.
TagSentry Wireframes · 07 of 08
08
Configuration

Settings

Global extension preferences: recording behavior, PII detection toggles, session storage limits, and data management. All settings are persisted in chrome.storage.local.

TagSentry
Idle
📡
Live
💾
Sessions
⚖️
Diff
🔒
PII
✅
Whitelist
📤
Export
⚙️
Settings
Recording
Auto-start on page load
Begin recording without clicking Record
Known vendors only
Hide unrecognized requests from feed
Max stored sessions
50
PII Detection
Email addresses
Phone numbers
IP addresses
SSN patterns
Custom regex patterns
3 patterns configured
Edit →
Data Management
Export all sessions
📦 Backup
Import sessions
📥 Restore
Clear all data
Wipes sessions, settings, whitelist
🗑 Clear
💾 Save Settings
TagSentry v1.0.0
A
Auto-start is recommended for SPAs and high-traffic pages where analytics tags fire before the user can manually click Record. Recording begins immediately on page load.
B
Known vendors only hides all requests that don't match any vendor pattern from the live feed. Useful for focused audits where you only care about recognized martech — cuts noise significantly.
C
Custom PII patterns opens a modal editor with a named list of patterns (name + regex + severity). Test input field validates the regex against sample values before saving.
D
Backup / Restore exports all sessions, settings, and whitelist as a single JSON file. Ideal for onboarding new team members or moving between machines. All data stays local — zero cloud sync.
TagSentry Wireframes · 08 of 08
TS
TagSentry
Product Wireframes · v1.0 · 8 screens · Chrome Extension MV3
Ready for implementation →