feat: Added heatmaps remote opt in (#21807)

PostHog · Apr 25, 2024 · 494e83d · 494e83d
1 parent c7d506b
commit 494e83d
Show file tree

Hide file tree

Showing 37 changed files with 285 additions and 10 deletions.
diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project--dark.png b/frontend/__snapshots__/scenes-other-settings--settings-project--dark.png
diff --git a/frontend/__snapshots__/scenes-other-settings--settings-project--light.png b/frontend/__snapshots__/scenes-other-settings--settings-project--light.png
diff --git a/frontend/src/lib/api.mock.ts b/frontend/src/lib/api.mock.ts
@@ -76,6 +76,7 @@ export const MOCK_DEFAULT_TEAM: TeamType = {
     session_replay_config: null,
     capture_console_log_opt_in: true,
     capture_performance_opt_in: true,
+    heatmaps_opt_in: true,
     autocapture_exceptions_opt_in: false,
     autocapture_exceptions_errors_to_ignore: [],
     effective_membership_level: OrganizationMembershipLevel.Admin,

diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -457,6 +457,7 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportIngestionContinueWithoutVerifying: true,
         reportAutocaptureToggled: (autocapture_opt_out: boolean) => ({ autocapture_opt_out }),
         reportAutocaptureExceptionsToggled: (autocapture_opt_in: boolean) => ({ autocapture_opt_in }),
+        reportHeatmapsToggled: (heatmaps_opt_in: boolean) => ({ heatmaps_opt_in }),
         reportFailedToCreateFeatureFlagWithCohort: (code: string, detail: string) => ({ code, detail }),
         reportFeatureFlagCopySuccess: true,
         reportFeatureFlagCopyFailure: (error) => ({ error }),
@@ -1103,6 +1104,11 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
                 autocapture_opt_in,
             })
         },
+        reportHeatmapsToggled: ({ heatmaps_opt_in }) => {
+            posthog.capture('heatmaps toggled', {
+                heatmaps_opt_in,
+            })
+        },
         reportFailedToCreateFeatureFlagWithCohort: ({ detail, code }) => {
             posthog.capture('failed to create feature flag with cohort', { detail, code })
         },

diff --git a/frontend/src/scenes/onboarding/Onboarding.tsx b/frontend/src/scenes/onboarding/Onboarding.tsx
@@ -1,5 +1,6 @@
 import { useActions, useValues } from 'kea'
 import { FEATURE_FLAGS, SESSION_REPLAY_MINIMUM_DURATION_OPTIONS } from 'lib/constants'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { useEffect, useState } from 'react'
 import { AndroidInstructions } from 'scenes/onboarding/sdks/session-replay'
@@ -81,6 +82,8 @@ const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Ele
 const ProductAnalyticsOnboarding = (): JSX.Element => {
     const { currentTeam } = useValues(teamLogic)
 
+    const heatmapsEnabled = useFeatureFlag('TOOLBAR_HEATMAPS')
+
     return (
         <OnboardingWrapper>
             <SDKs
@@ -101,6 +104,18 @@ const ProductAnalyticsOnboarding = (): JSX.Element => {
                         type: 'toggle',
                         inverseToggle: true,
                     },
+
+                    heatmapsEnabled
+                        ? {
+                              title: 'Enable heatmaps',
+                              description: `If you use our JavaScript libraries, we can capture general clicks, mouse movements,
+                               and scrolling to create heatmaps. 
+                               No additional events are created, and you can disable this at any time.`,
+                              teamProperty: 'heatmaps_opt_in',
+                              value: currentTeam?.heatmaps_opt_in ?? true,
+                              type: 'toggle',
+                          }
+                        : undefined,
                 ]}
             />
         </OnboardingWrapper>

