add analytics events for preview

Author: daveajrussell

src/browser/modules/App/App.tsx

@@ -149,6 +149,20 @@ export function App(props: any) {
     props.bus && props.bus.send(initAction.type, initAction)
   }, [props.bus])
 
+  useEffect(() => {
+    if (!isRunningE2ETest() && props.telemetrySettings.allowUserStats) {
+      const hasTriedPreviewUI =
+        localStorage.getItem('hasTriedPreviewUI') === 'true'
+      segmentTrackCallback &&
+        segmentTrackCallback.current &&
+        segmentTrackCallback.current({
+          category: 'preview',
+          label: 'PREVIEW_PAGE_LOAD',
+          data: { previewUI: false, hasTriedPreviewUI }
+        })
+    }
+  }, [props.telemetrySettings.allowUserStats])
+
   const {
     browserSyncAuthStatus,
     browserSyncConfig,

src/browser/modules/Stream/PlayFrame.tsx

@@ -48,6 +48,7 @@ import { getEdition, isEnterprise } from 'shared/modules/dbMeta/dbMetaDuck'
 import { DARK_THEME } from 'shared/modules/settings/settingsDuck'
 import { LAST_GUIDE_SLIDE } from 'shared/modules/udc/udcDuck'
 import { PreviewFrame } from './StartPreviewFrame'
+import { getTelemetrySettings, TelemetrySettings } from 'shared/utils/selectors'
 
 const AuraPromotion = () => {
   const theme = useContext(ThemeContext)
@@ -89,13 +90,15 @@ type PlayFrameProps = {
   showPromotion: boolean
   isFullscreen: boolean
   isCollapsed: boolean
+  telemetrySettings: TelemetrySettings
 }
 export function PlayFrame({
   stack,
   bus,
   showPromotion,
   isFullscreen,
-  isCollapsed
+  isCollapsed,
+  telemetrySettings
 }: PlayFrameProps): JSX.Element {
   const [stackIndex, setStackIndex] = useState(0)
   const [atSlideStart, setAtSlideStart] = useState<boolean | null>(null)
@@ -124,7 +127,8 @@ export function PlayFrame({
         bus,
         onSlide,
         initialPlay,
-        showPromotion
+        showPromotion,
+        telemetrySettings
       )
       if (stillMounted) {
         setInitialPlay(false)
@@ -207,7 +211,8 @@ function generateContent(
   bus: Bus,
   onSlide: any,
   shouldUseSlidePointer: boolean,
-  showPromotion = false
+  showPromotion = false,
+  telemetrySettings: TelemetrySettings
 ): Content | Promise<Content> {
   // Not found
   if (stackFrame.response && stackFrame.response.status === 404) {
@@ -296,11 +301,15 @@ function generateContent(
     const updatedContent =
       isPlayStart && showPromotion ? (
         <>
-          {isPreviewAvailable ? <PreviewFrame /> : content}
+          {isPreviewAvailable ? (
+            <PreviewFrame telemetrySettings={telemetrySettings} />
+          ) : (
+            content
+          )}
           <AuraPromotion />
         </>
       ) : isPreviewAvailable ? (
-        <PreviewFrame />
+        <PreviewFrame telemetrySettings={telemetrySettings} />
       ) : (
         content
       )
@@ -383,7 +392,8 @@ const mapStateToProps = (state: GlobalState) => ({
     (getEdition(state) !== null &&
       !isEnterprise(state) &&
       !isConnectedAuraHost(state)) ||
-    inDesktop(state)
+    inDesktop(state),
+  telemetrySettings: getTelemetrySettings(state)
 })
 
 export default connect(mapStateToProps)(withBus(PlayFrame))

src/browser/modules/Stream/StartPreviewFrame.tsx

@@ -17,7 +17,10 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React from 'react'
+import React, { useRef } from 'react'
+import { isRunningE2ETest } from 'services/utils'
+import { TelemetrySettings } from 'shared/utils/selectors'
+import { MetricsData } from '../Segment'
 
 export const navigateToPreview = (): void => {
   const path = window.location.pathname
@@ -26,7 +29,51 @@ export const navigateToPreview = (): void => {
   }
 }
 
-export const PreviewFrame = () => {
+const useTrackAndNavigateToPreview = (
+  telemetrySettings: TelemetrySettings
+): (() => void) => {
+  const segmentTrackCallback = useRef((_: MetricsData) => _)
+  const path = window.location.pathname
+
+  return () => {
+    if (!path.endsWith('/preview/')) {
+      if (!isRunningE2ETest() && telemetrySettings.allowUserStats) {
+        const now = Date.now()
+        localStorage.setItem('hasTriedPreviewUI', 'true')
+
+        const timeSinceLastSwitchMs =
+          localStorage.getItem('timeSinceLastSwitchMs') ?? null
+        localStorage.setItem('timeSinceLastSwitchMs', now.toString())
+
+        let timeSinceLastSwitch = null
+        if (timeSinceLastSwitchMs !== null) {
+          timeSinceLastSwitch = now - parseInt(timeSinceLastSwitchMs)
+        }
+
+        segmentTrackCallback &&
+          segmentTrackCallback.current &&
+          segmentTrackCallback.current({
+            category: 'preview',
+            label: 'PREVIEW_UI_SWITCH',
+            data: {
+              switchedTo: 'preview',
+              timeSinceLastSwitch: timeSinceLastSwitch ?? 0
+            }
+          })
+      }
+
+      navigateToPreview()
+    }
+  }
+}
+
+type PreviewFrameProps = {
+  telemetrySettings: TelemetrySettings
+}
+export const PreviewFrame = ({ telemetrySettings }: PreviewFrameProps) => {
+  const trackAndNavigateToPreview =
+    useTrackAndNavigateToPreview(telemetrySettings)
+
   return (
     <>
       <div className="teasers">
@@ -36,7 +83,10 @@ export const PreviewFrame = () => {
           <p>
             Switch to the preview experience to access all the latest features.
           </p>
-          <button onClick={navigateToPreview} className="btn btn-advertise">
+          <button
+            onClick={trackAndNavigateToPreview}
+            className="btn btn-advertise"
+          >
             {"Let's go"}
           </button>
         </div>