From 498b0aed5bf0b503248f46577075508b98a6ea89 Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Thu, 14 Nov 2024 08:16:19 +0000 Subject: [PATCH 01/14] feat: GROW-284 - Add amplitude to inkeep event --- src/client/thirdParty/Amplitude.tsx | 57 ++++++++++++++++++++--------- src/client/thirdParty/Inkeep.tsx | 12 +++++- 2 files changed, 51 insertions(+), 18 deletions(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index d3f578a3..0be2a697 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -1,9 +1,12 @@ import * as amplitude from '@amplitude/analytics-browser'; import { usePlaygroundSignals } from '../../app/playground/hooks/usePlaygroundSignals'; import { FunctionComponent } from 'react'; +import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; +import { FPJS_CLIENT_TIMEOUT } from '../../const'; const AMPLITUDE_INGRESS_PROXY = 'https://demo.fingerprint.com/ampl-api/2/httpapi'; const EVENT_TYPE = 'Demo Page Viewed'; +const ASK_AI_CHOSEN_EVENT_TYPE = 'Demo Ask AI Help Chosen'; /** * This is an Amplitude plugin that renames the Page view event_properties according to our analytics needs @@ -36,33 +39,53 @@ type AmplitudeProps = { apiKey: string; }; -export const Amplitude: FunctionComponent = ({ apiKey }) => { +function initAmplitude(apiKey: string) { + amplitude.init(apiKey, { + defaultTracking: { + attribution: false, + sessions: false, + formInteractions: false, + fileDownloads: false, + }, + serverUrl: AMPLITUDE_INGRESS_PROXY, + }); +} + +function initPlaygroundSignals() { usePlaygroundSignals({ onServerApiSuccess: (event) => { const visitorId = event.products.identification?.data?.visitorId; const botDetected = event?.products?.botd?.data?.bot?.result === 'bad' ? 'True' : 'False'; amplitude.add(demoPageViewedEventPropertiesEnrichment(botDetected)); - amplitude.init(apiKey, { - defaultTracking: { - pageViews: { - eventType: EVENT_TYPE, - }, - attribution: false, - sessions: false, - formInteractions: false, - fileDownloads: false, - }, - deviceId: visitorId, - serverUrl: AMPLITUDE_INGRESS_PROXY, + + amplitude.track(EVENT_TYPE, { + botDetected, + visitorId, }); + }, + }); +} - // Set Amplify user's custom `botDetected` property based on Fingerprint Bot Detection result - const identifyEvent = new amplitude.Identify(); - identifyEvent.set('botDetected', botDetected); - amplitude.identify(identifyEvent); +export async function trackAskAIkHelpMethodChosen(helpMethod: string) { + const { getData: getVisitorData } = useVisitorData( + { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT }, + { + immediate: false, }, + ); + + const { visitorId } = await getVisitorData({ ignoreCache: true }); + + amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { + helpMethod, + visitorId, }); +} + +export const Amplitude: FunctionComponent = ({ apiKey }) => { + initAmplitude(apiKey); + initPlaygroundSignals(); return null; }; diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 030d3bb8..3c67b0ce 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -9,6 +9,9 @@ import type { } from '@inkeep/uikit'; import { env } from '../../env'; import dynamic from 'next/dynamic'; +import { trackAskAIkHelpMethodChosen } from "./Amplitude"; + +const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked'; /** * Inkeep (AI Help) chat button @@ -26,6 +29,13 @@ type InkeepSharedSettings = { modalSettings: InkeepModalSettings; }; +export const customAnalyticsCallback = async (event) => { + if (event.eventName === GET_HELP_OPTIONS_CLICKED) { + const { name } = event.properties; + await trackAskAIkHelpMethodChosen(name); + } +}; + const useInkeepSettings = (): InkeepSharedSettings => { const apiKey = env.NEXT_PUBLIC_INKEEP_API_KEY; const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID; @@ -36,7 +46,7 @@ const useInkeepSettings = (): InkeepSharedSettings => { integrationId, organizationId, primaryBrandColor: '#F04405', - //logEventCallback: customAnalyticsCallback, + logEventCallback: customAnalyticsCallback, }; const modalSettings: InkeepModalSettings = {}; const searchSettings: InkeepSearchSettings = {}; From 157b6e74162382dd13ac28affb6ac209c90d7c7d Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Mon, 18 Nov 2024 14:08:07 +0000 Subject: [PATCH 02/14] feat: GROW-284 - Add location --- src/client/thirdParty/Amplitude.tsx | 7 +++++++ src/client/thirdParty/Inkeep.tsx | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index 0be2a697..2899afd9 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -3,6 +3,7 @@ import { usePlaygroundSignals } from '../../app/playground/hooks/usePlaygroundSi import { FunctionComponent } from 'react'; import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; import { FPJS_CLIENT_TIMEOUT } from '../../const'; +import { useLocation } from 'react-use'; const AMPLITUDE_INGRESS_PROXY = 'https://demo.fingerprint.com/ampl-api/2/httpapi'; const EVENT_TYPE = 'Demo Page Viewed'; @@ -57,11 +58,17 @@ function initPlaygroundSignals() { const visitorId = event.products.identification?.data?.visitorId; const botDetected = event?.products?.botd?.data?.bot?.result === 'bad' ? 'True' : 'False'; + const location = useLocation(); + const pagePath = location.pathname; + const pageTitle = document.title; + amplitude.add(demoPageViewedEventPropertiesEnrichment(botDetected)); amplitude.track(EVENT_TYPE, { botDetected, visitorId, + 'Docs Page Path': pagePath, + 'Docs Page Title': pageTitle, }); }, }); diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 3c67b0ce..cee66cb9 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -9,7 +9,7 @@ import type { } from '@inkeep/uikit'; import { env } from '../../env'; import dynamic from 'next/dynamic'; -import { trackAskAIkHelpMethodChosen } from "./Amplitude"; +import { trackAskAIkHelpMethodChosen } from './Amplitude'; const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked'; From 283501470bafb0ddc2f1bab9e937eaa1a8fb8e66 Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Mon, 18 Nov 2024 17:35:20 +0000 Subject: [PATCH 03/14] feat: GROW-284 - Refactor code and fix lint --- src/client/thirdParty/Amplitude.tsx | 31 +++++++--------------- src/client/thirdParty/Inkeep.tsx | 41 ++++++++++++++++++++++++----- 2 files changed, 44 insertions(+), 28 deletions(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index 2899afd9..43e0953a 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -1,9 +1,6 @@ import * as amplitude from '@amplitude/analytics-browser'; import { usePlaygroundSignals } from '../../app/playground/hooks/usePlaygroundSignals'; import { FunctionComponent } from 'react'; -import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; -import { FPJS_CLIENT_TIMEOUT } from '../../const'; -import { useLocation } from 'react-use'; const AMPLITUDE_INGRESS_PROXY = 'https://demo.fingerprint.com/ampl-api/2/httpapi'; const EVENT_TYPE = 'Demo Page Viewed'; @@ -52,47 +49,39 @@ function initAmplitude(apiKey: string) { }); } -function initPlaygroundSignals() { +function usePlaygroundSignalsWrapper() { usePlaygroundSignals({ onServerApiSuccess: (event) => { const visitorId = event.products.identification?.data?.visitorId; const botDetected = event?.products?.botd?.data?.bot?.result === 'bad' ? 'True' : 'False'; - const location = useLocation(); - const pagePath = location.pathname; - const pageTitle = document.title; - amplitude.add(demoPageViewedEventPropertiesEnrichment(botDetected)); amplitude.track(EVENT_TYPE, { botDetected, visitorId, - 'Docs Page Path': pagePath, - 'Docs Page Title': pageTitle, }); }, }); } -export async function trackAskAIkHelpMethodChosen(helpMethod: string) { - const { getData: getVisitorData } = useVisitorData( - { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT }, - { - immediate: false, - }, - ); - - const { visitorId } = await getVisitorData({ ignoreCache: true }); - +export async function trackAskAIkHelpMethodChosen( + helpMethod: string, + visitorId: string, + pagePath: string, + pageTitle: string, +) { amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { helpMethod, visitorId, + 'Docs Page Path': pagePath, + 'Docs Page Title': pageTitle, }); } export const Amplitude: FunctionComponent = ({ apiKey }) => { initAmplitude(apiKey); - initPlaygroundSignals(); + usePlaygroundSignalsWrapper(); return null; }; diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index cee66cb9..2bbbd350 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -10,6 +10,10 @@ import type { import { env } from '../../env'; import dynamic from 'next/dynamic'; import { trackAskAIkHelpMethodChosen } from './Amplitude'; +import { GetDataOptions, useVisitorData, VisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; +import { FPJS_CLIENT_TIMEOUT } from '../../const'; +import { useLocation } from 'react-use'; +import { LocationSensorState } from 'react-use/lib/useLocation'; const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked'; @@ -29,18 +33,33 @@ type InkeepSharedSettings = { modalSettings: InkeepModalSettings; }; -export const customAnalyticsCallback = async (event) => { - if (event.eventName === GET_HELP_OPTIONS_CLICKED) { - const { name } = event.properties; - await trackAskAIkHelpMethodChosen(name); - } +export const createCustomAnalyticsCallback = ( + getVisitorData: (getDataOptions?: GetDataOptions) => Promise>, + location: LocationSensorState, +) => { + return async (event) => { + if (event.eventName === GET_HELP_OPTIONS_CLICKED) { + const { visitorId } = await getVisitorData({ ignoreCache: true }); + + const { name } = event.properties; + const pagePath = location.pathname || ''; + const pageTitle = document.title; + + await trackAskAIkHelpMethodChosen(name, visitorId, pagePath, pageTitle); + } + }; }; -const useInkeepSettings = (): InkeepSharedSettings => { +const useInkeepSettings = ( + getVisitorData: (getDataOptions?: GetDataOptions) => Promise>, + location: LocationSensorState, +): InkeepSharedSettings => { const apiKey = env.NEXT_PUBLIC_INKEEP_API_KEY; const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID; const organizationId = env.NEXT_PUBLIC_INKEEP_ORG_ID; + const customAnalyticsCallback = createCustomAnalyticsCallback(getVisitorData, location); + const baseSettings: InkeepBaseSettings = { apiKey, integrationId, @@ -94,7 +113,15 @@ const useInkeepSettings = (): InkeepSharedSettings => { }; export function InkeepChatButton() { - const { baseSettings, aiChatSettings, searchSettings, modalSettings } = useInkeepSettings(); + const { getData: getVisitorData } = useVisitorData( + { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT }, + { + immediate: false, + }, + ); + const location = useLocation(); + + const { baseSettings, aiChatSettings, searchSettings, modalSettings } = useInkeepSettings(getVisitorData, location); const chatButtonProps: InkeepChatButtonProps = { baseSettings, From 760647eb6b5238f31e343f3285260f28f8037f86 Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Mon, 18 Nov 2024 17:40:15 +0000 Subject: [PATCH 04/14] feat: GROW-284 - Add generic type for inkeep event --- src/client/thirdParty/Inkeep.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 2bbbd350..9a03d8cb 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -37,7 +37,7 @@ export const createCustomAnalyticsCallback = ( getVisitorData: (getDataOptions?: GetDataOptions) => Promise>, location: LocationSensorState, ) => { - return async (event) => { + return async (event: any) => { if (event.eventName === GET_HELP_OPTIONS_CLICKED) { const { visitorId } = await getVisitorData({ ignoreCache: true }); From 1cf8ee31a1683dd9c2b43176f205c1c0ae81db23 Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Mon, 25 Nov 2024 11:15:11 +0000 Subject: [PATCH 05/14] feat: GROW-284 - PR remarks and reverting amplitude changes and keeping only the track --- src/client/thirdParty/Amplitude.tsx | 66 ++++++++++++++--------------- src/client/thirdParty/Inkeep.tsx | 43 +++++++++---------- 2 files changed, 51 insertions(+), 58 deletions(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index 43e0953a..f3d549e9 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -37,51 +37,49 @@ type AmplitudeProps = { apiKey: string; }; -function initAmplitude(apiKey: string) { - amplitude.init(apiKey, { - defaultTracking: { - attribution: false, - sessions: false, - formInteractions: false, - fileDownloads: false, - }, - serverUrl: AMPLITUDE_INGRESS_PROXY, +export function trackAskAIkHelpMethodChosen( + helpMethod: string, + visitorId: string, + pagePath: string, + pageTitle: string, +) { + debugger; + amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { + helpMethod, + visitorId, + 'Docs Page Path': pagePath, + 'Docs Page Title': pageTitle, }); } -function usePlaygroundSignalsWrapper() { + +export const Amplitude: FunctionComponent = ({ apiKey }) => { usePlaygroundSignals({ onServerApiSuccess: (event) => { const visitorId = event.products.identification?.data?.visitorId; const botDetected = event?.products?.botd?.data?.bot?.result === 'bad' ? 'True' : 'False'; amplitude.add(demoPageViewedEventPropertiesEnrichment(botDetected)); - - amplitude.track(EVENT_TYPE, { - botDetected, - visitorId, + amplitude.init(apiKey, { + defaultTracking: { + pageViews: { + eventType: EVENT_TYPE, + }, + attribution: false, + sessions: false, + formInteractions: false, + fileDownloads: false, + }, + deviceId: visitorId, + serverUrl: AMPLITUDE_INGRESS_PROXY, }); - }, - }); -} -export async function trackAskAIkHelpMethodChosen( - helpMethod: string, - visitorId: string, - pagePath: string, - pageTitle: string, -) { - amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { - helpMethod, - visitorId, - 'Docs Page Path': pagePath, - 'Docs Page Title': pageTitle, + // Set Amplify user's custom `botDetected` property based on Fingerprint Bot Detection result + const identifyEvent = new amplitude.Identify(); + identifyEvent.set('botDetected', botDetected); + amplitude.identify(identifyEvent); + }, }); -} - -export const Amplitude: FunctionComponent = ({ apiKey }) => { - initAmplitude(apiKey); - usePlaygroundSignalsWrapper(); return null; -}; +}; \ No newline at end of file diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 9a03d8cb..b9bf9cb2 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -34,31 +34,27 @@ type InkeepSharedSettings = { }; export const createCustomAnalyticsCallback = ( - getVisitorData: (getDataOptions?: GetDataOptions) => Promise>, - location: LocationSensorState, + visitorId: string, ) => { return async (event: any) => { if (event.eventName === GET_HELP_OPTIONS_CLICKED) { - const { visitorId } = await getVisitorData({ ignoreCache: true }); - const { name } = event.properties; - const pagePath = location.pathname || ''; + const pagePath = document.location.pathname; const pageTitle = document.title; - await trackAskAIkHelpMethodChosen(name, visitorId, pagePath, pageTitle); + trackAskAIkHelpMethodChosen(name, visitorId, pagePath, pageTitle); } }; }; const useInkeepSettings = ( - getVisitorData: (getDataOptions?: GetDataOptions) => Promise>, - location: LocationSensorState, + visitorId: string ): InkeepSharedSettings => { const apiKey = env.NEXT_PUBLIC_INKEEP_API_KEY; const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID; const organizationId = env.NEXT_PUBLIC_INKEEP_ORG_ID; - const customAnalyticsCallback = createCustomAnalyticsCallback(getVisitorData, location); + const customAnalyticsCallback = createCustomAnalyticsCallback(visitorId); const baseSettings: InkeepBaseSettings = { apiKey, @@ -113,22 +109,21 @@ const useInkeepSettings = ( }; export function InkeepChatButton() { - const { getData: getVisitorData } = useVisitorData( - { ignoreCache: true, timeout: FPJS_CLIENT_TIMEOUT }, - { - immediate: false, - }, - ); - const location = useLocation(); + const { data } = useVisitorData({ extendedResult: true, timeout: FPJS_CLIENT_TIMEOUT }); - const { baseSettings, aiChatSettings, searchSettings, modalSettings } = useInkeepSettings(getVisitorData, location); + const visitorId = data?.visitorId - const chatButtonProps: InkeepChatButtonProps = { - baseSettings, - aiChatSettings, - searchSettings, - modalSettings, - }; + debugger; + if (visitorId) { + const { baseSettings, aiChatSettings, searchSettings, modalSettings } = useInkeepSettings(visitorId); + + const chatButtonProps: InkeepChatButtonProps = { + baseSettings, + aiChatSettings, + searchSettings, + modalSettings, + }; - return ; + return ; + } } From 24f0eb597f9e9fe38df6947e94f18ff2b2777152 Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Mon, 25 Nov 2024 11:34:24 +0000 Subject: [PATCH 06/14] feat: GROW-284 - Fixing lint --- src/client/thirdParty/Amplitude.tsx | 12 ++++----- src/client/thirdParty/Inkeep.tsx | 38 +++++++++++++---------------- 2 files changed, 22 insertions(+), 28 deletions(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index f3d549e9..e3d8ae89 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -38,12 +38,11 @@ type AmplitudeProps = { }; export function trackAskAIkHelpMethodChosen( - helpMethod: string, - visitorId: string, - pagePath: string, - pageTitle: string, + helpMethod: string, + visitorId: string, + pagePath: string, + pageTitle: string, ) { - debugger; amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { helpMethod, visitorId, @@ -52,7 +51,6 @@ export function trackAskAIkHelpMethodChosen( }); } - export const Amplitude: FunctionComponent = ({ apiKey }) => { usePlaygroundSignals({ onServerApiSuccess: (event) => { @@ -82,4 +80,4 @@ export const Amplitude: FunctionComponent = ({ apiKey }) => { }); return null; -}; \ No newline at end of file +}; diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index b9bf9cb2..3db668c5 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -10,10 +10,8 @@ import type { import { env } from '../../env'; import dynamic from 'next/dynamic'; import { trackAskAIkHelpMethodChosen } from './Amplitude'; -import { GetDataOptions, useVisitorData, VisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; +import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; import { FPJS_CLIENT_TIMEOUT } from '../../const'; -import { useLocation } from 'react-use'; -import { LocationSensorState } from 'react-use/lib/useLocation'; const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked'; @@ -33,9 +31,7 @@ type InkeepSharedSettings = { modalSettings: InkeepModalSettings; }; -export const createCustomAnalyticsCallback = ( - visitorId: string, -) => { +export const createCustomAnalyticsCallback = (visitorId: string) => { return async (event: any) => { if (event.eventName === GET_HELP_OPTIONS_CLICKED) { const { name } = event.properties; @@ -47,9 +43,7 @@ export const createCustomAnalyticsCallback = ( }; }; -const useInkeepSettings = ( - visitorId: string -): InkeepSharedSettings => { +const useInkeepSettings = (visitorId: string): InkeepSharedSettings => { const apiKey = env.NEXT_PUBLIC_INKEEP_API_KEY; const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID; const organizationId = env.NEXT_PUBLIC_INKEEP_ORG_ID; @@ -110,20 +104,22 @@ const useInkeepSettings = ( export function InkeepChatButton() { const { data } = useVisitorData({ extendedResult: true, timeout: FPJS_CLIENT_TIMEOUT }); + const visitorId = data?.visitorId; - const visitorId = data?.visitorId + const settings = useInkeepSettings(visitorId ?? ''); - debugger; - if (visitorId) { - const { baseSettings, aiChatSettings, searchSettings, modalSettings } = useInkeepSettings(visitorId); + if (!visitorId || !settings) { + return null; + } - const chatButtonProps: InkeepChatButtonProps = { - baseSettings, - aiChatSettings, - searchSettings, - modalSettings, - }; + const { baseSettings, aiChatSettings, searchSettings, modalSettings } = settings; - return ; - } + const chatButtonProps: InkeepChatButtonProps = { + baseSettings, + aiChatSettings, + searchSettings, + modalSettings, + }; + + return ; } From 8bb6efdf7c23159573d0d6d293f87997009ed749 Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Wed, 27 Nov 2024 23:09:14 +0000 Subject: [PATCH 07/14] feat: GROW-284 - PR Remarks --- src/client/thirdParty/Amplitude.tsx | 6 ++-- src/client/thirdParty/Inkeep.tsx | 49 +++++++++++------------------ 2 files changed, 21 insertions(+), 34 deletions(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index e3d8ae89..b929f712 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -37,7 +37,7 @@ type AmplitudeProps = { apiKey: string; }; -export function trackAskAIkHelpMethodChosen( +export function trackAskAIHelpMethodChosen( helpMethod: string, visitorId: string, pagePath: string, @@ -46,8 +46,8 @@ export function trackAskAIkHelpMethodChosen( amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { helpMethod, visitorId, - 'Docs Page Path': pagePath, - 'Docs Page Title': pageTitle, + 'Demo Page Path': pagePath, + 'Demo Page Title': pageTitle, }); } diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 3db668c5..5e1ee993 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -9,7 +9,7 @@ import type { } from '@inkeep/uikit'; import { env } from '../../env'; import dynamic from 'next/dynamic'; -import { trackAskAIkHelpMethodChosen } from './Amplitude'; +import { trackAskAIHelpMethodChosen } from './Amplitude'; import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; import { FPJS_CLIENT_TIMEOUT } from '../../const'; @@ -31,31 +31,30 @@ type InkeepSharedSettings = { modalSettings: InkeepModalSettings; }; -export const createCustomAnalyticsCallback = (visitorId: string) => { - return async (event: any) => { - if (event.eventName === GET_HELP_OPTIONS_CLICKED) { - const { name } = event.properties; - const pagePath = document.location.pathname; - const pageTitle = document.title; - - trackAskAIkHelpMethodChosen(name, visitorId, pagePath, pageTitle); - } - }; -}; - -const useInkeepSettings = (visitorId: string): InkeepSharedSettings => { +const useInkeepSettings = (): InkeepSharedSettings => { const apiKey = env.NEXT_PUBLIC_INKEEP_API_KEY; const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID; const organizationId = env.NEXT_PUBLIC_INKEEP_ORG_ID; - const customAnalyticsCallback = createCustomAnalyticsCallback(visitorId); + const { data } = useVisitorData({ extendedResult: true, timeout: FPJS_CLIENT_TIMEOUT }); + const visitorId = data?.visitorId || ''; + + + const logEventCallback = (event) => { + debugger; + const { name } = event.properties; + const pagePath = document.location.pathname; + const pageTitle = document.title; + + trackAskAIHelpMethodChosen(name, visitorId, pagePath, pageTitle); + } const baseSettings: InkeepBaseSettings = { apiKey, integrationId, organizationId, primaryBrandColor: '#F04405', - logEventCallback: customAnalyticsCallback, + logEventCallback, }; const modalSettings: InkeepModalSettings = {}; const searchSettings: InkeepSearchSettings = {}; @@ -103,23 +102,11 @@ const useInkeepSettings = (visitorId: string): InkeepSharedSettings => { }; export function InkeepChatButton() { - const { data } = useVisitorData({ extendedResult: true, timeout: FPJS_CLIENT_TIMEOUT }); - const visitorId = data?.visitorId; - - const settings = useInkeepSettings(visitorId ?? ''); + const settings = useInkeepSettings(); - if (!visitorId || !settings) { + if (!settings) { return null; } - const { baseSettings, aiChatSettings, searchSettings, modalSettings } = settings; - - const chatButtonProps: InkeepChatButtonProps = { - baseSettings, - aiChatSettings, - searchSettings, - modalSettings, - }; - - return ; + return ; } From 5488cd0208a8ac35fa8978423d1c03959cd2be59 Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Wed, 27 Nov 2024 23:11:58 +0000 Subject: [PATCH 08/14] feat: GROW-284 - PR Remarks --- src/client/thirdParty/Amplitude.tsx | 7 +------ src/client/thirdParty/Inkeep.tsx | 8 ++------ 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index b929f712..72cbd109 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -37,12 +37,7 @@ type AmplitudeProps = { apiKey: string; }; -export function trackAskAIHelpMethodChosen( - helpMethod: string, - visitorId: string, - pagePath: string, - pageTitle: string, -) { +export function trackAskAIHelpMethodChosen(helpMethod: string, visitorId: string, pagePath: string, pageTitle: string) { amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { helpMethod, visitorId, diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 0fc2b21e..0abf4c8b 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -1,6 +1,5 @@ 'use client'; -import { InkeepChatButtonProps } from '@inkeep/uikit'; import type { InkeepAIChatSettings, InkeepSearchSettings, @@ -13,8 +12,6 @@ import { trackAskAIHelpMethodChosen } from './Amplitude'; import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; import { FPJS_CLIENT_TIMEOUT } from '../../const'; -const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked'; - /** * Inkeep (AI Help) chat button * Implemented according to https://docs.inkeep.com/integrations/nextjs/chat-button @@ -39,15 +36,14 @@ const useInkeepSettings = (): InkeepSharedSettings => { const { data } = useVisitorData({ extendedResult: true, timeout: FPJS_CLIENT_TIMEOUT }); const visitorId = data?.visitorId || ''; - - const logEventCallback = (event) => { + const logEventCallback = (event: any) => { debugger; const { name } = event.properties; const pagePath = document.location.pathname; const pageTitle = document.title; trackAskAIHelpMethodChosen(name, visitorId, pagePath, pageTitle); - } + }; const baseSettings: InkeepBaseSettings = { apiKey, From 77f4a9aa4d4eb0adb6052f6c1f051f44732dae76 Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Thu, 28 Nov 2024 10:37:17 +0000 Subject: [PATCH 09/14] feat: GROW-284 - Remove debugger --- src/client/thirdParty/Inkeep.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 0abf4c8b..e4220361 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -37,7 +37,6 @@ const useInkeepSettings = (): InkeepSharedSettings => { const visitorId = data?.visitorId || ''; const logEventCallback = (event: any) => { - debugger; const { name } = event.properties; const pagePath = document.location.pathname; const pageTitle = document.title; From b6de1440b0e4652103e9afca26b1ca48b6a005fb Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Thu, 28 Nov 2024 10:54:04 +0000 Subject: [PATCH 10/14] feat: GROW-284 - Remove settings validation --- src/client/thirdParty/Inkeep.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index e4220361..bc2a699a 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -100,9 +100,5 @@ const useInkeepSettings = (): InkeepSharedSettings => { export function InkeepChatButton() { const settings = useInkeepSettings(); - if (!settings) { - return null; - } - return ; } From 9a8ee0b8189f8e780ba55260a858b8f3b871dcbb Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Thu, 28 Nov 2024 11:32:23 +0000 Subject: [PATCH 11/14] feat: GROW-284 - bring back eventName --- src/client/thirdParty/Inkeep.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index bc2a699a..8c4ea637 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -12,6 +12,8 @@ import { trackAskAIHelpMethodChosen } from './Amplitude'; import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; import { FPJS_CLIENT_TIMEOUT } from '../../const'; +const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked'; + /** * Inkeep (AI Help) chat button * Implemented according to https://docs.inkeep.com/integrations/nextjs/chat-button @@ -37,11 +39,13 @@ const useInkeepSettings = (): InkeepSharedSettings => { const visitorId = data?.visitorId || ''; const logEventCallback = (event: any) => { - const { name } = event.properties; - const pagePath = document.location.pathname; - const pageTitle = document.title; + if (event.eventName === GET_HELP_OPTIONS_CLICKED) { + const { name } = event.properties; + const pagePath = document.location.pathname; + const pageTitle = document.title; - trackAskAIHelpMethodChosen(name, visitorId, pagePath, pageTitle); + trackAskAIHelpMethodChosen(name, visitorId, pagePath, pageTitle); + } }; const baseSettings: InkeepBaseSettings = { From 639db7ce1401c25fd26639d227f23194f8a53014 Mon Sep 17 00:00:00 2001 From: Juraj Uhlar Date: Thu, 28 Nov 2024 11:47:42 +0000 Subject: [PATCH 12/14] chore: clean up --- src/client/thirdParty/Amplitude.tsx | 26 +++++++++++++++----------- src/client/thirdParty/Inkeep.tsx | 18 +++++++++--------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index 72cbd109..7d10d0d9 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -3,8 +3,10 @@ import { usePlaygroundSignals } from '../../app/playground/hooks/usePlaygroundSi import { FunctionComponent } from 'react'; const AMPLITUDE_INGRESS_PROXY = 'https://demo.fingerprint.com/ampl-api/2/httpapi'; -const EVENT_TYPE = 'Demo Page Viewed'; -const ASK_AI_CHOSEN_EVENT_TYPE = 'Demo Ask AI Help Chosen'; +const AMPLITUDE_EVENT = { + DEMO_PAGE_VIEWED: 'Demo Page Viewed', + DEMO_ASK_AI_HELP_CHOSEN: 'Demo Ask AI Help Chosen', +} as const; /** * This is an Amplitude plugin that renames the Page view event_properties according to our analytics needs @@ -15,7 +17,7 @@ const demoPageViewedEventPropertiesEnrichment = (botDetected: 'True' | 'False'): setup: async () => undefined, execute: async (event) => { // Only apply to Demo Page View events - if (event.event_type !== EVENT_TYPE) { + if (event.event_type !== AMPLITUDE_EVENT.DEMO_PAGE_VIEWED) { return event; } @@ -37,13 +39,15 @@ type AmplitudeProps = { apiKey: string; }; -export function trackAskAIHelpMethodChosen(helpMethod: string, visitorId: string, pagePath: string, pageTitle: string) { - amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { - helpMethod, - visitorId, - 'Demo Page Path': pagePath, - 'Demo Page Title': pageTitle, - }); +type AskAIHelpChosenEventProperties = { + visitorId: string; + helpMethod: string; + 'Demo Page Path': string; + 'Demo Page Title': string; +}; + +export function trackAskAIHelpChosen(properties: AskAIHelpChosenEventProperties) { + amplitude.track(AMPLITUDE_EVENT.DEMO_ASK_AI_HELP_CHOSEN, properties); } export const Amplitude: FunctionComponent = ({ apiKey }) => { @@ -56,7 +60,7 @@ export const Amplitude: FunctionComponent = ({ apiKey }) => { amplitude.init(apiKey, { defaultTracking: { pageViews: { - eventType: EVENT_TYPE, + eventType: AMPLITUDE_EVENT.DEMO_PAGE_VIEWED, }, attribution: false, sessions: false, diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 8c4ea637..aaee31bb 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -8,7 +8,7 @@ import type { } from '@inkeep/uikit'; import { env } from '../../env'; import dynamic from 'next/dynamic'; -import { trackAskAIHelpMethodChosen } from './Amplitude'; +import { trackAskAIHelpChosen } from './Amplitude'; import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; import { FPJS_CLIENT_TIMEOUT } from '../../const'; @@ -34,17 +34,17 @@ const useInkeepSettings = (): InkeepSharedSettings => { const apiKey = env.NEXT_PUBLIC_INKEEP_API_KEY; const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID; const organizationId = env.NEXT_PUBLIC_INKEEP_ORG_ID; - - const { data } = useVisitorData({ extendedResult: true, timeout: FPJS_CLIENT_TIMEOUT }); - const visitorId = data?.visitorId || ''; + const { data } = useVisitorData({ timeout: FPJS_CLIENT_TIMEOUT }); + const visitorId = data?.visitorId ?? ''; const logEventCallback = (event: any) => { if (event.eventName === GET_HELP_OPTIONS_CLICKED) { - const { name } = event.properties; - const pagePath = document.location.pathname; - const pageTitle = document.title; - - trackAskAIHelpMethodChosen(name, visitorId, pagePath, pageTitle); + trackAskAIHelpChosen({ + visitorId, + helpMethod: event.properties.name, + 'Demo Page Path': document.location.pathname, + 'Demo Page Title': document.title, + }); } }; From 3bd4174657e1272e3aa3002e2301f33e2aeb1e8f Mon Sep 17 00:00:00 2001 From: Henrique Barreto Date: Thu, 28 Nov 2024 14:30:01 +0000 Subject: [PATCH 13/14] feat: GROW-284 - remove visitorId from event properties --- src/client/thirdParty/Amplitude.tsx | 3 +-- src/client/thirdParty/Inkeep.tsx | 7 +------ 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/client/thirdParty/Amplitude.tsx b/src/client/thirdParty/Amplitude.tsx index 72cbd109..4afc70aa 100644 --- a/src/client/thirdParty/Amplitude.tsx +++ b/src/client/thirdParty/Amplitude.tsx @@ -37,10 +37,9 @@ type AmplitudeProps = { apiKey: string; }; -export function trackAskAIHelpMethodChosen(helpMethod: string, visitorId: string, pagePath: string, pageTitle: string) { +export function trackAskAIHelpMethodChosen(helpMethod: string, pagePath: string, pageTitle: string) { amplitude.track(ASK_AI_CHOSEN_EVENT_TYPE, { helpMethod, - visitorId, 'Demo Page Path': pagePath, 'Demo Page Title': pageTitle, }); diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index 8c4ea637..c9b7058e 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -9,8 +9,6 @@ import type { import { env } from '../../env'; import dynamic from 'next/dynamic'; import { trackAskAIHelpMethodChosen } from './Amplitude'; -import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'; -import { FPJS_CLIENT_TIMEOUT } from '../../const'; const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked'; @@ -35,16 +33,13 @@ const useInkeepSettings = (): InkeepSharedSettings => { const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID; const organizationId = env.NEXT_PUBLIC_INKEEP_ORG_ID; - const { data } = useVisitorData({ extendedResult: true, timeout: FPJS_CLIENT_TIMEOUT }); - const visitorId = data?.visitorId || ''; - const logEventCallback = (event: any) => { if (event.eventName === GET_HELP_OPTIONS_CLICKED) { const { name } = event.properties; const pagePath = document.location.pathname; const pageTitle = document.title; - trackAskAIHelpMethodChosen(name, visitorId, pagePath, pageTitle); + trackAskAIHelpMethodChosen(name, pagePath, pageTitle); } }; From bb57d64f2e7e25928547eb8e1dce8b34d3859937 Mon Sep 17 00:00:00 2001 From: Juraj Uhlar Date: Thu, 28 Nov 2024 17:24:06 +0000 Subject: [PATCH 14/14] fix: remove `any` type --- src/client/thirdParty/Inkeep.tsx | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/client/thirdParty/Inkeep.tsx b/src/client/thirdParty/Inkeep.tsx index cf66e440..ef6f60c3 100644 --- a/src/client/thirdParty/Inkeep.tsx +++ b/src/client/thirdParty/Inkeep.tsx @@ -10,8 +10,6 @@ import { env } from '../../env'; import dynamic from 'next/dynamic'; import { trackAskAIHelpChosen } from './Amplitude'; -const GET_HELP_OPTIONS_CLICKED = 'get_help_option_clicked'; - /** * Inkeep (AI Help) chat button * Implemented according to https://docs.inkeep.com/integrations/nextjs/chat-button @@ -33,22 +31,20 @@ const useInkeepSettings = (): InkeepSharedSettings => { const integrationId = env.NEXT_PUBLIC_INKEEP_INTEGRATION_ID; const organizationId = env.NEXT_PUBLIC_INKEEP_ORG_ID; - const logEventCallback = (event: any) => { - if (event.eventName === GET_HELP_OPTIONS_CLICKED) { - trackAskAIHelpChosen({ - helpMethod: event.properties.name, - 'Demo Page Path': document.location.pathname, - 'Demo Page Title': document.title, - }); - } - }; - const baseSettings: InkeepBaseSettings = { apiKey, integrationId, organizationId, primaryBrandColor: '#F04405', - logEventCallback, + logEventCallback: (event) => { + if (event.eventName === 'get_help_option_clicked') { + trackAskAIHelpChosen({ + helpMethod: event.properties.name, + 'Demo Page Path': document.location.pathname, + 'Demo Page Title': document.title, + }); + } + }, }; const modalSettings: InkeepModalSettings = {}; const searchSettings: InkeepSearchSettings = {};