Serve exploration config to the front-end

assets/js/dashboard/extra/exploration.js

@@ -22,8 +22,6 @@
 import { FlagIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import { popover } from '../components/popover'
 
-const JOURNEY_END_EVENT = '__journey_end__'
-
 const DIRECTION = { FORWARD: 'forward', BACKWARD: 'backward' }
 
 const DIRECTION_OPTIONS = [
@@ -33,7 +31,6 @@
 
 const PAGE_FILTER_KEYS = ['page', 'entry_page', 'exit_page']
 
-const MAX_JOURNEY_STEPS = 20
 const MAX_VISIBLE_CANDIDATES = 10
 const MIN_GRID_COLUMNS = 3
 const PRELOAD_MAX_STEPS = 2
@@ -105,12 +102,12 @@
   )
 }
 
-function maybeEmptyResults(results, activeFilter) {
+function maybeEmptyResults(results, activeFilter, journeyEndEvent) {
   if (
     results.length === 0 ||
     (!activeFilter &&
       results.length === 1 &&
-      results[0].step.name === JOURNEY_END_EVENT)
+      results[0].step.name === journeyEndEvent)
   ) {
     return []
   } else {
@@ -370,9 +367,10 @@
   colIndex,
   onSelect
 }) {
-  const isJourneyEnd = step.name === JOURNEY_END_EVENT
+  const { explorationJourneyEndEvent: journeyEndEvent } = useSiteContext()
+  const isJourneyEnd = step.name === journeyEndEvent
   const isCustomEvent =
-    step.name !== 'pageview' && step.name !== JOURNEY_END_EVENT
+    step.name !== 'pageview' && step.name !== journeyEndEvent
   const isGoal = step.is_goal
 
   const visitorsToShow =
@@ -528,6 +526,7 @@
 }
 
 function MaxDepthColumn({ colIndex, header }) {
+  const { explorationMaxJourneySteps: maxJourneySteps } = useSiteContext()
   return (
     <div
       data-exploration-column={colIndex}
@@ -541,7 +540,7 @@
       <div className="h-92 flex items-center justify-center max-w-2/3 mx-auto text-center text-sm text-pretty text-gray-400 dark:text-gray-500">
         <span className="flex flex-col items-center gap-2">
           <FlagIcon className="size-4.5" />
-          {`You've reached the maximum journey depth of ${MAX_JOURNEY_STEPS} steps.`}
+          {`You've reached the maximum journey depth of ${maxJourneySteps} steps.`}
         </span>
       </div>
     </div>
@@ -679,6 +678,10 @@
 // useExplorationData manages all async data fetching, cancellation, and
 // journey state.
 function useExplorationData(site, dashboardState, inViewport) {
+  const {
+    explorationMaxJourneySteps: maxJourneySteps,
+    explorationJourneyEndEvent: journeyEndEvent
+  } = useSiteContext()
   const [state, setState] = useState(EMPTY_JOURNEY_STATE)
   const [activeLoading, setActiveLoading] = useState(false)
   const [retryCount, setRetryCount] = useState(0)
@@ -797,7 +800,7 @@
     const steps = state.steps
     const activeFilter = state.activeFilter
 
-    if (steps.length >= MAX_JOURNEY_STEPS) {
+    if (steps.length >= maxJourneySteps) {
       setActiveLoading(false)
       return
     }
@@ -854,7 +857,8 @@
                     ...prev,
                     activeResults: maybeEmptyResults(
                       r?.next ?? [],
-                      prev.activeFilter
+                      prev.activeFilter,
+                      journeyEndEvent
                     ),
                     rateLimited: false
                   }))
@@ -902,7 +906,8 @@
                   ...prev,
                   activeResults: maybeEmptyResults(
                     r?.next ?? [],
-                    prev.activeFilter
+                    prev.activeFilter,
+                    journeyEndEvent
                   ),
                   rateLimited: false
                 }))
@@ -956,7 +961,8 @@
             ...prev,
             activeResults: maybeEmptyResults(
               response?.next ?? [],
-              prev.activeFilter
+              prev.activeFilter,
+              journeyEndEvent
             ),
             rateLimited: false
           }
