# attribution diagnostic mockup - AdsMetri

Single-page diagnostic for how well Meta spend ties back to Shopify revenue — source health, coverage, match quality, unmatched dollars, manual mapping.

Type: project

Published: 2026-05-26

[Original page](<https://artlu.ai/project/attribution-diagnostic-mockup-adsmetri>)

[Browse this group](<https://artlu.ai/ai/groups/adsmetri.md>)

Parent project: AdsMetri

Recorded status: launched

Updated: 2026-05-25T19:44:14.106Z

Technologies: HTML, CSS, JavaScript

## Details

**What is the attribution diagnostic?**
A separate page in AdsMetri that answers "do we trust the numbers on the dashboard?" — it shows where Shopify, GA4, and Meta agree and disagree, and which dollars are unattributed.

**What it does**
Seven stacked sections:
1. Source status — three cards (Shopify / GA4 / Meta) with last-sync time, errors, action.
2. Tracking coverage — % of spend on campaigns with an exact UTM match, gap to 95% target, bucket breakdown (Exact UTM / Manual / Estimated / Unmatched).
3. Source comparison — Shopify vs GA4 vs Meta side by side, with deltas vs Shopify as source of truth, plus the standing reconciliation rules.
4. Campaign match quality — every active campaign with its match method, confidence, freshness, and a quick action (View / Edit mapping / Review / Map).
5. Unmatched revenue — Shopify orders the system could not tie back to a Meta campaign, grouped by likely source, with "map" actions.
6. Tracking setup — pixel, CAPI, GA4 ecommerce, UTM template, post-purchase survey checks.
7. Manual mapping drawer — slide-out for fixing a single campaign: confidence selector (Manual / Estimated / Unmatched), notes, save.

**How it works**
Single self-contained HTML file. Reuses the theme-compact palette and primitives from the real React app (rounded-[6px] cards, rounded-full pills, theme-compact tokens from index.css) so the mockup reads as the same product. Source priority is fixed throughout — Shop is the green source of truth, GA4 amber-ish, Meta blue. Confidence states use the same four colors across all sections (green exact / indigo manual / amber estimated / red unmatched). Fully mobile-responsive — hamburger sidebar, single-column stacking, horizontal-scrolling tables, full-width drawer below 480px.

**Built with**
HTML · CSS · vanilla JS. Mirrors theme-compact tokens, button/pill/card chrome from the live AdsMetri React UI.

## Links

[Site or demo](<https://adsmetri.com/>)

An interactive demo is embedded on the original page.

## Related build notes

[attribution diagnostic — separating the data-quality view from the dashboard](<https://artlu.ai/ai/log/day-70-attribution-diagnostic-separating-the-data-quality-view-from-the-dashboar.md>)


Status and dates describe the published record, not a recent test of an external service. Missing details are not inferred. Public links do not imply an open-source licence or permission to reuse material.

[Directory](<https://artlu.ai/llms.txt>)