Analytics & Marketing

The boilerplate includes consent-aware analytics integrations for tracking user behavior, conversions, and providing live customer support.

Google Tag Manager

Configure with NEXT_PUBLIC_GTM_ID for your GTM container (GTM-XXX). For GA4 and Google Ads, use the dedicated env vars (NEXT_PUBLIC_GA_MEASUREMENT_ID and NEXT_PUBLIC_GOOGLE_ADS_ID) which are handled by the GoogleAdsTag component.

Google Ads Conversion Tracking

Track Google Ads conversions via gtag.js with per-action conversion tags. The gtag.js script is loaded with async + Next.js strategy="afterInteractive", deferring the request until after hydration to keep it off the critical path while remaining detectable by Google Tag Assistant.

Usage Examples

// Via the unified analytics hook (recommended — respects consent)
const { trackConversion, trackSignUp } = useAnalytics()

// Purchase conversion (auto-fired on checkout success page)
trackConversion({
  transactionId: 'cs_live_xxx',
  value: 29.99,
  currency: 'EUR',
})

// Signup conversion (auto-fired on onboarding completion)
trackSignUp()

// Direct Google Ads conversion with specific send_to
import { googleAdsEvents } from '@/components/analytics'
googleAdsEvents.purchase('txn_123', 29.99, 'EUR')  // uses CONVERSION_PURCHASE
googleAdsEvents.signUp()                              // uses CONVERSION_SIGNUP
googleAdsEvents.lead(5.0)                             // uses CONVERSION_SIGNUP

// On button/link click with redirect
import { gtagReportConversion } from '@/components/analytics'
<button onClick={() => gtagReportConversion('/thank-you', { value: 29.99 })}>
  Buy Now
</button>

Meta Pixel (Facebook)

Track conversions for Facebook and Instagram ads. Configure with NEXT_PUBLIC_META_PIXEL_ID.

• Loads only when marketing consent is granted
• Tracks PageView on route changes
• E-commerce events (Purchase, InitiateCheckout)
• Lead events (CompleteRegistration, Subscribe)

X (Twitter) Pixel

Track conversions for X (Twitter) Ads campaigns via the universal website tag (uwt.js). Configure with NEXT_PUBLIC_X_PIXEL_ID (base pixel ID from X Ads Manager, e.g. o1abc) plus the per-action event IDs NEXT_PUBLIC_X_PIXEL_EVENT_PURCHASE and NEXT_PUBLIC_X_PIXEL_EVENT_SIGNUP (format: tw-XXXXX-XXXXX). Loaded by the XPixel component (components/analytics/x-pixel.tsx) and orchestrated by AnalyticsProvider.

Crisp Chat

Live chat widget for customer support. Configure with NEXT_PUBLIC_CRISP_WEBSITE_ID.