Purpose

This recipe instruments a landing page with a complete analytics stack — GA4 for traffic and conversion tracking, heatmaps (PostHog or Hotjar) for behavior visualization, a standardized UTM parameter strategy, and ad platform pixels (Google Ads, Meta) for campaign attribution. The output is a fully tracked landing page where every visit, click, scroll, and conversion is measurable. [src1]

Prerequisites

Deployed landing page — Landing Page Platform Deployment
Google account — for GA4 and GTM at analytics.google.com
Conversion goals defined — what counts as a conversion (form submit, CTA click)
Code editing access — ability to add scripts to landing page <head>
Meta Business Manager (if running Meta ads) — business.facebook.com

Constraints

GA4 is free with no row limits, but data is sampled above 500K sessions. [src1]
Hotjar free: 35 daily session recordings. PostHog free: 1M events/month, 5K replays. Clarity: unlimited and free. [src2] [src4]
Ad blockers block GA4 on 25-40% of desktop traffic. Server-side tagging mitigates but adds complexity. [src3]
Meta Pixel requires verified domain ownership in Facebook Business Manager.
Cookie consent required for EU (GDPR) and some US states. Analytics scripts must respect consent preferences.

Tool Selection Decision

Which path?
├── Free + simple
│   └── PATH A: GA4 + Microsoft Clarity — $0, basic heatmaps + full analytics
├── Free + comprehensive
│   └── PATH B: GA4 + PostHog — $0, advanced heatmaps + session replay
├── Paid + non-technical
│   └── PATH C: GA4 + Hotjar Growth — $49/mo, visual heatmaps + surveys
└── Developer + all-in-one
    └── PATH D: PostHog only — $0, replaces GA4 + heatmaps in one tool

Path	Tools	Cost	Setup Time	Best For
A: GA4 + Clarity	GA4 + Microsoft Clarity	$0	30 min	Budget-conscious, basic needs
B: GA4 + PostHog	GA4 + PostHog Cloud	$0	45 min	Developers, comprehensive tracking
C: GA4 + Hotjar	GA4 + Hotjar Growth	$49/mo	45 min	UX teams, visual insights
D: PostHog Only	PostHog Cloud	$0	30 min	Developers wanting single platform

Execution Flow

Step 1: Set Up Google Tag Manager (GTM)

Duration: 10 minutes · Tool: Google Tag Manager

Create a GTM account and container (Web type). Add the two GTM snippets to your landing page — head snippet as high in <head> as possible, body snippet immediately after <body>.

<!-- GTM head snippet -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

Verify: GTM Preview connects to your page; gtm.js loads with 200 status. · If failed: Check snippet placement and disable ad blockers during testing.

Step 2: Configure GA4 via GTM

Duration: 10-15 minutes · Tool: GA4 + GTM

Create a GA4 property, get Measurement ID (G-XXXXXXXXXX), add GA4 Configuration tag in GTM. Set up custom conversion events for form submissions and CTA clicks. Mark key actions as Key Events in GA4. [src1] [src6]

GA4 Event Tag Configuration:
───────────────────────────────────────
Event: generate_lead (form submission)
Event: cta_click (CTA button clicks)
Trigger: Form Submission or Click matching CSS selector

Verify: Events appear in GA4 Realtime within 30 seconds. · If failed: Check GTM Preview for trigger conditions; AJAX forms need custom event triggers.

Step 3: Add Heatmap and Session Recording Tool

Duration: 10 minutes · Tool: PostHog, Hotjar, or Microsoft Clarity

Add heatmap tracking via GTM Custom HTML tag. PostHog provides click heatmaps, scroll depth, and rage click detection on the free tier. Hotjar provides visual heatmaps with 35 daily recordings for free. Clarity offers unlimited free recordings. [src2]

Verify: Visit page, click and scroll. Session appears in heatmap dashboard within 1-2 minutes. · If failed: Check script loads in DevTools Network tab. Test in incognito if blocked.

Step 4: Implement UTM Parameter Strategy

Duration: 10 minutes · Tool: Spreadsheet + ad platforms

Create standardized UTM naming: always lowercase, hyphens not spaces, consistent source/medium/campaign naming. Add UTMs in ad platform tracking fields, not destination URL fields. [src5]

UTM Template:
───────────────────────────────────────
Google Ads: utm_source=google&utm_medium=cpc&utm_campaign={name}
Meta Ads:   utm_source=facebook&utm_medium=paid-social&utm_campaign={name}
Email:      utm_source=mailchimp&utm_medium=email&utm_campaign={name}

Verify: Click test link with UTMs, check GA4 Realtime for correct source/medium. · If failed: Check UTMs are appended correctly; verify redirects preserve query parameters.