diff --git a/frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx b/frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx
@@ -44,7 +44,7 @@ export const OnboardingProductConfiguration = ({
     options,
 }: {
     stepKey?: OnboardingStepKey
-    options: ProductConfigOption[]
+    options: (ProductConfigOption | undefined)[]
 }): JSX.Element | null => {
     const { configOptions } = useValues(onboardingProductConfigurationLogic)
     const { defaultEnabledPlugins } = useValues(pluginsLogic)
@@ -58,7 +58,7 @@ export const OnboardingProductConfiguration = ({
     }, [configOptions])
 
     useEffect(() => {
-        setConfigOptions(options)
+        setConfigOptions(options.filter((option): option is ProductConfigOption => !!option))
     }, [])
 
     const combinedList: ConfigOption[] = [

diff --git a/frontend/src/scenes/onboarding/onboardingProductConfigurationLogic.ts b/frontend/src/scenes/onboarding/onboardingProductConfigurationLogic.ts
@@ -2,12 +2,14 @@ import { LemonSelectOptions } from '@posthog/lemon-ui'
 import { actions, connect, kea, listeners, path, reducers } from 'kea'
 import { teamLogic } from 'scenes/teamLogic'
 
+import { TeamType } from '~/types'
+
 import type { onboardingProductConfigurationLogicType } from './onboardingProductConfigurationLogicType'
 
 export interface ProductConfigOptionBase {
     title: string
     description: string
-    teamProperty: string
+    teamProperty: keyof TeamType
 }
 
 export interface ProductConfigurationToggle extends ProductConfigOptionBase {

diff --git a/frontend/src/scenes/settings/SettingsMap.tsx b/frontend/src/scenes/settings/SettingsMap.tsx
@@ -11,6 +11,7 @@ import { AutocaptureSettings, ExceptionAutocaptureSettings } from './project/Aut
 import { CorrelationConfig } from './project/CorrelationConfig'
 import { DataAttributes } from './project/DataAttributes'
 import { GroupAnalyticsConfig } from './project/GroupAnalyticsConfig'
+import { HeatmapsSettings } from './project/HeatmapsSettings'
 import { IPAllowListInfo } from './project/IPAllowListInfo'
 import { IPCapture } from './project/IPCapture'
 import { PathCleaningFiltersConfig } from './project/PathCleaningFiltersConfig'
@@ -76,14 +77,20 @@ export const SettingsMap: SettingSection[] = [
     {
         level: 'project',
         id: 'project-autocapture',
-        title: 'Autocapture',
+        title: 'Autocapture & heatmaps',
 
         settings: [
             {
                 id: 'autocapture',
                 title: 'Autocapture',
                 component: <AutocaptureSettings />,
             },
+            {
+                id: 'heatmaps',
+                title: 'Heatmaps',
+                component: <HeatmapsSettings />,
+                flag: 'TOOLBAR_HEATMAPS',
+            },
             {
                 id: 'exception-autocapture',
                 title: 'Exception autocapture',

diff --git a/...nes/settings/organization/VerifiedDomains/__snapshots__/verifiedDomainsLogic.test.ts.snap b/...nes/settings/organization/VerifiedDomains/__snapshots__/verifiedDomainsLogic.test.ts.snap
@@ -58,6 +58,7 @@ exports[`verifiedDomainsLogic values has proper defaults 1`] = `
         "effective_membership_level": 8,
         "groups_on_events_querying_enabled": true,
         "has_group_types": true,
+        "heatmaps_opt_in": true,
         "id": 997,
         "ingested_event": true,
         "is_demo": false,

diff --git a/frontend/src/scenes/settings/project/HeatmapsSettings.tsx b/frontend/src/scenes/settings/project/HeatmapsSettings.tsx
@@ -0,0 +1,40 @@
+import { LemonSwitch } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { teamLogic } from 'scenes/teamLogic'
+import { userLogic } from 'scenes/userLogic'
+
+export function HeatmapsSettings(): JSX.Element {
+    const { userLoading } = useValues(userLogic)
+    const { currentTeam } = useValues(teamLogic)
+    const { updateCurrentTeam } = useActions(teamLogic)
+    const { reportHeatmapsToggled } = useActions(eventUsageLogic)
+
+    return (
+        <>
+            <p>
+                If you use our JavaScript libraries, we can capture general clicks, mouse movements, and scrolling to
+                create heatmaps. No additional events are created, and you can disable this at any time.
+                <br />
+                Whereas Autocapture creates events whenever it can uniquely identify an interacted element, heatmaps are
+                generated based on overall mouse or touch positions and are useful for understanding more general user
+                behavior across your site.
+            </p>
+            <div className="space-y-2">
+                <LemonSwitch
+                    id="posthog-heatmaps-switch"
+                    onChange={(checked) => {
+                        updateCurrentTeam({
+                            heatmaps_opt_in: checked,
+                        })
+                        reportHeatmapsToggled(checked)
+                    }}
+                    checked={!!currentTeam?.heatmaps_opt_in}
+                    disabled={userLoading}
+                    label="Enable heatmaps for web"
+                    bordered
+                />
+            </div>
+        </>
+    )
+}
diff --git a/frontend/src/scenes/settings/types.ts b/frontend/src/scenes/settings/types.ts
@@ -75,6 +75,7 @@ export type SettingId =
     | 'optout'
     | 'theme'
     | 'replay-ai-config'
+    | 'heatmaps'
 
 export type Setting = {
     id: SettingId

diff --git a/frontend/src/scenes/teamActivityDescriber.tsx b/frontend/src/scenes/teamActivityDescriber.tsx
@@ -150,7 +150,10 @@ const teamActionsMapping: Record<
     autocapture_exceptions_errors_to_ignore: () => null,
     autocapture_exceptions_opt_in: () => null,
     autocapture_opt_out(change: ActivityChange | undefined): ChangeMapping | null {
-        return { description: [<>{change?.after ? 'enabled' : 'disabled'} autocapture</>] }
+        return { description: [<>{change?.after ? 'opted in to' : 'opted out of'} autocapture</>] }
+    },
+    heatmaps_opt_in(change: ActivityChange | undefined): ChangeMapping | null {
+        return { description: [<>{change?.after ? 'enabled' : 'disabled'} heatmaps</>] }
     },
     // and.... many more
     name(change: ActivityChange | undefined): ChangeMapping | null {

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -443,6 +443,7 @@ export interface TeamType extends TeamBasicType {
     session_replay_config: { record_canvas?: boolean; ai_config?: SessionRecordingAIConfig } | undefined | null
     autocapture_exceptions_opt_in: boolean
     surveys_opt_in?: boolean
+    heatmaps_opt_in?: boolean
     autocapture_exceptions_errors_to_ignore: string[]
     test_account_filters: AnyPropertyFilter[]
     test_account_filters_default_checked: boolean

diff --git a/latest_migrations.manifest b/latest_migrations.manifest
@@ -5,7 +5,7 @@ contenttypes: 0002_remove_content_type_name
 ee: 0016_rolemembership_organization_member
 otp_static: 0002_throttling
 otp_totp: 0002_auto_20190420_0723
-posthog: 0404_remove_propertydefinition_property_type_is_valid_and_more
+posthog: 0405_team_heatmaps_opt_in
 sessions: 0001_initial
 social_django: 0010_uid_db_index
 two_factor: 0007_auto_20201201_1019
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/posthog/api/decide.py b/posthog/api/decide.py
@@ -254,6 +254,7 @@ def get_decide(request: HttpRequest):
             response["sessionRecording"] = _session_recording_config_response(request, team)
 
             response["surveys"] = True if team.surveys_opt_in else False
+            response["heatmaps"] = True if team.heatmaps_opt_in else False
 
             site_apps = []
             # errors mean the database is unavailable, bail in this case

diff --git a/posthog/api/team.py b/posthog/api/team.py
@@ -111,6 +111,7 @@ class Meta:
             "recording_domains",
             "inject_web_apps",
             "surveys_opt_in",
+            "heatmaps_opt_in",
         ]
 
 
@@ -166,6 +167,7 @@ class Meta:
             "extra_settings",
             "has_completed_onboarding_for",
             "surveys_opt_in",
+            "heatmaps_opt_in",
         )
         read_only_fields = (
             "id",

diff --git a/posthog/api/test/__snapshots__/test_action.ambr b/posthog/api/test/__snapshots__/test_action.ambr
@@ -58,6 +58,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",
@@ -220,6 +221,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",
@@ -563,6 +565,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",

diff --git a/posthog/api/test/__snapshots__/test_annotation.ambr b/posthog/api/test/__snapshots__/test_annotation.ambr
@@ -58,6 +58,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",
@@ -142,6 +143,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",
@@ -479,6 +481,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",

diff --git a/posthog/api/test/__snapshots__/test_decide.ambr b/posthog/api/test/__snapshots__/test_decide.ambr
@@ -61,6 +61,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",
@@ -311,6 +312,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",
@@ -473,6 +475,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",
@@ -628,6 +631,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",

diff --git a/posthog/api/test/__snapshots__/test_early_access_feature.ambr b/posthog/api/test/__snapshots__/test_early_access_feature.ambr
@@ -27,6 +27,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",
@@ -164,6 +165,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",

diff --git a/posthog/api/test/__snapshots__/test_element.ambr b/posthog/api/test/__snapshots__/test_element.ambr
@@ -58,6 +58,7 @@
          "posthog_team"."capture_console_log_opt_in",
          "posthog_team"."capture_performance_opt_in",
          "posthog_team"."surveys_opt_in",
+         "posthog_team"."heatmaps_opt_in",
          "posthog_team"."session_recording_version",
          "posthog_team"."signup_token",
          "posthog_team"."is_demo",