# Welcome to Blueprint 👋 Blueprint is your toolkit for **planning**, **documenting**, and **delivering** GA4 and cross-domain tracking. You keep project details, measurement plans, code snippets, and step-by-step guides in one place—so you and your team (or client) always know what’s implemented and what’s next. This guide explains how the app is organized and **where to go for what you want to do**. --- ## Quick Start 1. **Click Project** in the top bar and **create a project** (or choose an existing one). Everything you do—code, checklist, framework—is tied to the current project. 2. **Add your site details** in the Project panel: **domains** (one per line), **GA4 Measurement ID**, and optionally **Measurement Protocol API Secret** (for server-side) and **GA4 Property ID** (for DebugView/Realtime links and “Recent events in GA4” when testing). 3. **Use the sidebar** to open the section you need: **Cross Domain** for linker and config code, **Server-side** for the Measurement Protocol snippet and Event builder, **Measurement Framework** to define events and parameters, **Implementation Guides** for step-by-step docs, **Implementation Checklist** to track progress. 4. **Sign in** to sync projects, guides, and frameworks across devices. **Pricing** shows plans and **Subscribe** for more projects. --- ## How the app fits together - **Project** = one client or site. Domains, Measurement ID, API secret, and (optional) GA4 Property ID live here. So do project notes and the **Export deliverable** option (single HTML/PDF for client handoff). - **Sidebar sections** = the tools. Cross Domain, Measurement Framework, Server-side, Implementation Guides, Implementation Checklist, Implementation Tools (Snippet Library, GTM Integration, Testing & Validation), Stakeholder Interviews, Valued Resources, Account. What you see depends on your role (e.g. Admin only for admins). - **Cross Domain** has an **Overview** (and Tag communication & taxonomy with quick links to Event builder and Framework), **Installation** (linker and GA4 config code for GTM or direct install), and **Configurations** (domain list, tag setup). - **Implementation Tools** is one sidebar item with tabs: **Snippet Library**, **GTM Integration**, **Testing & Validation**. When you’re not sure where something lives, think: “Is it project-level (Project panel), code (Cross Domain / Server-side / Snippet Library), planning (Framework / Checklist / Guides), or something else (GTM, Interviews, Resources, Account)?” --- ## When you want to… ### …get code for your site - **Cross Domain** → **Installation** (and **Configurations**): copy the cross-domain linker script and GA4 Configuration setup (domain list, linker params) for GTM or direct use. - **Server-side**: copy or download the full GA4 Measurement Protocol snippet (Measurement ID + API secret from your project). Use the **Event builder** to build and **Send test event**; add **GA4 Property ID** in the project to get Open DebugView/Realtime and **Recent events in GA4** so you can confirm events arrived. - **Snippet Library** (under Implementation Tools): reusable snippets (GA4, GTM, cross-domain, server-side, etc.) with tags. Placeholders like `{{MEASUREMENT_ID}}` and `{{DOMAINS_ARRAY}}` are filled from the current project when you copy. ### …plan what to implement and track progress - **Measurement Framework**: define objectives, events, and parameters. Becomes the source of truth for what you’re implementing; you can export it and use it in GTM Integration (framework comparison) and Implementation Guides. - **Implementation Checklist**: per-project checklist by phase (Pre-implementation → GTM → Config → Testing → Documentation). Check items as done; the **guide** holds the actual steps and code. - **Implementation Guides**: step-by-step documents with optional code per step (bespoke, server-side, gtag, or saved events). Use **Generate from gaps** (if you have AI Assist) to create a guide from missing events in your framework. **Export to Markdown** to download. Use the **checklist** for “done / not done” and the **guide** for “how.” ### …test that events reach GA4 - **Server-side** → Event builder: **Send test event** (or **Validate only**). With **GA4 Property ID** set in the project, use **Open DebugView** / **Open Realtime** and **Fetch recent events** in the “Recent events in GA4” panel to confirm your event. - **Implementation Tools** → **Testing & Validation**: manual testing steps and validation tools (e.g. Measurement ID or page URL) alongside GA4 DebugView and GTM Preview. ### …hand off to a client or team - **Project panel** → **Export deliverable**: build one HTML (or print to PDF) with cover, table of contents, implementation guide, framework grid, checklist, and notes. - **Implementation Guides** → **Export to Markdown**: download a guide as `.md`. - **GTM Integration** → **Export to GTM**: generate a GTM-ready JSON (Measurement ID, domain list, GA4 Config tag). ### …capture requirements from documents - **Project panel** → **AI: Extract requirements**: paste RFP text, meeting notes, or emails (or **Import from URL** for Google Docs, GitHub, Pastebin, Notion). The AI extracts objectives, KPIs, events, stakeholders, and measurement framework rows. **Apply to project** to populate the project and framework grid. ### …see what’s already in GTM vs your plan - **Implementation Tools** → **GTM Integration**: **Import from GTM** (upload container JSON) to see tags and triggers; **Framework comparison** to compare your Measurement Framework with the imported container and spot gaps; **Export to GTM** to generate a GTM JSON from your project. ### …run stakeholder interviews - **Stakeholder Interviews**: add stakeholders and **Takeaways** per project; **Edit** to update takeaways, **Copy takeaways to project notes** to pull them into the Project panel. Use the **question bank** and **templates** (one-pager, agenda, summary) set by admins. ### …find docs and links - **Valued Resources**: curated links (GA4/GTM docs, testing tools, best practice) in sections defined by admins. ### …manage your account - **Account**: **Sign out**; **View invoices & billing** (Stripe portal if subscribed); **Backup & restore** (export/import all projects, guides, frameworks as JSON); **Delete account**. --- ## Learn more - **Full implementation walkthrough** (GA4 + GTM + Blueprint, step by step): [Full implementation guide](FULL_IMPLEMENTATION_STEP_BY_STEP.md) (or [full-implementation-guide.html](full-implementation-guide.html)). - **Technical setup** (running locally, deployment, Supabase, Stripe): [README](../README.md).