Step 5: Install Ad Platform Conversion Pixels

Duration: 10-15 minutes · Tool: GTM + Google Ads + Meta

Set up Google Ads Conversion Linker (All Pages trigger) and Conversion Tracking tag (form submit trigger). Add Meta Pixel base code (All Pages) and Lead event (form submit). [src3] [src7]

Verify: Meta Pixel Helper shows PageView + Lead events. Google Ads shows "Recording conversions" within 24 hours. · If failed: Verify Pixel ID and Conversion ID are correct.

Step 6: Verify All Tracking End-to-End

Duration: 10 minutes · Tool: Browser + all dashboards

Run complete verification: open page in incognito with UTMs, check GA4 Realtime, scroll page, submit form, verify events in GA4, Google Ads, Meta, and heatmap tool.

Verify: All events fire in all connected platforms. · If failed: Use GTM Preview/Debug mode to identify non-firing tags.

Output Schema

{
  "output_type": "analytics_instrumented_page",
  "format": "configured tracking stack",
  "columns": [
    {"name": "ga4_measurement_id", "type": "string", "description": "GA4 Measurement ID", "required": true},
    {"name": "gtm_container_id", "type": "string", "description": "GTM Container ID", "required": true},
    {"name": "heatmap_tool", "type": "string", "description": "Heatmap platform and project ID", "required": true},
    {"name": "conversion_events", "type": "array", "description": "Configured conversion events", "required": true},
    {"name": "utm_template", "type": "string", "description": "Standardized UTM naming convention", "required": true},
    {"name": "ad_pixels", "type": "array", "description": "Ad platform pixels configured", "required": false}
  ],
  "expected_row_count": "1",
  "sort_order": "N/A",
  "deduplication_key": "ga4_measurement_id"
}

Quality Benchmarks

Quality Metric	Minimum Acceptable	Good	Excellent
GA4 data collection	Page views recording	Events + conversions	Enhanced measurement + custom dims
Heatmap coverage	Click heatmap working	Click + scroll + replay	Rage clicks + form analytics
UTM attribution	Source/medium tracked	Campaign + content tracked	Full funnel attribution
Ad pixel accuracy	Pixel fires on page load	Conversion events fire	Enhanced + server-side enabled
Data completeness	> 60% of traffic tracked	> 75% tracked	> 90% (server-side)

If below minimum: Check GTM Preview for tag firing issues. Implement server-side tracking if data completeness is below 60%.

Error Handling

Error	Likely Cause	Recovery Action
GA4 Realtime shows no data	GTM container not published	Publish GTM container; verify GA4 Configuration tag
"Not set" in source/medium	UTMs stripped by redirect	Check redirects preserve query parameters
Heatmap shows no sessions	Script blocked by ad blocker	Test in incognito; consider self-hosted PostHog
Meta Pixel Helper error	Incorrect Pixel ID	Verify Pixel ID in Events Manager
Google Ads "Unverified"	Conversion Linker missing	Add Conversion Linker tag with All Pages trigger
Double-counting conversions	Multiple tags for same event	Use GTM tag sequencing; add dedup conditions

Cost Breakdown

Component	Free Tier	Paid Tier	At Scale
GA4	$0 (unlimited standard)	$0	$150K+/yr (GA4 360)
GTM	$0 (unlimited)	$0	$0
Heatmaps (PostHog)	$0 (1M events, 5K replays)	Pay-per-use	Pay-per-use
Heatmaps (Hotjar)	$0 (35 sessions/day)	$49/mo Growth	Custom Enterprise
Heatmaps (Clarity)	$0 (unlimited)	$0	$0
Ad pixels	$0	$0	$0
Total	$0	$0-49/mo	$49-200/mo

Anti-Patterns

Wrong: Hardcoding analytics scripts without GTM

Adding GA4, Hotjar, and pixel scripts directly into HTML makes updates require code deployments. Every new tag means developer time and deployment risk. [src3]

Correct: Use GTM for all tracking scripts

Deploy GTM once, manage all tags from GTM dashboard. Changes go live instantly without code deployments.

Wrong: Ignoring ad blocker impact on data

Building analytics without accounting for ad blockers gives false confidence. If 30% of visitors block GA4, conversion calculations are wrong. [src2]

Correct: Monitor blocked rate and implement fallbacks

Use server-side GTM or proxy analytics through your own domain to reduce blocking. At minimum, acknowledge the gap in reporting.

When This Matters

Use this recipe when the agent needs to instrument a landing page with analytics — from basic page views through conversion events, heatmaps, and ad pixel attribution. Requires a deployed landing page with code editing access.

Analytics Implementation for Landing Pages