From 00851e2fcfdd49f6a856758b33b86e25a331f504 Mon Sep 17 00:00:00 2001 From: Rodney Norris Date: Tue, 17 Sep 2024 13:17:34 -0500 Subject: [PATCH] [Search][Onboarding] Add telemetry for Start Page code view (#193099) ## Summary Added telemetry tracking events for the start page code view. Specifically tracking when user selects a language and copies the example code snippets. (cherry picked from commit f01f68e05918195cbf47e46f9bce6d0e938a3290) --- .../public/analytics/constants.ts | 3 ++ .../public/components/start/code_sample.tsx | 37 +++++++++++----- .../components/start/create_index_code.tsx | 43 +++++++++++++++---- 3 files changed, 65 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/search_indices/public/analytics/constants.ts b/x-pack/plugins/search_indices/public/analytics/constants.ts index bfbe476db7a30..48ecec88ff053 100644 --- a/x-pack/plugins/search_indices/public/analytics/constants.ts +++ b/x-pack/plugins/search_indices/public/analytics/constants.ts @@ -10,4 +10,7 @@ export enum AnalyticsEvents { startPageShowCodeClick = 'start_page_show_code', startPageShowCreateIndexUIClick = 'start_page_show_create_index_ui', startCreateIndexClick = 'start_create_index', + startCreateIndexLanguageSelect = 'start_code_lang_select', + startCreateIndexCodeCopyInstall = 'start_code_copy_install', + startCreateIndexCodeCopy = 'start_code_copy', } diff --git a/x-pack/plugins/search_indices/public/components/start/code_sample.tsx b/x-pack/plugins/search_indices/public/components/start/code_sample.tsx index 017424e287a61..fbc1c7be8af74 100644 --- a/x-pack/plugins/search_indices/public/components/start/code_sample.tsx +++ b/x-pack/plugins/search_indices/public/components/start/code_sample.tsx @@ -4,6 +4,8 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ +// Disabled so we can track the on copy event by adding an onClick to a div +/* eslint-disable jsx-a11y/click-events-have-key-events */ import React from 'react'; import { @@ -19,9 +21,22 @@ export interface CodeSampleProps { title: string; language: string; code: string; + onCodeCopyClick?: React.MouseEventHandler; } -export const CodeSample = ({ title, language, code }: CodeSampleProps) => { +export const CodeSample = ({ title, language, code, onCodeCopyClick }: CodeSampleProps) => { + const onCodeClick = React.useCallback( + (e: React.MouseEvent) => { + if (onCodeCopyClick === undefined) return; + if (e.target instanceof HTMLElement) { + if (e.target.dataset?.testSubj === 'euiCodeBlockCopy') { + onCodeCopyClick(e); + } + } + }, + [onCodeCopyClick] + ); + return ( @@ -30,15 +45,17 @@ export const CodeSample = ({ title, language, code }: CodeSampleProps) => { - - {code} - +
+ + {code} + +
diff --git a/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx b/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx index b78137e7a3fdd..8c0f1973378b5 100644 --- a/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx +++ b/x-pack/plugins/search_indices/public/components/start/create_index_code.tsx @@ -4,20 +4,22 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React, { useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { TryInConsoleButton } from '@kbn/try-in-console'; -import { useKibana } from '../../hooks/use_kibana'; -import { CodeSample } from './code_sample'; -import { CreateIndexFormState } from './types'; - +import { AnalyticsEvents } from '../../analytics/constants'; import { Languages, AvailableLanguages, LanguageOptions } from '../../code_examples'; import { DenseVectorSeverlessCodeExamples } from '../../code_examples/create_index'; +import { useUsageTracker } from '../../hooks/use_usage_tracker'; +import { useKibana } from '../../hooks/use_kibana'; +import { useElasticsearchUrl } from '../../hooks/use_elasticsearch_url'; import { LanguageSelector } from '../shared/language_selector'; -import { useElasticsearchUrl } from '../../hooks/use_elasticsearch_url'; + +import { CodeSample } from './code_sample'; +import { CreateIndexFormState } from './types'; export interface CreateIndexCodeViewProps { createIndexForm: CreateIndexFormState; @@ -28,10 +30,21 @@ const SelectedCodeExamples = DenseVectorSeverlessCodeExamples; export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProps) => { const { application, share, console: consolePlugin } = useKibana().services; + const usageTracker = useUsageTracker(); + // TODO: initing this should be dynamic and possibly saved in the form state const [selectedLanguage, setSelectedLanguage] = useState('python'); + const onSelectLanguage = useCallback( + (value: AvailableLanguages) => { + setSelectedLanguage(value); + usageTracker.count([ + AnalyticsEvents.startCreateIndexLanguageSelect, + `${AnalyticsEvents.startCreateIndexLanguageSelect}_${value}`, + ]); + }, + [usageTracker] + ); const elasticsearchUrl = useElasticsearchUrl(); - const codeParams = useMemo(() => { return { indexName: createIndexForm.indexName || undefined, @@ -49,7 +62,7 @@ export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProp setSelectedLanguage(value)} + onSelectLanguage={onSelectLanguage} /> {selectedLanguage === 'curl' && ( @@ -70,6 +83,12 @@ export const CreateIndexCodeView = ({ createIndexForm }: CreateIndexCodeViewProp })} language="shell" code={selectedCodeExample.installCommand} + onCodeCopyClick={() => { + usageTracker.click([ + AnalyticsEvents.startCreateIndexCodeCopyInstall, + `${AnalyticsEvents.startCreateIndexCodeCopyInstall}_${selectedLanguage}`, + ]); + }} /> )} { + usageTracker.click([ + AnalyticsEvents.startCreateIndexCodeCopy, + `${AnalyticsEvents.startCreateIndexCodeCopy}_${selectedLanguage}`, + // TODO: vector should be a parameter when have multiple options + `${AnalyticsEvents.startCreateIndexCodeCopy}_${selectedLanguage}_vector`, + ]); + }} /> );