Blueprint

Full implementation guide: GA4 + GTM + Blueprint (step by step)

This guide walks you through a complete tracking implementation using Blueprint as your planning and code hub, Google Analytics 4 (GA4) as your analytics property, and Google Tag Manager (GTM) as your tag delivery layer. We use blueprint-toolkit.com as the example site so you can follow along with a real scenario.

If you follow every step, you will know exactly what to do in GA4, in GTM, and in Blueprint—and how they connect.

What you’ll have when you’re done

A GA4 property with a web data stream for your site.
A GTM container installed on your site, firing a GA4 Configuration tag and cross-domain linker so sessions are preserved across domains.
A Blueprint project (e.g. “Blueprint Toolkit”) with domains, Measurement ID, optional server-side API secret, Measurement Framework, Implementation Checklist, and Implementation Guide—all in sync with what’s in GTM and GA4.
Optional: server-side events via GA4 Measurement Protocol, with code generated and managed in Blueprint.
Testing via GA4 DebugView, GTM Preview, and Blueprint’s testing tools.

Prerequisites

Access to Google Analytics (analytics.google.com) with permission to create properties.
Access to Google Tag Manager (tagmanager.google.com) with permission to create containers and publish.
Access to Blueprint (e.g. blueprint-toolkit.com).
A website (or staging site) where you can add the GTM container snippets (e.g. in the <head> and after <body>).
Sign in to Blueprint recommended so projects, guides, and frameworks sync; you can also use Blueprint as a guest (data stays local).

Which path to follow

Client-side only (no server-side): Follow Steps 1–5, then Step 7 (Implementation guide and checklist), Step 8 (Testing), and Step 9 (Go live). Skip Step 6. You’ll have GA4 + GTM + Blueprint with client-side tracking and cross-domain only.
Full implementation (with server-side): Follow all steps (1–9). Use Step 6 for Measurement Protocol and the Event builder; use Step 8 to test both client and server events.

Step 1: Create a GA4 property and web data stream

Where: Google Analytics (analytics.google.com)

