save

Author: AntoLC

src/frontend/apps/impress/src/core/config/ConfigProvider.tsx

@@ -12,7 +12,7 @@ import {
   useSynchronizedLanguage,
 } from '@/features/language';
 import { useAnalytics } from '@/libs';
-import { CrispProvider, PostHogAnalytic } from '@/services';
+import { CrispAnalytic, PostHogAnalytic } from '@/services';
 import { useSentryStore } from '@/stores/useSentryStore';
 
 import { useConfig } from './api/useConfig';
@@ -73,6 +73,14 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
     new PostHogAnalytic(conf.POSTHOG_KEY);
   }, [conf?.POSTHOG_KEY]);
 
+  useEffect(() => {
+    if (!conf?.CRISP_WEBSITE_ID) {
+      return;
+    }
+
+    new CrispAnalytic({ websiteId: conf.CRISP_WEBSITE_ID });
+  }, [conf?.CRISP_WEBSITE_ID]);
+
   if (!conf) {
     return (
       <Box $height="100vh" $width="100vw" $align="center" $justify="center">
@@ -91,11 +99,7 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
       {conf?.FRONTEND_JS_URL && (
         <Script src={conf?.FRONTEND_JS_URL} strategy="afterInteractive" />
       )}
-      <AnalyticsProvider>
-        <CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
-          {children}
-        </CrispProvider>
-      </AnalyticsProvider>
+      <AnalyticsProvider>{children}</AnalyticsProvider>
     </>
   );
 };

src/frontend/apps/impress/src/libs/Analytics.tsx

@@ -1,5 +1,7 @@
 import { JSX, PropsWithChildren, ReactNode } from 'react';
 
+import { Doc } from '@/features/docs/doc-management';
+
 type AnalyticEventClick = {
   eventName: 'click';
 };
@@ -8,8 +10,16 @@ type AnalyticEventUser = {
   id: string;
   email: string;
 };
+type AnalyticEventDoc = {
+  eventName: 'doc';
+  doc: Doc;
+  authenticated: boolean;
+};
 
-export type AnalyticEvent = AnalyticEventClick | AnalyticEventUser;
+export type AnalyticEvent =
+  | AnalyticEventClick
+  | AnalyticEventUser
+  | AnalyticEventDoc;
 
 export abstract class AbstractAnalytic {
   public constructor() {

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -23,6 +23,7 @@ import { getDocChildren, subPageToTree } from '@/features/docs/doc-tree/';
 import { useSkeletonStore } from '@/features/skeletons';
 import { MainLayout } from '@/layouts';
 import { MAIN_LAYOUT_ID } from '@/layouts/conf';
+import { useAnalytics } from '@/libs/Analytics';
 import { useBroadcastStore } from '@/stores';
 import { NextPageWithLayout } from '@/types/next';
 
@@ -96,6 +97,8 @@ const DocPage = ({ id }: DocProps) => {
   const { t } = useTranslation();
   const { authenticated } = useAuth();
   const { untitledDocument } = useTrans();
+  const { trackEvent } = useAnalytics();
+  const [hasTracked, setHasTracked] = useState(false);
 
   /**
    * Show skeleton when loading a document
@@ -171,6 +174,23 @@ const DocPage = ({ id }: DocProps) => {
     });
   }, [addTask, doc?.id, queryClient]);
 
+  useEffect(() => {
+    setHasTracked(false);
+  }, [id]);
+
+  useEffect(() => {
+    if (hasTracked || !doc) {
+      return;
+    }
+
+    setHasTracked(true);
+    trackEvent({
+      eventName: 'doc',
+      doc,
+      authenticated,
+    });
+  }, [authenticated, doc, hasTracked, trackEvent]);
+
   if (isError && error) {
     if ([404, 401].includes(error.status)) {
       let replacePath = `/${error.status}`;

src/frontend/apps/impress/src/services/Crisp.tsx

@@ -3,10 +3,12 @@
  */
 
 import { Crisp } from 'crisp-sdk-web';
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { JSX, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
 import { User } from '@/features/auth';
+import { LinkReach, getDocLinkReach } from '@/features/docs/doc-management';
+import { AbstractAnalytic, AnalyticEvent } from '@/libs';
 
 const CrispStyle = createGlobalStyle`
   #crisp-chatbox a{
@@ -70,3 +72,32 @@ export const CrispProvider = ({
     </>
   );
 };
+
+export class CrispAnalytic extends AbstractAnalytic {
+  private conf?: CrispProviderProps = undefined;
+
+  public constructor(conf?: CrispProviderProps) {
+    super();
+
+    this.conf = conf;
+  }
+
+  public Provider(children?: ReactNode): JSX.Element {
+    return (
+      <CrispProvider websiteId={this.conf?.websiteId}>{children}</CrispProvider>
+    );
+  }
+
+  public trackEvent(evt: AnalyticEvent): void {
+    if (evt.eventName === 'doc') {
+      const docIsPublic = getDocLinkReach(evt.doc) === LinkReach.PUBLIC;
+      if (docIsPublic && !evt.authenticated) {
+        Crisp.trigger.run('public-doc-not-connected');
+      }
+    }
+  }
+
+  public isFeatureFlagActivated(): boolean {
+    return true;
+  }
+}