Skip to main content

Architecture

Full data flow​

┌────────────────────────────────────────────────────────────────┐
│                Browser (biosphereskincare.com)                │
│                                                                │
│   1. GTM snippet in <head> + <body>                            │
│   2. window.dataLayer.push({event:'add_to_cart', ...})   ◄──── │ ← YOUR JOB
│                          │                                     │
│                          ▼                                     │
│   3. GTM Web (client-side container)                           │
│      ├─ Meta Pixel: fbq('track', 'AddToCart', {...})          │
│      └─ Forwards to GTM Server ────────────────────┐           │
│                                                    │           │
└────────────────────────────────────────────────────┼───────────┘
                                                     │
                                                     ▼
┌────────────────────────────────────────────────────────────────┐
│       GTM Server-Side (analytics.biosphereskincare.com)       │
│                          │ hosted on Stape                     │
│   4. Enrichment (IP, UA, _fbp, _fbc, SHA-256 PII)              │
│      │                                                         │
│      ├──► Meta Conversions API   (shared event_id = dedup)    │
│      ├──► GA4 Measurement Protocol                             │
│      └──► Google Ads Enhanced Conversions / Conversion API     │
└────────────────────────────────────────────────────────────────┘

Components​

1. Biosphere site​

  • Stack: custom (your code).
  • Responsibility: push the right data at the right moment to window.dataLayer.

2. GTM Web (served from load.analytics.biosphereskincare.com)​

  • Client-side GTM container served first-party (bypasses ad blockers).
  • Reads dataLayer and triggers:
    • Meta Pixel (browser-side, captures _fbp / _fbc).
    • GA4 → GTM Server (server-side forwarding).
    • Google Ads remarketing tag.

3. GTM Server (analytics.biosphereskincare.com)​

  • Server-side GTM container hosted on Stape.
  • Receives hits from GTM Web.
  • Enriches (server IP, User-Agent, SHA-256 hash of PII).
  • Fans out to:
    • Meta CAPI (with same event_id as Pixel for dedup).
    • GA4 Measurement Protocol (first-party cookies, clean attribution).
    • Google Ads (Enhanced Conversions, GCLID matching).

4. Stape​

  • Hosting platform for server-side GTM.
  • Manages SSL, subdomain mapping, power-ups (cookie keeper, geo headers, etc.).

Pixel ↔ CAPI deduplication​

Meta would otherwise count a Purchase twice (Pixel browser-side + CAPI server-side). To dedupe, both sides must share the same event_id.

→ You don't have to do anything: GTM generates a unique event_id on the client and propagates it to the server. As long as your purchase carries a unique transaction_id, dedup works.

Subdomains & CNAMEs​

SubdomainTypePoints toRole
analytics.biosphereskincare.comCNAME<id>.stape.ioServer GTM endpoint
load.analytics.biosphereskincare.comCNAME<id>.stape.ioServes gtm.js first-party

The exact CNAME targets will be provided by the agency once the Stape container is created.

Why server-side?​

Without server-sideWith server-side (Stape)
Pixel blocked by ad blockers → ~30% events lostFirst-party endpoint → only 2-5% lost
_fbp cookie set by Meta → max 7 days on Safari (ITP)Cookie set by your domain → full lifetime
iOS 14+ ATT: massive signal lossCAPI sends from your server, bypasses ATT
Meta EMQ typically 4-5/10Meta EMQ typically 8-10/10
Degraded GA4 attributionClean GA4 attribution

Project phasing​

  1. Phase 1 (dev) — implement the 10 core funnel events (PLP → purchase).
  2. Phase 2 (agency) — GTM Web + Server + Stape configuration.
  3. QA — cross-validation in staging (test scenarios).
  4. Go-live — production deployment + 14-day monitoring (Meta EMQ, GAds conversions, GA4 events).
  5. Iteration — add Phase 2 (acquisition) + Phase 3 (optional) events once core is stable.