Overview
Dev ↔ agency contract
┌─────────────────────────┐
│ Biosphere site │
│ (custom) │
└───────────┬─────────────┘
│ dataLayer.push
▼
┌─────────────────────────┐ ┌──────────────────┐
│ GTM Web │ ──────► │ Meta Pixel │
│ client-side container │ │ (browser) │
└───────────┬─────────────┘ └──────────────────┘
│ HTTPS (first-party)
▼
┌─────────────────────────────────────────────┐
│ GTM Server (Stape) │
│ analytics.biosphereskincare.com │
│ │
│ ├─► Meta CAPI (same event_id = dedup) │
│ ├─► GA4 Measurement Protocol │
│ └─► Google Ads Enhanced Conversions │
└─────────────────────────────────────────────┘
Biosphere (dev):
- Push events to
window.dataLayerfor each user action. - Include the parameters listed in this spec (item id, price, currency, etc.).
- For events that happen after login or form submit, include
user_data(email, phone…).
Agency (Charles):
- Configure GTM Web (dataLayer variables, custom event triggers, Meta Pixel + GA4 + Google Ads tags).
- Configure GTM Server on Stape (CAPI tag, GA4 MP, Ads Conversion API).
- Set up Pixel/CAPI deduplication via shared
event_id. - Connect the Meta Catalog (product feed) to the
item_idyou send. - Define Google Ads conversion actions and custom audiences.
What to track (summary)
| User action | dataLayer event | Notified platforms | Phase |
|---|---|---|---|
| Product list rendered | view_item_list | GA4, GAds dynamic | 1 |
| Click product in a list | select_item | GA4 | 1 |
| Product detail page | view_item | GA4, Meta ViewContent, GAds | 1 |
| Add to cart | add_to_cart | GA4, Meta AddToCart, GAds | 1 |
| Cart page | view_cart | GA4 | 1 |
| Remove from cart | remove_from_cart | GA4 | 1 |
| Start checkout | begin_checkout | GA4, Meta InitiateCheckout, GAds | 1 |
| Shipping submitted | add_shipping_info | GA4 | 1 |
| Payment submitted | add_payment_info | GA4, Meta AddPaymentInfo | 1 |
| Order confirmed | purchase ⭐ | GA4, Meta Purchase, GAds conv. | 1 |
| Sign up | sign_up | GA4, Meta CompleteRegistration | 2 |
| Lead form / newsletter | generate_lead | GA4, Meta Lead, GAds | 2 |
| On-site search | search | GA4, Meta Search | 2 |
| Refund issued | refund | GA4 | 3 |
| Promo banner shown / clicked | view_promotion / select_promotion | GA4 | 3 |
| Page view (SPA only) | page_view | GA4, Meta PageView | 3 |
What you don't have to do
- ❌ Install Meta Pixel — agency injects via GTM.
- ❌ Install
gtag.js/ GA4 — same. - ❌ SHA-256 hash PII — GTM Server does it before sending to Meta.
- ❌ Manage
_fbp/_fbccookies. - ❌ Filter events based on consent — Consent Mode v2 handles it via GTM.
What you must do
- Insert the GTM snippet (provided by agency) in
<head>and<body>. - Push
dataLayerevents at the right times (this spec). - Add the CNAME records for the server-side subdomains.
- (Optional) Expose a product feed for the Meta Catalog.