@funnelsgrove/runtime 0.1.12 → 0.1.14

package/dist/components/FunnelContext.d.ts

@@ -18,6 +18,7 @@ export type FunnelUser = {
 };
 export type FunnelContextValue = {
     activeStepId: FunnelStepId;
+    featureFlags: Record<string, string>;
     isBuilder: boolean;
     goToStep: (stepId: string) => void;
     goNext: () => void;

package/dist/config/env.config.d.ts

@@ -33,6 +33,10 @@ export declare const RUNTIME_ENV_KEYS: {
     readonly stripeLivePublishableKey: "NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLE_KEY";
     readonly metaPixelEnabled: "NEXT_PUBLIC_META_PIXEL_ENABLED";
     readonly metaPixelId: "NEXT_PUBLIC_META_PIXEL_ID";
+    readonly googleTagEnabled: "NEXT_PUBLIC_GOOGLE_TAG_ENABLED";
+    readonly googleAnalyticsId: "NEXT_PUBLIC_GOOGLE_ANALYTICS_ID";
+    readonly googleTagManagerId: "NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID";
+    readonly googleTagEventTarget: "NEXT_PUBLIC_GOOGLE_TAG_EVENT_TARGET";
     readonly funnelCustomDomain: "FUNNEL_CUSTOM_DOMAIN";
     readonly claimbeeWeeklyPriceId: "NEXT_PUBLIC_CLAIMBEE_WEEKLY_PRICE_ID";
     readonly claimbeeMonthlyPriceId: "NEXT_PUBLIC_CLAIMBEE_MONTHLY_PRICE_ID";

package/dist/config/env.config.js

@@ -44,6 +44,10 @@ export const RUNTIME_ENV_KEYS = {
     stripeLivePublishableKey: 'NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLE_KEY',
     metaPixelEnabled: 'NEXT_PUBLIC_META_PIXEL_ENABLED',
     metaPixelId: 'NEXT_PUBLIC_META_PIXEL_ID',
+    googleTagEnabled: 'NEXT_PUBLIC_GOOGLE_TAG_ENABLED',
+    googleAnalyticsId: 'NEXT_PUBLIC_GOOGLE_ANALYTICS_ID',
+    googleTagManagerId: 'NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID',
+    googleTagEventTarget: 'NEXT_PUBLIC_GOOGLE_TAG_EVENT_TARGET',
     funnelCustomDomain: 'FUNNEL_CUSTOM_DOMAIN',
     claimbeeWeeklyPriceId: 'NEXT_PUBLIC_CLAIMBEE_WEEKLY_PRICE_ID',
     claimbeeMonthlyPriceId: 'NEXT_PUBLIC_CLAIMBEE_MONTHLY_PRICE_ID',
@@ -97,6 +101,10 @@ const RUNTIME_ENV_VALUES = {
     NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLE_KEY: readRuntimeEnv(() => process.env.NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLE_KEY),
     NEXT_PUBLIC_META_PIXEL_ENABLED: readRuntimeEnv(() => process.env.NEXT_PUBLIC_META_PIXEL_ENABLED),
     NEXT_PUBLIC_META_PIXEL_ID: readRuntimeEnv(() => process.env.NEXT_PUBLIC_META_PIXEL_ID),
+    NEXT_PUBLIC_GOOGLE_TAG_ENABLED: readRuntimeEnv(() => process.env.NEXT_PUBLIC_GOOGLE_TAG_ENABLED),
+    NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: readRuntimeEnv(() => process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID),
+    NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID: readRuntimeEnv(() => process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID),
+    NEXT_PUBLIC_GOOGLE_TAG_EVENT_TARGET: readRuntimeEnv(() => process.env.NEXT_PUBLIC_GOOGLE_TAG_EVENT_TARGET),
     NEXT_PUBLIC_CLAIMBEE_WEEKLY_PRICE_ID: readRuntimeEnv(() => process.env.NEXT_PUBLIC_CLAIMBEE_WEEKLY_PRICE_ID),
     NEXT_PUBLIC_CLAIMBEE_MONTHLY_PRICE_ID: readRuntimeEnv(() => process.env.NEXT_PUBLIC_CLAIMBEE_MONTHLY_PRICE_ID),
     NEXT_PUBLIC_CLAIMBEE_YEARLY_PRICE_ID: readRuntimeEnv(() => process.env.NEXT_PUBLIC_CLAIMBEE_YEARLY_PRICE_ID),

package/dist/config/funnel.experiments.types.d.ts

@@ -0,0 +1,18 @@
+import type { FunnelManifestExperiment } from './funnel.manifest.types.js';
+export type PaywallExperimentDefinition = {
+    id: string;
+    name: string;
+    type: 'paywall';
+    launchDate: string;
+    control: {
+        stepId: string;
+        trafficPercent: number;
+    };
+    variant: {
+        stepId: string;
+        trafficPercent: number;
+    };
+};
+export type FunnelExperimentDefinition = PaywallExperimentDefinition;
+export declare const defineFunnelExperiments: <const T extends readonly FunnelExperimentDefinition[]>(experiments: T) => T;
+export declare const toManifestExperiments: (experiments: readonly FunnelExperimentDefinition[]) => FunnelManifestExperiment[];

package/dist/config/funnel.experiments.types.js

@@ -0,0 +1,23 @@
+export const defineFunnelExperiments = (experiments) => {
+    for (const experiment of experiments) {
+        const trafficTotal = experiment.control.trafficPercent + experiment.variant.trafficPercent;
+        if (trafficTotal !== 100) {
+            throw new Error(`Experiment "${experiment.id}" traffic must sum to 100`);
+        }
+    }
+    return experiments;
+};
+export const toManifestExperiments = (experiments) => experiments.map((experiment) => ({
+    experimentId: experiment.id,
+    stepId: experiment.control.stepId,
+    variants: [
+        {
+            variantKey: 'control',
+            routeToStepId: experiment.control.stepId,
+        },
+        {
+            variantKey: 'variant_b',
+            routeToStepId: experiment.variant.stepId,
+        },
+    ],
+}));

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './config/builder-preview.protocol.js';
 export * from './config/env.config.js';
 export * from './config/funnel.manifest.types.js';
+export * from './config/funnel.experiments.types.js';
 export * from './config/funnel-theme.js';
 export * from './config/font-config.js';
 export * from './content/step-content.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 export * from './config/builder-preview.protocol.js';
 export * from './config/env.config.js';
 export * from './config/funnel.manifest.types.js';
+export * from './config/funnel.experiments.types.js';
 export * from './config/funnel-theme.js';
 export * from './config/font-config.js';
 export * from './content/step-content.js';

package/dist/runtime/funnel-attribution.js

@@ -7,6 +7,7 @@ const INTERNAL_ATTRIBUTION_QUERY_KEYS = new Set([
     'user_id',
 ]);
 const POSTHOG_CONTEXT_MAPPINGS = {
+    $geoip_city_name: 'cityName',
     $geoip_country_code: 'countryCode',
     $geoip_country_name: 'countryName',
     $browser: 'browser',

package/dist/runtime/use-funnel-flow-controller.js

@@ -10,7 +10,7 @@ import { usePreviewBridge } from './preview-bridge.js';
 import { resolveExperimentAssignment } from './experiment-assignment.js';
 import { collectCurrentFunnelAttribution } from './funnel-attribution.js';
 import { resolveUrlUserAttributes } from './url-user-attributes.js';
-import { bootstrapPostHog, getPostHog, identifyPostHog, isPostHogReady, resolveExperimentVariant, } from './posthog-flags.js';
+import { bootstrapPostHog, identifyPostHog, isPostHogReady, resolveExperimentVariant, } from './posthog-flags.js';
 import { isEditorEnabled, useRuntimeMode } from '../services/runtime-mode.service.js';
 import { isPreviewFrameRuntime } from '../services/preview-frame.service.js';
 const FIRST_STEP_ENGAGEMENT_THRESHOLD_MS = 1000;
@@ -18,9 +18,6 @@ const buildFeatureFlagProperties = (featureFlags) => {
     return Object.fromEntries(Object.entries(featureFlags).map(([key, value]) => [`$feature/${key}`, value]));
 };
 const capturePostHogStepEvent = (event, properties) => {
-    if (!getPostHog() || !POSTHOG_API_HOST || !POSTHOG_PROJECT_API_KEY || !PROJECT_ID) {
-        return;
-    }
     const payload = JSON.stringify({
         api_key: POSTHOG_PROJECT_API_KEY,
         batch: [
@@ -366,29 +363,29 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
             return;
         }
         const prevId = prevStepIdRef.current;
-        if (prevId && prevId !== safeActiveStepId) {
+        if (prevId && prevId !== renderedStepId) {
             recordStepCompletion(prevId);
         }
         const startedAt = new Date().toISOString();
-        const stepName = (activeStepMeta === null || activeStepMeta === void 0 ? void 0 : activeStepMeta.name) || (activeStepMeta === null || activeStepMeta === void 0 ? void 0 : activeStepMeta.title) || safeActiveStepId;
-        stepStartedAtByIdRef.current[safeActiveStepId] = startedAt;
+        const stepName = (renderedStepMeta === null || renderedStepMeta === void 0 ? void 0 : renderedStepMeta.name) || (renderedStepMeta === null || renderedStepMeta === void 0 ? void 0 : renderedStepMeta.title) || renderedStepId;
+        stepStartedAtByIdRef.current[renderedStepId] = startedAt;
         if (!isPreviewRuntime) {
             apiService.trackStepStarted({
                 userId: currentUserIdRef.current,
-                stepId: safeActiveStepId,
+                stepId: renderedStepId,
                 stepName,
                 startedAt,
             });
-            capturePostHogStepEvent('step_started', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, step_id: safeActiveStepId, step_name: stepName, started_at: startedAt }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
+            capturePostHogStepEvent('step_started', Object.assign({ distinct_id: currentUserIdRef.current, funnel_id: FUNNEL_ID || undefined, funnel_version_id: FUNNEL_VERSION_ID || undefined, project_id: PROJECT_ID || undefined, step_id: renderedStepId, step_name: stepName, started_at: startedAt }, buildFeatureFlagProperties(postHogFeatureFlagsRef.current)));
         }
         attributesAtStepStart.current = Object.assign({}, attributesRef.current);
-        prevStepIdRef.current = safeActiveStepId;
+        prevStepIdRef.current = renderedStepId;
         if (isPreviewRuntime ||
-            safeActiveStepId !== defaultStepId ||
-            engagedStepIdsRef.current.has(safeActiveStepId)) {
+            renderedStepId !== defaultStepId ||
+            engagedStepIdsRef.current.has(renderedStepId)) {
             return;
         }
-        const engagedStepId = safeActiveStepId;
+        const engagedStepId = renderedStepId;
         const engagedStartedAt = startedAt;
         const engagedStepName = stepName;
         const timer = window.setTimeout(() => {
@@ -414,12 +411,13 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
         return () => window.clearTimeout(timer);
     }, [
         activeStepId,
-        activeStepMeta === null || activeStepMeta === void 0 ? void 0 : activeStepMeta.name,
-        activeStepMeta === null || activeStepMeta === void 0 ? void 0 : activeStepMeta.title,
         defaultStepId,
         isPreviewRuntime,
         recordStepCompletion,
         renderSuspended,
+        renderedStepId,
+        renderedStepMeta === null || renderedStepMeta === void 0 ? void 0 : renderedStepMeta.name,
+        renderedStepMeta === null || renderedStepMeta === void 0 ? void 0 : renderedStepMeta.title,
         safeActiveStepId,
     ]);
     useEffect(() => {
@@ -535,6 +533,7 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
     }, [editorVariantOverrides, postHogReady]);
     const contextValue = useMemo(() => ({
         activeStepId: safeActiveStepId,
+        featureFlags: postHogFeatureFlags,
         isBuilder: isPreviewRuntime,
         goToStep: goToStepFromContext,
         goNext,
@@ -561,6 +560,7 @@ export function useFunnelFlowController({ initialStepId, lockToInitialStep = fal
         goNext,
         goToStepFromContext,
         isPreviewRuntime,
+        postHogFeatureFlags,
         resolveRenderableStepId,
         safeActiveStepId,
         setAnswer,

package/dist/services/project-env.d.ts

@@ -33,6 +33,10 @@ export declare const PROJECT_ENV_STANDARD_KEYS: {
     readonly metaPixelId: "NEXT_PUBLIC_META_PIXEL_ID";
     readonly metaConversionsAccessToken: "META_CONVERSIONS_ACCESS_TOKEN";
     readonly metaTestEventCode: "META_TEST_EVENT_CODE";
+    readonly googleTagEnabled: "NEXT_PUBLIC_GOOGLE_TAG_ENABLED";
+    readonly googleAnalyticsId: "NEXT_PUBLIC_GOOGLE_ANALYTICS_ID";
+    readonly googleTagManagerId: "NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID";
+    readonly googleTagEventTarget: "NEXT_PUBLIC_GOOGLE_TAG_EVENT_TARGET";
 };
 export type ProjectEnvStandardKey = keyof typeof PROJECT_ENV_STANDARD_KEYS;
 export type ProjectEnvStandardValues = Record<ProjectEnvStandardKey, string>;

package/dist/services/project-env.js

@@ -33,6 +33,10 @@ export const PROJECT_ENV_STANDARD_KEYS = {
     metaPixelId: 'NEXT_PUBLIC_META_PIXEL_ID',
     metaConversionsAccessToken: 'META_CONVERSIONS_ACCESS_TOKEN',
     metaTestEventCode: 'META_TEST_EVENT_CODE',
+    googleTagEnabled: 'NEXT_PUBLIC_GOOGLE_TAG_ENABLED',
+    googleAnalyticsId: 'NEXT_PUBLIC_GOOGLE_ANALYTICS_ID',
+    googleTagManagerId: 'NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID',
+    googleTagEventTarget: 'NEXT_PUBLIC_GOOGLE_TAG_EVENT_TARGET',
 };
 export const normalizeProjectEnvValue = (value) => {
     return (value === null || value === void 0 ? void 0 : value.trim()) || '';
@@ -100,6 +104,10 @@ const buildProjectStandardValues = (envMap) => {
         metaPixelId: getProjectEnvValue(envMap, PROJECT_ENV_STANDARD_KEYS.metaPixelId),
         metaConversionsAccessToken: getProjectEnvValue(envMap, PROJECT_ENV_STANDARD_KEYS.metaConversionsAccessToken),
         metaTestEventCode: getProjectEnvValue(envMap, PROJECT_ENV_STANDARD_KEYS.metaTestEventCode),
+        googleTagEnabled: getProjectEnvValue(envMap, PROJECT_ENV_STANDARD_KEYS.googleTagEnabled),
+        googleAnalyticsId: getProjectEnvValue(envMap, PROJECT_ENV_STANDARD_KEYS.googleAnalyticsId),
+        googleTagManagerId: getProjectEnvValue(envMap, PROJECT_ENV_STANDARD_KEYS.googleTagManagerId),
+        googleTagEventTarget: getProjectEnvValue(envMap, PROJECT_ENV_STANDARD_KEYS.googleTagEventTarget),
     };
 };
 export const parseProjectEnvVariables = (variables) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/runtime",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",