Analytics & Tracking Setup

Go to analytics.google.com. Create an account if you don't have one, then create a new property. Choose Web as your platform and enter your domain. GA4 generates a Measurement ID that looks like G-XXXXXXXXXX— copy this. You'll need it to connect your app.

During setup, GA4 asks about your business objectives. Pick the ones closest to your goals — this customizes the default reports. Don't overthink it; you can change these later. The important thing is getting the Measurement ID.

Create a GoogleTag component that loads the gtag.js script. Use next/script with strategy="afterInteractive"so it doesn't block your page from rendering. Pass your Measurement ID from an environment variable (NEXT_PUBLIC_GA_ID) — never hardcode it. Add the component to your root layout so it loads on every page.

The component should return nullif the environment variable isn't set. This way GA4 loads in production but doesn't fire during local development, keeping your analytics data clean.

GA4 tracks page views automatically— you don't need to add anything for that. What you do need to add are custom events for key actions in your funnel. These are the moments that matter: a visitor clicks your CTA, starts checkout, completes a purchase.

Fire events with gtag('event', 'cta_click', { tier: 'ship' }) for button clicks. gtag('event', 'purchase', { value: 79, currency: 'USD' }) for completed sales. Then in GA4 Admin, go to Events > Mark as conversion for the events that represent real business outcomes. This tells GA4 which events are your goals, not just noise.

Go to business.facebook.comand create a Business Account if you don't have one. This is required before you can create a Meta Pixel. You'll need a personal Facebook account to create the business account, but they stay separate — your personal profile isn't visible to customers.

Meta Business Suite is the central hub for managing your Pixel, ad accounts, Instagram business profile, and conversion data. Even if you're not running paid ads yet, set this up now so your Pixel starts collecting audience data from day one. When you do run ads later, Meta's algorithm will already have data to optimize against.

In Meta Business Suite, go to Events Manager > Connect Data Sources > Web > Meta Pixel. Name it after your product and click create. You'll get a Pixel ID— a long number that identifies your tracking pixel. Save this as NEXT_PUBLIC_META_PIXEL_ID in your environment variables.

Create a MetaPixel component that loads the fbq script. Add it to your root layout alongside the GA4 component. The base code initializes the Pixel with your ID and fires a PageView event automatically on every page load.

For specific conversion events, call fbq('track', 'Purchase', { value: 79, currency: 'USD' }) when a purchase completes, fbq('track', 'InitiateCheckout') when someone clicks your buy button, and fbq('track', 'ViewContent') on product pages. These are Meta's standard events— using them (instead of custom names) unlocks Meta's built-in optimization for each event type.

CAPI sends events server-side, bypassing ad blockers entirely. This is critical — client-side tracking alone misses 30–40% of events because of browser privacy tools and ad blockers. Without CAPI, Meta's algorithm doesn't see a huge chunk of your conversions, which means worse ad targeting and wasted spend.

In Events Manager, go to Settings > Generate Access Token. Save this token as META_CAPI_TOKENin your server-side environment variables (not NEXT_PUBLIC_ — this token must stay server-side). Create a server function that sends events to https://graph.facebook.com/v19.0/{pixel_id}/events with your access token. This function runs in your API routes or server actions, not in the browser.

Track these events on both the client-side Pixel and server-side CAPI: ViewContent (product pages), InitiateCheckout (click buy button), Purchase (after payment succeeds). The key to making this work is deduplication.

Generate a unique event_idfor each event (a UUID works). Send that same event_id from both the Pixel call and the CAPI call. Meta uses this ID to recognize they're the same event and counts it only once. Without deduplication, every conversion gets double-counted, which destroys your reporting accuracy and wastes ad budget on false signals.

For CAPI events, include user datafor better matching: hashed email address, IP address, and user agent. The more data you provide, the higher Meta's Event Match Quality score, and the better your ad optimization will perform.

Add UTM parameters to every marketing link you share: ?utm_source=instagram&utm_medium=social&utm_campaign=launch. This tells GA4 exactly where each visitor came from. Without UTMs, social traffic shows up as "direct" or "referral" with no useful detail.

On your site, capture UTM parameters on arrival and store them in localStorage with a 60-day expiration window. When a visitor eventually purchases (maybe days or weeks later), pass those stored UTMs to your Stripe checkout metadata and analytics events. This gives you full attribution— you can trace every sale back to the specific post, ad, or link that brought the customer to your site.

In GA4 Admin, go to Events and mark your key events as conversions: purchase, signup, cta_click. This surfaces them in conversion reports and lets you track conversion rates across different traffic sources, landing pages, and campaigns.

Set up Audiencesfor retargeting. Create an audience for "visited pricing page but didn't purchase" — these are your warmest leads. Create another for "purchased in the last 30 days" — these are candidates for upsells or referral asks. If you connect GA4 to Google Ads later, these audiences become targeting options for your ad campaigns.

Use GA4 DebugView(Realtime > DebugView in your GA4 property) to verify events fire correctly. Install the Meta Pixel Helper Chrome extension to verify Pixel events appear on each page. In Events Manager, use Test Events to verify your CAPI events are arriving server-side.

Test the full funnel: land on a page (PageView fires in GA4 and Meta), click a CTA (cta_click fires in GA4, ViewContent fires in Meta), proceed to checkout (InitiateCheckout fires in Meta), complete a test purchase (purchase fires in GA4, Purchase fires in both Meta Pixel and CAPI with matching event_ids). If any event is missing or doubled, fix it before you spend money on ads.

In GA4, create a custom reportwith the metrics that matter: traffic sources, top landing pages, conversion rates by source, and revenue. Don't get lost in vanity metrics — the numbers that matter are: where did visitors come from, what did they do, and did they buy.

In Meta Events Manager, check your attribution data to see which ads and organic posts drive actual purchases, not just clicks. Review both dashboards weekly. The goal isn't to obsess over daily fluctuations — it's to spot trends over time. Which traffic sources are growing? Which pages have high drop-off? Where should you invest more time and money?