In GA4, go to Admin (gear icon) → Property column → Create property (or use an existing property).
Enter a Property name (e.g. “Blueprint Toolkit”) and set time zone and currency. Click Next and complete the flow.
In the same property, go to Admin → Data streams → Add stream → Web.
Enter your Website URL (e.g. https://www.blueprint-toolkit.com) and a Stream name (e.g. “Blueprint website”). Click Create stream.
On the stream details page, copy your Measurement ID (format G-XXXXXXXXXX). You will use this in GTM and in Blueprint.
(Optional, for server-side tracking later) In Admin → Data streams → your web stream → Measurement Protocol API secrets → Create, name it (e.g. “Server-side”), and copy the API secret. Store it securely; you’ll add it to Blueprint in a later step.

Outcome: You have a GA4 property, a web data stream, and a Measurement ID. Optionally you have an API secret for Measurement Protocol.

Step 2: Create a GTM container and install it on your site

Where: Google Tag Manager (tagmanager.google.com) and your website code.

In GTM, click Create Account (or use an existing account). Name the account (e.g. “Blueprint”).
Create a Container for Web, and name it (e.g. “Blueprint Toolkit website”). Click Create.
You’ll see two code snippets:
- Snippet 1: Paste as high as possible in the <head>.
- Snippet 2: Paste immediately after the opening <body> tag.
Add both snippets to every page of your site (e.g. blueprint-toolkit.com). If you use a CMS or template, add them in the global header/footer so they load on all pages.
In GTM, click Submit → Publish (or Skip for now) so the container is live. You can also use Preview to test before publishing.

Outcome: GTM is installed on your site. Tags you add in GTM will run on every page where the container is loaded.

Step 3: Create a Blueprint project and add site details

Where: Blueprint (e.g. blueprint-toolkit.com)

Open Blueprint and click Project in the top bar.
Choose — New project — or click New. Enter a Project name (e.g. “Blueprint Toolkit”).
In the Project panel, fill in:
- Domains: One per line, e.g.
  www.blueprint-toolkit.com
  blueprint-toolkit.com
  (Add all domains that should share the same GA4 session; these will be used in Cross Domain and Installation code.)
- GA4 Measurement ID: Paste your Measurement ID from Step 1 (e.g. G-XXXXXXXXXX).
- GTM Container ID (optional): For reference/handoff, e.g. GTM-XXXXXXX.
- Measurement Protocol API Secret (optional): Only if you plan to use server-side tracking; paste the API secret from Step 1.
- GA4 Property ID (optional): The numeric property ID from GA4 Admin → Property settings. If you add it, Blueprint can show Open DebugView and Open Realtime links and a Recent events in GA4 panel when you send test events from the Server-side section—useful for Step 8.
Click outside the panel or switch section to ensure the project is saved (Blueprint saves as you edit when signed in; when guest, data is local).

Outcome: You have a Blueprint project that represents the same site as your GA4 stream and GTM container, with domains and Measurement ID that will be used in all Blueprint-generated snippets.

Step 4: Get cross-domain and GA4 config code from Blueprint

Where: Blueprint → Cross Domain (sidebar) → Installation tab (and Configurations tab for domain list)

In Blueprint, open Cross Domain from the sidebar. Ensure your new project is selected in the top bar.
Use the Overview tab to read the problem and solution if you’re new to cross-domain tracking (same user across multiple domains = need linker and consistent client_id).
Domains from your project appear in the Installation and Configurations areas. If they’re missing, go back to the Project panel and add them.
Open the Installation tab. You’ll see:
- Step-by-step instructions for GTM, direct HTML, or Adobe Launch.
- A cross-domain linker script (or a Custom HTML tag for GTM) that decorates links and sets the linker parameter for the GA4 tag.
- Download Full Script (if available) for a single file with the linker logic.
In the Installation or Configurations tab you’ll get:
- A domain list (array of your project’s domains) to copy into GTM.
- Recommended GA4 Configuration tag settings (Measurement ID, cross-domain linker parameters).
- A Custom HTML tag that runs the cross-domain linker; it must fire before the GA4 Configuration tag.

What to do in GTM:

Variable: Domain list
Create a Variable (e.g. Custom JavaScript) that returns an array of your domains, e.g.
['www.blueprint-toolkit.com','blueprint-toolkit.com'].
Copy the exact array from Blueprint’s Cross Domain → Installation or Configurations tab (it uses the current project’s domains).
Tag: Cross-domain linker (Custom HTML)
Create a Custom HTML tag that runs the Blueprint-provided linker script (or the script you downloaded). Set the trigger to All Pages (or as Blueprint suggests), and ensure this tag fires before your GA4 Configuration tag (use tag sequencing if needed).
Tag: GA4 Configuration
Create a Google Analytics: GA4 Configuration tag. Set Measurement ID to your project’s Measurement ID (same as in Blueprint). In Fields to Set (or Configuration Settings), add the linker parameter so GA4 uses the same client_id across domains (Blueprint’s Cross Domain → Installation shows the exact linker: { domains: [...] } or similar). Use the domain list variable you created. Trigger: All Pages.

Order of execution: Cross-domain linker → GA4 Configuration. Publish the container.

Outcome: Your site, when loaded with this GTM container, sends page views to GA4 and keeps the same client_id across the domains you listed (cross-domain tracking).

Step 5: Define your measurement framework in Blueprint

Where: Blueprint → Measurement Framework section

In Blueprint, open Measurement Framework from the sidebar. Select your project.
Choose Business type and Objectives / channels (e.g. acquisition, retention) so the grid is pre-filled with suggested objectives, events, and parameters.
Edit the grid: add or remove objectives, key metrics, events (e.g. page_view, sign_up, purchase), and parameters (e.g. page_location, value, currency). This becomes your “source of truth” for what you plan to implement.
Use Export (CSV or Markdown) if you need to share the framework with stakeholders or with GTM implementers.
(Optional) Link this framework to your project (if your Blueprint version supports “link project to framework”) so the same framework is used in GTM Integration and Implementation Guides.

What to do in GTM:

For each event in your framework that you want to collect (e.g. page_view is already from the GA4 Config tag; add sign_up, button_click, etc.):
- Create a GA4 Event tag. Set Configuration Tag to your GA4 Configuration tag, Event Name to the event name from the framework. Add Event Parameters (e.g. page_location, page_title) as needed.
- Create a Trigger (e.g. Click – All Elements, or Form Submit, or Custom Event) that fires when that action happens.
- Attach the trigger to the GA4 Event tag. Publish.

Outcome: Your Blueprint project has a clear measurement framework; GTM has GA4 Event tags that implement those events so GA4 receives the data.

Step 6: (Optional) Server-side tracking with Blueprint and GA4 Measurement Protocol

Where: GA4 (API secret), Blueprint → Server-side (sidebar), your backend

You should already have created a Measurement Protocol API secret in GA4 (Step 1) and added it to your Blueprint project (Step 3).
In Blueprint, open Server-side from the sidebar. You’ll see a full server-side snippet (e.g. Node.js or similar) that includes:
- Your project’s Measurement ID and API Secret (from the project).
- A sendToGA4(clientId, events) (or similar) function that POSTs to GA4’s mp/collect endpoint.
Use Copy or Download to get the snippet. Deploy it in your backend (e.g. serverless function, API route) so that when a user does an action (e.g. completes a form, makes a purchase), your server calls sendToGA4(clientId, events) with the correct client_id (from the client, e.g. from a cookie or from the GA4 gtag) and the event payload.
In the same Server-side section, use the Event builder (event name + parameters) and Send test event to verify GA4 receives the event. Use Validate only to hit the debug endpoint without sending to GA4, or Send to send a real test event. If your project has a GA4 Property ID (Step 3), you’ll get Open DebugView and Open Realtime links and a Recent events in GA4 panel (with Fetch recent events) so you can confirm your event arrived.
Saved events (per project) let you store event definitions and optionally include in snippet so they’re part of the downloaded server script.

Outcome: Optional server-side events are sent to GA4 via Measurement Protocol; Blueprint is the place where you design and copy the server-side code and test events.

Step 7: Implementation guide and checklist in Blueprint

Where: Blueprint → Implementation Guides and Implementation Checklist

Implementation Guides
In Blueprint, open Implementation Guides from the sidebar. Create a new guide (e.g. “Blueprint Toolkit – GA4 & GTM setup”). Add steps that match what you did: e.g. “Step 1: Create GA4 property and data stream”, “Step 2: Install GTM container”, “Step 3: Add Blueprint project and domains”, “Step 4: Configure cross-domain and GA4 Config tag in GTM”, etc. For each step, paste in the exact code from Blueprint’s Cross Domain → Installation or Server-side so the guide is the single place your team or client follows. Use Export to Markdown to download the guide.
Implementation Checklist
Open Implementation Checklist from the sidebar. You’ll see phases (e.g. Pre-implementation, GTM Setup, Configuration, Testing, Documentation). Check off items as you complete them (e.g. “GA4 property created”, “GTM container installed”, “Cross-domain linker tag added”, “GA4 Configuration tag firing”, “Key events implemented”). The checklist is per project, so it stays aligned with your Blueprint project.
Use the guide and checklist together: the guide is the step-by-step “how”; the checklist is the “done / not done” status. Both live in Blueprint and can be exported or shared (e.g. Export deliverable from the Project panel for a single HTML document).

Outcome: You have a written implementation guide and a checklist in Blueprint that reflect the same work you did in GA4 and GTM, so anyone following the guide knows what to do in all three tools.

Step 8: Testing and validation

Where: GA4 DebugView and Realtime, GTM Preview, Blueprint → Implementation Tools → Testing & Validation tab, and Blueprint → Server-side (Event builder)

GA4 DebugView (client-side)
In GA4, go to Admin → DebugView. On your site, add ?debug_mode=true to the URL (or enable debug in the GA4 tag in GTM). Reload and click around. You should see events (e.g. page_view, and any custom events) in DebugView in real time. Check that client_id is consistent when you move across domains (if you implemented cross-domain).
GTM Preview
In GTM, click Preview, enter your site URL (e.g. https://www.blueprint-toolkit.com), and use Tag Assistant to confirm which tags fire on each page and each interaction. Fix any missing triggers or tags.
Blueprint: Server-side test events and GA4 confirmation
In Blueprint, open Server-side. Use the Event builder to set an event name and parameters, then click Send test event. If your project has a GA4 Property ID set (Project panel), after sending you’ll see:
- Open DebugView and Open Realtime links (same property) so you can open GA4 in another tab.
- A Recent events in GA4 panel; click Fetch recent events to load the latest events from the GA4 Realtime API. Your sent event is highlighted so you can confirm it arrived.
  Use Validate only first if you want to check the payload without sending to GA4.
Blueprint: Testing & Validation
Open Implementation Tools from the sidebar, then the Testing & Validation tab. Use the manual testing steps and any validation tools (e.g. paste Measurement ID or a page URL) to verify key events or hits. Use this together with GA4 DebugView and GTM Preview.

Outcome: You’ve confirmed that GA4 receives page views and key events, that GTM fires the right tags, and that cross-domain and (if used) server-side events work. Blueprint’s Event builder and Recent events in GA4 let you confirm server-side test events end up in GA4.

Troubleshooting

Cross-domain: client_id changes when moving between domains
Ensure the cross-domain linker tag fires before the GA4 Configuration tag (use GTM tag sequencing: GA4 Config tag fires after the linker tag). The linker must run on every page and decorate links to your other domains. Confirm the domain list in GTM matches the domains in Blueprint and that both linker and GA4 Config use the same list.
DebugView shows no events
Confirm debug mode is on: add ?debug_mode=true to the page URL, or in GTM enable the debug mode in the GA4 Configuration or GA4 Event tag. Ensure you’re in the correct GA4 property and that the stream’s Measurement ID matches the one in GTM and Blueprint. Wait a few seconds; events can take a moment to appear.
GTM: tags don’t fire or fire in the wrong order
Use Preview and the Tag Assistant to see firing order and triggers. Check that triggers (e.g. All Pages, Click) are set correctly and that tag sequencing is configured when one tag must run before another (e.g. linker before GA4 Config).
Server-side test event not visible in GA4
In Blueprint, use Validate only first to confirm the payload is valid. Then Send and, if you have GA4 Property ID set, use Fetch recent events in the Recent events in GA4 panel to confirm the event. In GA4, check DebugView or Realtime (same property as the Property ID); allow a few seconds for the event to appear.

Pre-go-live checklist

Before you publish and remove debug mode, confirm:

GTM: Cross-domain linker tag and GA4 Configuration tag (and any GA4 Event tags) are configured and firing in Preview on all relevant pages.
GA4: DebugView shows expected events (page_view and key custom events) and, if using cross-domain, the same client_id across domains.
Server-side (if used): At least one test event sent from Blueprint’s Event builder appears in GA4 (DebugView or Recent events).
Blueprint: Project saved with correct domains, Measurement ID, and (if used) API secret and GA4 Property ID; Implementation Checklist and Implementation Guide updated.
Deliverable (optional): If you’re handing off to a client, Export deliverable from the Project panel and confirm the HTML/PDF includes the sections you need.

Step 9: Go live and verify

In GTM, Submit and Publish the container so the latest version is live.
Remove debug mode (e.g. remove ?debug_mode=true and any debug-only tags).
In GA4, use Reports → Realtime and then Engagement / Events over the next hours and days to confirm data is flowing.
Keep your Blueprint project up to date: if you add a new domain or event, update the project and the framework, then update GTM and GA4 accordingly. Use the same Implementation Guide and Checklist for future changes or for the next site.

Outcome: Your full implementation is live: GA4 + GTM + Blueprint are aligned, and you have one place (Blueprint) that documents and drives what’s in GTM and GA4.

Quick reference: where to do what

Task	GA4	GTM	Blueprint
Create property & stream	✅ Admin → Property, Data streams	—	—
Get Measurement ID	✅ Stream details	—	Paste in Project
Get API secret (server-side)	✅ Stream → MP API secrets	—	Paste in Project
GA4 Property ID (for DebugView/Realtime links, Recent events)	✅ Admin → Property settings	—	Optional in Project
Install container on site	—	✅ Copy snippets to site	—
Domains list for cross-domain	—	✅ Variable (from Blueprint)	✅ Project → Domains
Cross-domain linker code	—	✅ Custom HTML tag	✅ Cross Domain → Installation
GA4 Configuration tag	—	✅ GA4 Config + linker	✅ Cross Domain → Installation
Event definitions	—	✅ GA4 Event tags + triggers	✅ Measurement Framework
Server-side snippet	—	—	✅ Server-side → copy/download
Step-by-step guide	—	—	✅ Implementation Guides
Progress checklist	—	—	✅ Implementation Checklist
Test events (client)	✅ DebugView	✅ Preview	✅ Implementation Tools → Testing & Validation
Test events (server)	✅ DebugView, Realtime	—	✅ Server-side → Event builder → Send test event; Recent events in GA4 if Property ID set

Example: blueprint-toolkit.com in one sentence

GA4 has a property and web stream (Measurement ID + optional API secret); GTM is installed on the site and has a cross-domain linker tag and a GA4 Configuration tag (and any GA4 Event tags) using the domain list and Measurement ID; Blueprint has a project “Blueprint Toolkit” with those domains and that Measurement ID, a measurement framework, an implementation guide that describes these steps, and a checklist to track completion—so one implementation, three tools, one source of truth in Blueprint.

For more on Blueprint features (GTM import/export, snippet library, stakeholder interviews, etc.), see the Comprehensive Guide and the in-app User guide.