@@ -1024,7 +1030,7 @@
       .finally(() => {
         if (!isStale()) setActiveLoading(false)
       })
   }, [
     site,
     dashboardState,
     state.steps,
@@ -1091,6 +1097,7 @@
   const site = useSiteContext()
   const { dashboardState } = useDashboardStateContext()
   const [inViewport, setInViewport] = useState(false)
+  const maxJourneySteps = site.explorationMaxJourneySteps
 
   const {
     state,
@@ -1220,7 +1227,7 @@
                     : `${parseFloat(funnel[i].conversion_rate).toFixed(1)}%`
                   : null
 
-              if (isActive && steps.length >= MAX_JOURNEY_STEPS) {
+              if (isActive && steps.length >= maxJourneySteps) {
                 return (
                   <MaxDepthColumn
                     key={i}

assets/js/dashboard/site-context.test.tsx

@@ -16,6 +16,8 @@ describe('parseSiteFromDataset', () => {
       data-props-opted-out="false"
       data-funnels-available="true"
       data-exploration-available="false"
+      data-exploration-journey-end-event="__journey_end__"
+      data-exploration-max-journey-steps="20"
       data-site-segments-available="true"
       data-props-available="true"
       data-revenue-goals='[{"currency":"USD","display_name":"Purchase"}]'
@@ -45,6 +47,8 @@ describe('parseSiteFromDataset', () => {
     funnelsAvailable: true,
     propsAvailable: true,
     explorationAvailable: false,
+    explorationJourneyEndEvent: '__journey_end__',
+    explorationMaxJourneySteps: 20,
     siteSegmentsAvailable: true,
     revenueGoals: [{ currency: 'USD', display_name: 'Purchase' }],
     funnels: [{ id: 1, name: 'From homepage to login', steps_count: 3 }],

assets/js/dashboard/site-context.tsx

@@ -9,6 +9,11 @@ export function parseSiteFromDataset(dataset: DOMStringMap): PlausibleSite {
     funnelsAvailable: dataset.funnelsAvailable === 'true',
     propsAvailable: dataset.propsAvailable === 'true',
     explorationAvailable: dataset.explorationAvailable === 'true',
+    explorationJourneyEndEvent: dataset.explorationJourneyEndEvent!,
+    explorationMaxJourneySteps: parseInt(
+      dataset.explorationMaxJourneySteps!,
+      10
+    ),
     siteSegmentsAvailable: dataset.siteSegmentsAvailable === 'true',
     conversionsOptedOut: dataset.conversionsOptedOut === 'true',
     funnelsOptedOut: dataset.funnelsOptedOut === 'true',
@@ -37,6 +42,8 @@ export const siteContextDefaultValue = {
   hasProps: false,
   funnelsAvailable: false,
   explorationAvailable: false,
+  explorationJourneyEndEvent: '',
+  explorationMaxJourneySteps: 0,
   propsAvailable: false,
   siteSegmentsAvailable: false,
   conversionsOptedOut: false,

assets/test-utils/app-context-providers.tsx

@@ -32,6 +32,8 @@ export const DEFAULT_SITE: PlausibleSite = {
   hasProps: false,
   funnelsAvailable: false,
   explorationAvailable: false,
+  explorationJourneyEndEvent: '',
+  explorationMaxJourneySteps: 0,
   propsAvailable: false,
   siteSegmentsAvailable: false,
   conversionsOptedOut: false,

lib/plausible_web/controllers/stats_controller.ex

@@ -62,6 +62,14 @@ defmodule PlausibleWeb.StatsController do
     exploration_available? =
       on_ee(do: Plausible.Auth.is_super_admin?(current_user), else: false)
 
+    {exploration_journey_end_event, exploration_max_journey_steps} =
+      on_ee(
+        do:
+          {Plausible.Stats.Exploration.Journey.Step.journey_end_event(),
+           Plausible.Stats.Exploration.max_steps()},
+        else: {"", 0}
+      )
+
     consolidated_view_available? =
       on_ee(do: Plausible.ConsolidatedView.ok_to_display?(site.team), else: false)
 
@@ -101,6 +109,8 @@ defmodule PlausibleWeb.StatsController do
           consolidated_view?: consolidated_view?,
           consolidated_view_available?: consolidated_view_available?,
           exploration_available?: exploration_available?,
+          exploration_journey_end_event: exploration_journey_end_event,
+          exploration_max_journey_steps: exploration_max_journey_steps,
           team_identifier: team_identifier,
           limited_to_segment_id: nil
         )
@@ -475,6 +485,14 @@ defmodule PlausibleWeb.StatsController do
         exploration_available? =
           on_ee(do: Plausible.Auth.is_super_admin?(current_user), else: false)
 
+        {exploration_journey_end_event, exploration_max_journey_steps} =
+          on_ee(
+            do:
+              {Plausible.Stats.Exploration.Journey.Step.journey_end_event(),
+               Plausible.Stats.Exploration.max_steps()},
+            else: {"", 0}
+          )
+
         limited_to_segment_id =
           if Plausible.Site.SharedLink.limited_to_segment?(shared_link) do
             shared_link.segment.id
@@ -525,6 +543,8 @@ defmodule PlausibleWeb.StatsController do
           consolidated_view?: false,
           consolidated_view_available?: false,
           exploration_available?: exploration_available?,
+          exploration_journey_end_event: exploration_journey_end_event,
+          exploration_max_journey_steps: exploration_max_journey_steps,
           team_identifier: team_identifier,
           limited_to_segment_id: limited_to_segment_id
         )

lib/plausible_web/templates/stats/stats.html.heex

@@ -48,6 +48,8 @@
     data-is-consolidated-view={Jason.encode!(@consolidated_view?)}
     data-consolidated-view-available={Jason.encode!(@consolidated_view_available?)}
     data-exploration-available={Jason.encode!(@exploration_available?)}
+    data-exploration-journey-end-event={@exploration_journey_end_event}
+    data-exploration-max-journey-steps={@exploration_max_journey_steps}
     data-team-identifier={@team_identifier}
     data-limited-to-segment-id={Jason.encode!(@limited_to_segment_id)}
   >