[A/B Testing] Next.js - pluggable analytics adapter (GA4 + Plausible CE)

[kuuak]

Context

Part of # A/B Testing for Superstack.111

What to build

A pluggable analytics adapter system that fires A/B test impression and conversion events to GA4/GTM and/or Plausible CE (self-hosted), independently or simultaneously.

Interface

// next/src/lib/analytics/types.ts
interface AnalyticsAdapter {
  trackImpression(experimentId: string, variant: 'a' | 'b'): void;
  trackConversion(experimentId: string, variant: 'a' | 'b'): void;
}

Adapters

GA4/GTM (src/lib/analytics/adapters/ga4.ts):

window.gtag('event', 'ab_impression' | 'ab_conversion', {
  experiment_id: string,
  variant: 'a' | 'b'
})

Plausible CE (src/lib/analytics/adapters/plausible.ts):

window.plausible('ab_impression' | 'ab_conversion', {
  props: { experiment_id: string, variant: 'a' | 'b' }
})

Composite adapter

src/lib/analytics/index.ts reads env vars and calls all enabled adapters:

• NEXT_PUBLIC_AB_ANALYTICS_GA4= enables GA4 adaptertrue
• NEXT_PUBLIC_AB_ANALYTICS_PLAUSIBLE= enables Plausible adaptertrue
• NEXT_PUBLIC_PLAUSIBLE_ domain for PlausibleDOMAIN

Files to create

next/src/lib/analytics/
 types.ts
 index.ts              # Composite adapter factory
 adapters/
 ga4.ts    
 plausible.ts