From e9e4dd3205f38d4cfaf7020d84f62203d025c241 Mon Sep 17 00:00:00 2001
From: Li Yi Yu <li@posthog.com>
Date: Mon, 16 Oct 2023 17:10:28 -0400
Subject: [PATCH] chore(surveys): report template clicked (#18017)

---
 frontend/src/lib/utils/eventUsageLogic.ts       | 7 +++++++
 frontend/src/scenes/surveys/SurveyTemplates.tsx | 8 ++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/utils/eventUsageLogic.ts b/frontend/src/lib/utils/eventUsageLogic.ts
index 4f3e73e8108f6..a4f41659fe2d6 100644
--- a/frontend/src/lib/utils/eventUsageLogic.ts
+++ b/frontend/src/lib/utils/eventUsageLogic.ts
@@ -45,6 +45,7 @@ import {
 } from 'scenes/insights/sharedUtils'
 import { isGroupPropertyFilter } from 'lib/components/PropertyFilters/utils'
 import { EventIndex } from 'scenes/session-recordings/player/eventIndex'
+import { SurveyTemplateType } from 'scenes/surveys/constants'
 
 export enum DashboardEventSource {
     LongPress = 'long_press',
@@ -498,6 +499,7 @@ export const eventUsageLogic = kea<eventUsageLogicType>({
         reportSurveyStopped: (survey: Survey) => ({ survey }),
         reportSurveyResumed: (survey: Survey) => ({ survey }),
         reportSurveyArchived: (survey: Survey) => ({ survey }),
+        reportSurveyTemplateClicked: (template: SurveyTemplateType) => ({ template }),
         reportProductUnsubscribed: (product: string) => ({ product }),
         // onboarding
         reportOnboardingProductSelected: (productKey: string) => ({ productKey }),
@@ -1234,6 +1236,11 @@ export const eventUsageLogic = kea<eventUsageLogicType>({
                 start_date: survey.start_date,
             })
         },
+        reportSurveyTemplateClicked: ({ template }) => {
+            posthog.capture('survey template clicked', {
+                template,
+            })
+        },
         reportProductUnsubscribed: ({ product }) => {
             const property_key = `unsubscribed_from_${product}`
             posthog.capture('product unsubscribed', {
diff --git a/frontend/src/scenes/surveys/SurveyTemplates.tsx b/frontend/src/scenes/surveys/SurveyTemplates.tsx
index 107fce70b1ed1..8ebf7accf45fb 100644
--- a/frontend/src/scenes/surveys/SurveyTemplates.tsx
+++ b/frontend/src/scenes/surveys/SurveyTemplates.tsx
@@ -8,6 +8,7 @@ import { PageHeader } from 'lib/components/PageHeader'
 import { LemonButton } from '@posthog/lemon-ui'
 import { urls } from 'scenes/urls'
 import { surveyLogic } from './surveyLogic'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
 export const scene: SceneExport = {
     component: SurveyTemplates,
@@ -15,6 +16,7 @@ export const scene: SceneExport = {
 
 export function SurveyTemplates(): JSX.Element {
     const { setSurveyTemplateValues } = useActions(surveyLogic({ id: 'new' }))
+    const { reportSurveyTemplateClicked } = useActions(eventUsageLogic)
 
     return (
         <>
@@ -31,10 +33,12 @@ export function SurveyTemplates(): JSX.Element {
                     return (
                         <div
                             className="flex flex-col items-center"
+                            data-attr="survey-template"
                             key={idx}
-                            onClick={() =>
+                            onClick={() => {
                                 setSurveyTemplateValues({ name: template.type, questions: template.questions })
-                            }
+                                reportSurveyTemplateClicked(template.type)
+                            }}
                         >
                             <span className="mb-2 text-md">
                                 <b>{template.type}</b>