Track insight event when embedded assistant is displayed (#3616)

Author: SamyPesse

.changeset/funny-experts-destroy.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Track insight event when embedded assistant is displayed.

bun.lock

@@ -295,7 +295,7 @@
     "react-dom": "^19.0.0",
   },
   "catalog": {
-    "@gitbook/api": "^0.137.0",
+    "@gitbook/api": "^0.138.0",
     "bidc": "^0.0.2",
   },
   "packages": {
@@ -661,7 +661,7 @@
 
     "@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@6.6.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "6.6.0" } }, "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg=="],
 
-    "@gitbook/api": ["@gitbook/api@0.137.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-3pTNbHI4kJT7ikqSdSLa2UCB0dOPOTzOUHcsCTLrk+rJVjTAFAJmTEW/Ax2prnwZ75ran2hz9/FhxUAGhp/8Mg=="],
+    "@gitbook/api": ["@gitbook/api@0.138.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-6jYH1R5IpmbFj3qUyDGuUBaABCinKQcqNCtTKtql0MSPaFp9KVnqyBsIaq/s9HohjCpyU1/EoddwzAaJWHWkkw=="],
 
     "@gitbook/browser-types": ["@gitbook/browser-types@workspace:packages/browser-types"],
 

package.json

@@ -34,7 +34,7 @@
     "workspaces": {
         "packages": ["packages/*"],
         "catalog": {
-            "@gitbook/api": "^0.137.0",
+            "@gitbook/api": "^0.138.0",
             "bidc": "^0.0.2"
         }
     },

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -20,6 +20,7 @@ import {
     EmbeddableFrameSubtitle,
     EmbeddableFrameTitle,
 } from '../Embeddable/EmbeddableFrame';
+import { useTrackEvent } from '../Insights';
 import { useNow } from '../hooks';
 import { Button } from '../primitives';
 import { AIChatControlButton } from './AIChatControlButton';
@@ -54,6 +55,16 @@ export function AIChat(props: { trademark: boolean }) {
         []
     );
 
+    // Track the view of the AI chat
+    const trackEvent = useTrackEvent();
+    React.useEffect(() => {
+        if (chat.opened) {
+            trackEvent({
+                type: 'ask_view',
+            });
+        }
+    }, [chat.opened, trackEvent]);
+
     if (!chat.opened) {
         return null;
     }

packages/gitbook/src/components/Embeddable/EmbeddableAIChat.tsx

@@ -7,6 +7,9 @@ import {
     AIChatDynamicIcon,
     AIChatSubtitle,
 } from '@/components/AIChat';
+import * as api from '@gitbook/api';
+import React from 'react';
+import { useTrackEvent } from '../Insights';
 import {
     EmbeddableFrame,
     EmbeddableFrameBody,
@@ -28,6 +31,20 @@ export function EmbeddableAIChat(props: {
     const chatController = useAIChatController();
     const configuration = useEmbeddableConfiguration();
 
+    // Track the view of the AI chat
+    const trackEvent = useTrackEvent();
+    React.useEffect(() => {
+        trackEvent(
+            {
+                type: 'ask_view',
+            },
+            {
+                pageId: null,
+                displayContext: api.SiteInsightsDisplayContext.Embed,
+            }
+        );
+    }, [trackEvent]);
+
     return (
         <EmbeddableFrame>
             <EmbeddableFrameHeader>

packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx

@@ -2,6 +2,7 @@ import { type PagePathParams, getSitePageData } from '@/components/SitePage';
 
 import { PageBody } from '@/components/PageBody';
 import type { GitBookSiteContext } from '@/lib/context';
+import { SiteInsightsDisplayContext } from '@gitbook/api';
 import type { Metadata } from 'next';
 import { Button } from '../primitives';
 import {
@@ -54,6 +55,7 @@ export async function EmbeddableDocsPage(props: EmbeddableDocsPageProps) {
                         ancestors={ancestors}
                         document={document}
                         withPageFeedback={withPageFeedback}
+                        insightsDisplayContext={SiteInsightsDisplayContext.Embed}
                     />
                 </div>
             </EmbeddableFrameBody>

packages/gitbook/src/components/Insights/InsightsProvider.tsx

@@ -16,6 +16,7 @@ export type InsightsEventName = api.SiteInsightsEvent['type'];
  * Context for an event on a page.
  */
 export interface InsightsEventPageContext {
+    displayContext: api.SiteInsightsDisplayContext;
     pageId: string | null;
 }
 
@@ -265,6 +266,7 @@ function transformEvents(input: {
         siteShareKey: input.context.siteShareKey ?? null,
         revision: input.context.revisionId,
         page: input.pageContext.pageId,
+        displayContext: input.pageContext.displayContext,
     };
 
     return input.events.map((partialEvent) => {

packages/gitbook/src/components/Insights/TrackPageViewEvent.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { SiteInsightsDisplayContext } from '@gitbook/api';
 import * as React from 'react';
 
 import { useCurrentPage } from '../hooks';
@@ -8,7 +9,10 @@ import { useTrackEvent } from './InsightsProvider';
 /**
  * Track a page view event.
  */
-export function TrackPageViewEvent() {
+export function TrackPageViewEvent(props: {
+    displayContext: SiteInsightsDisplayContext;
+}) {
+    const { displayContext } = props;
     const page = useCurrentPage();
     const trackEvent = useTrackEvent();
 
@@ -19,9 +23,10 @@ export function TrackPageViewEvent() {
             },
             {
                 pageId: page?.pageId ?? null,
+                displayContext,
             }
         );
-    }, [page, trackEvent]);
+    }, [page, trackEvent, displayContext]);
 
     return null;
 }

packages/gitbook/src/components/PageBody/PageBody.tsx

@@ -1,5 +1,5 @@
 import type { GitBookSiteContext } from '@/lib/context';
-import type { JSONDocument, RevisionPageDocument } from '@gitbook/api';
+import type { JSONDocument, RevisionPageDocument, SiteInsightsDisplayContext } from '@gitbook/api';
 import React from 'react';
 
 import { getSpaceLanguage } from '@/intl/server';
@@ -26,8 +26,9 @@ export function PageBody(props: {
     ancestors: AncestorRevisionPage[];
     document: JSONDocument | null;
     withPageFeedback: boolean;
+    insightsDisplayContext: SiteInsightsDisplayContext;
 }) {
-    const { page, context, ancestors, document, withPageFeedback } = props;
+    const { page, context, ancestors, document, withPageFeedback, insightsDisplayContext } = props;
     const { customization } = context;
 
     const contentFullWidth = document ? hasFullWidthBlock(document) : false;
@@ -117,7 +118,7 @@ export function PageBody(props: {
                 }
             </main>
 
-            <TrackPageViewEvent />
+            <TrackPageViewEvent displayContext={insightsDisplayContext} />
         </CurrentPageProvider>
     );
 }

packages/gitbook/src/components/SitePage/SitePage.tsx

@@ -1,6 +1,10 @@
 import type { GitBookSiteContext } from '@/lib/context';
 import { getPageDocument } from '@/lib/data';
-import { CustomizationHeaderPreset, CustomizationThemeMode } from '@gitbook/api';
+import {
+    CustomizationHeaderPreset,
+    CustomizationThemeMode,
+    SiteInsightsDisplayContext,
+} from '@gitbook/api';
 import type { Metadata, Viewport } from 'next';
 import { notFound, redirect } from 'next/navigation';
 import React from 'react';
@@ -65,6 +69,7 @@ export async function SitePage(props: SitePageProps) {
                     ancestors={ancestors}
                     document={document}
                     withPageFeedback={withPageFeedback}
+                    insightsDisplayContext={SiteInsightsDisplayContext.Site}
                 />
             </div>
             <React.Suspense fallback={null}>