Conversion Tracking (GA4 + Meta Pixel + GTM)

Track storefront conversions — booking confirmations, gift-card purchases, page views — in Google Analytics 4, Meta Pixel, and Google Tag Manager. Live test card confirms events are landing. Consent-gated so nothing fires before the customer accepts.

Where to find it — Web: Storefront → Tracking. PRO required. Owner / Manager edit.

TL;DR

• Three IDs supported: GA4 (G-...), Meta Pixel (15-16 digits), GTM (GTM-...).
• TikTok / LinkedIn / Hotjar / Clarity / etc. run through GTM.
• Events: PageView, Purchase (booking + gift card). Stable eventId per booking for dedup with Meta CAPI server-side (future).
• Live test card polls every 5 seconds — confirm setup without waiting for GA4 or Meta to update.
• PRO only. Customer cookie consent required before any script fires.

What you can track

Vendor	Field on settings page	Format	What it does
GA4	Measurement ID	G-XXXXXXXXXX	Standard Google Analytics 4 tracking
Meta Pixel	Pixel ID	15-16 digits	Facebook + Instagram conversion tracking, audience building
Google Tag Manager	Container ID	GTM-XXXXXXX	Generic tag container — add TikTok, LinkedIn, Hotjar, Clarity, anything

Three fields, infinite vendors via GTM. Save once; tracking goes live on the storefront within seconds (consent permitting).

Events that fire

Event	When	GA4	Meta Pixel
page_view	Customer loads any storefront page	page_view (auto from GA4 SDK)	PageView (fires on Pixel init)
purchase	Booking confirmed	purchase with transaction_id, value, currency, items[].item_id="booking"	Purchase with same
purchase	Gift card purchased	Same shape, items[].item_id="gift_card"	Same

Booking ID is used as the stable eventId so future server-side Meta Conversions API (CAPI) firings can deduplicate against the client event. This means no double-counting when CAPI ships.

The cookie consent gate

Tracking scripts only inject when:

1. At least one ID is configured (otherwise no consent banner shows — nothing to gate)
2. The customer has set oc-consent=accept cookie (12-month expiry)

Pre-consent: zero scripts loaded. The banner appears 2 seconds after the storefront finishes loading, with Accept and Reject options. See Cookie Consent & Privacy Pages.

If a customer rejects, no scripts ever load for that session. They can re-accept at any time via the privacy link in the footer.

The Live Test card

The Tracking settings page includes a Live Test card that polls every 5 seconds:

• Opens a real event listener at /api/storefront/track-test
• When your storefront fires a client-side event, it lands in Upstash (60-second TTL)
• The card shows Receiving events with last-seen time and a list of recent event names

Use it to verify your setup without waiting 24h for GA4 to update or 30 minutes for Meta to show a debug event.

Test flow:

1. Save your tracking IDs.
2. Accept cookie consent in a fresh incognito tab on your storefront.
3. Complete a test booking (or just navigate around).
4. Watch the Live Test card on the settings page.

If events aren't landing, something's misconfigured — usually the consent gate, browser blocking, or an ad-blocker.

Server-side Meta CAPI (server-side tracking)

The Meta Conversions API is wired for some marketing routes (Founding Member apply, demo requests) — it sends the same conversion events server-side, immune to ad-blockers and iOS Mail Privacy filters.

For storefront bookings, the eventId dedup design is in place — client-side events carry the booking ID as eventId, ready for server-side CAPI to match against. The server-side fire for storefront booking conversions isn't shipped yet; the framework is ready.

Setting up tracking IDs

1. Open Storefront → Tracking.
2. Paste your ID(s) into the relevant fields.
3. Save.

Within 30 seconds, the scripts deploy to your storefront (after customers accept consent).

Getting your IDs

• GA4: Google Analytics → Admin → Data Streams → your stream → Measurement ID
• Meta Pixel: Meta Events Manager → Data Sources → your Pixel → Settings → Pixel ID
• GTM: Tag Manager → Admin → Container Settings → Container ID

Per-vendor tips

GA4

• anonymize_ip: true is set by default — IP addresses are anonymised for GDPR.
• Events appear in GA4 within ~5 minutes (real-time view) or 24-48 hours (full reports).

Meta Pixel

• Single inline bootstrap loads the SDK and fires PageView automatically.
• For audience-building (lookalike audiences from your customers), Meta needs ≥100 events before building useful segments.

Google Tag Manager (for TikTok, LinkedIn, Hotjar, Clarity, etc.)

• Set up your TikTok Pixel inside GTM as a tag (or any other vendor).
• GTM lets you fire conditional tags (e.g. only on purchase events with value > 100).
• Use GTM Preview mode to debug your tag configuration before publishing.

Tier

PRO only. FREE venues see the settings page with an Upgrade prompt — tracking IDs can't be saved on FREE.

Mobile parity

Storefront is browser-based — tracking fires on whatever device the customer's using. The settings page itself is web-only (admin surface).

Common mistakes

Problem	What to check
Events not landing in GA4 / Meta	Customer needs to accept cookie consent. Test in an incognito tab; accept; complete a booking. Then check Live Test card.
Live Test shows nothing	Your storefront isn't firing. Check the ID format is correct (GA4 starts G-, Meta is 15-16 digits, GTM starts GTM-).
Multiple identical purchase events on Meta	Dedup happens via eventId (booking ID). If you see doubles, you may have an external GTM tag firing the same event without the eventId — exclude that tag for OpenChair pageviews.
Customer sees too many cookie banners	The banner only shows on storefront. If they're hitting it on multiple pages, that's expected for the first visit; the cookie persists for 12 months after they accept.
TikTok events not showing	Set up TikTok inside GTM. Add the TikTok Pixel as a GTM tag; configure the trigger; publish the container. TikTok then receives events via GTM.
GA4 real-time shows users but no purchase	Real-time can lag for conversion events. Check the standard reports after 24h; or test the eventId is being passed correctly via Tag Assistant.

FAQ

What can I track?

GA4, Meta Pixel, and Google Tag Manager are supported. GA4 and Meta Pixel fire PageView and Purchase events on storefront page views, booking confirmations, and gift-card purchases. GTM is a generic container — drop in TikTok Pixel, LinkedIn Insight, Hotjar, Clarity, or anything else.

Do conversion events fire before the customer accepts cookies?

No. The cookie consent banner gates all tracking scripts. Nothing fires until the customer accepts. The customer is told what's tracked; the choice is explicit.

How do I confirm my pixel is working?

The settings page has a Live Test card that polls every 5 seconds. Open your storefront in another tab and complete a test booking — events appear on the dashboard with last-seen time. No need to wait for GA4 or Meta to update.

Does TikTok have first-class support?

Not directly — TikTok runs via the GTM container. Set up a GTM tag for TikTok Pixel and any other vendor you need. Easier than maintaining a separate field per vendor.

Will tracking IDs work on my custom domain?

Yes. Tracking fires regardless of which domain serves your storefront. Customers on salonsmith.com and openchairpro.com/salonsmith both get the same scripts (consent permitting).

Does GTM affect site speed?

Slightly — every GTM tag adds a network request. Test with PageSpeed Insights before publishing many tags. Keep your GTM container lean.

Related Articles

• Cookie Consent & Privacy Pages
• Storefront SEO Controls
• Your Storefront
• Connect a Custom Domain