feat(Surveys): Enable partial survey responses

playground/nextjs/src/posthog.ts

@@ -56,6 +56,7 @@ if (typeof window !== 'undefined') {
         session_recording: {
             recordCrossOriginIframes: true,
         },
+        disable_survey_partial_response: false,
         debug: true,
         disable_web_experiments: false,
         scroll_root_selector: ['#scroll_element', 'html'],

src/extensions/surveys.tsx

@@ -457,6 +457,11 @@
     removeSurveyFromFocus: (id: string) => void
     isPopup?: boolean
 }) {
+    const surveyResponseInsertID = useMemo(
+        () => survey.id + Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10),
+        [survey.id]
+    )
+
     const isPreviewMode = Number.isInteger(previewPageIndex)
     // NB: The client-side code passes the millisecondDelay in seconds, but setTimeout expects milliseconds, so we multiply by 1000
     const surveyPopupDelayMilliseconds = survey.appearance?.surveyPopupDelaySeconds
@@ -494,6 +499,7 @@
                     forceDisableHtml={!!forceDisableHtml}
                     posthog={posthog}
                     styleOverrides={style}
+                    surveyResponseInsertID={surveyResponseInsertID}
                 />
             ) : (
                 <ConfirmationMessage
@@ -521,6 +527,7 @@
     survey: Survey
     forceDisableHtml: boolean
     posthog?: PostHog
+    surveyResponseInsertID?: string
     styleOverrides?: React.CSSProperties
 }) {
     const textColor = getContrastingTextColor(
@@ -557,18 +564,31 @@
         // Old SDK, no branching
         if (!posthog.getNextSurveyStep) {
             const isLastDisplayedQuestion = displayQuestionIndex === survey.questions.length - 1
-            if (isLastDisplayedQuestion) {
-                sendSurveyEvent({ ...questionsResponses, [responseKey]: res }, survey, posthog)
-            } else {
-                setCurrentQuestionIndex(displayQuestionIndex + 1)
-            }
+            logger.info(
+                `POSTHOG SURVEYS: Sending survey response with id : ${surveyResponseInsertID} `,
+                questionsResponses
+            )
+            sendSurveyEvent(
+                { ...questionsResponses, [responseKey]: res },
+                survey,
+                posthog,
+                isLastDisplayedQuestion,
+                surveyResponseInsertID
+            )
+            setCurrentQuestionIndex(displayQuestionIndex + 1)
             return
         }
 
         const nextStep = posthog.getNextSurveyStep(survey, displayQuestionIndex, res)
-        if (nextStep === SurveyQuestionBranchingType.End) {
-            sendSurveyEvent({ ...questionsResponses, [responseKey]: res }, survey, posthog)
-        } else {
+        logger.info(`POSTHOG SURVEYS: Sending survey response  with id : ${surveyResponseInsertID}`, questionsResponses)
+        sendSurveyEvent(
+            { ...questionsResponses, [responseKey]: res },
+            survey,
+            posthog,
+            nextStep === SurveyQuestionBranchingType.End,
+            surveyResponseInsertID
+        )
+        if (nextStep !== SurveyQuestionBranchingType.End) {
             setCurrentQuestionIndex(nextStep)
         }
     }

src/extensions/surveys/surveys-utils.tsx

@@ -532,14 +532,24 @@ export const createShadow = (styleSheet: string, surveyId: string, element?: Ele
 export const sendSurveyEvent = (
     responses: Record<string, string | number | string[] | null> = {},
     survey: Survey,
-    posthog?: PostHog
+    posthog?: PostHog,
+    surveyCompleted?: boolean,
+    surveyResponseInsertID?: string
 ) => {
     if (!posthog) return
+
+    if (!surveyCompleted && posthog.config.disable_survey_partial_response) {
+        // do not send partial  responses
+        return
+    }
+
     localStorage.setItem(getSurveySeenKey(survey), 'true')
 
     posthog.capture('survey sent', {
         $survey_name: survey.name,
+        $survey_completed: surveyCompleted || false,
         $survey_id: survey.id,
+        $survey_response_id: surveyResponseInsertID,
         $survey_iteration: survey.current_iteration,
         $survey_iteration_start_date: survey.current_iteration_start_date,
         $survey_questions: survey.questions.map((question) => question.question),
@@ -549,7 +559,10 @@ export const sendSurveyEvent = (
             [getSurveyInteractionProperty(survey, 'responded')]: true,
         },
     })
-    window.dispatchEvent(new Event('PHSurveySent'))
+
+    if (surveyCompleted) {
+        window.dispatchEvent(new Event('PHSurveySent'))
+    }
 }
 
 export const dismissedSurveyEvent = (survey: Survey, posthog?: PostHog, readOnly?: boolean) => {

src/posthog-core.ts

@@ -145,6 +145,7 @@ export const defaultConfig = (): PostHogConfig => ({
     disable_persistence: false,
     disable_web_experiments: true, // disabled in beta.
     disable_surveys: false,
+    disable_survey_partial_response: true,
     enable_recording_console_log: undefined, // When undefined, it falls back to the server-side setting
     secure_cookie: window?.location?.protocol === 'https:',
     ip: true,

src/types.ts

@@ -248,6 +248,7 @@ export interface PostHogConfig {
     /** @deprecated - use `disable_persistence` instead  */
     disable_cookie?: boolean
     disable_surveys: boolean
+    disable_survey_partial_response: boolean
     disable_web_experiments: boolean
     /** If set, posthog-js will never load external scripts such as those needed for Session Replay or Surveys. */
     disable_external_dependency_loading?: boolean