From 9585c4f0277e6501c350e66ed4bfe2092d5c3976 Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Thu, 11 Jun 2026 18:08:03 -0700
Subject: [PATCH] feat: Guided Tours Completion Metrics

---
 react-compiler.config.js                      |   1 +
 src/components/Learn/FeaturedTours.tsx        |  85 ++++++++----
 src/components/Learn/ToursLibrary.tsx         |  21 ++-
 .../TourProvider/TourTelemetryBridge.test.tsx | 118 +++++++++++++++++
 .../TourProvider/TourTelemetryBridge.tsx      |  82 ++++++++++++
 .../TourProvider/tourCompletion.test.tsx      | 109 ++++++++++++++++
 src/providers/TourProvider/tourCompletion.ts  | 123 ++++++++++++++++++
 .../Dashboard/Learn/LearnHomeView.test.tsx    |   4 +
 src/routes/Dashboard/Learn/Tour.tsx           |  14 +-
 9 files changed, 522 insertions(+), 35 deletions(-)
 create mode 100644 src/providers/TourProvider/TourTelemetryBridge.test.tsx
 create mode 100644 src/providers/TourProvider/TourTelemetryBridge.tsx
 create mode 100644 src/providers/TourProvider/tourCompletion.test.tsx
 create mode 100644 src/providers/TourProvider/tourCompletion.ts

diff --git a/react-compiler.config.js b/react-compiler.config.js
index 0f9e98dcf..c0d19b382 100644
--- a/react-compiler.config.js
+++ b/react-compiler.config.js
@@ -70,6 +70,7 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/components/ui/typography.tsx",
 
   "src/providers/DialogProvider",
+  "src/providers/TourProvider/tourCompletion.ts",
   "src/routes/EditorV2",
 
   // 11-20 useCallback/useMemo
diff --git a/src/components/Learn/FeaturedTours.tsx b/src/components/Learn/FeaturedTours.tsx
index 4c440c9af..febdb6c0f 100644
--- a/src/components/Learn/FeaturedTours.tsx
+++ b/src/components/Learn/FeaturedTours.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Heading, Paragraph, Text } from "@/components/ui/typography";
+import { useTourCompletion } from "@/providers/TourProvider/tourCompletion";
 import { resetAllTourPipelineState } from "@/providers/TourProvider/tourPipelineStorage/resetAllTourPipelineState";
 import { APP_ROUTES } from "@/routes/router";
 import { tracking } from "@/utils/tracking";
@@ -80,33 +81,11 @@ export function FeaturedTours() {
 
         <BlockStack gap="1">
           {featured.map((tour) => (
-            <Button
+            <FeaturedTourButton
               key={tour.id}
-              variant="ghost"
-              size="lg"
-              disabled={!tour.available}
-              onClick={() => startTour(tour.id)}
-              className="h-auto min-h-10 w-full justify-start whitespace-normal py-2 text-left"
-              {...tracking("learning_hub.tours.start", {
-                tour_id: tour.id,
-              })}
-            >
-              <InlineStack
-                gap="4"
-                align="space-between"
-                blockAlign="center"
-                wrap="nowrap"
-                fill
-              >
-                <FeaturedTourLabel tour={tour} />
-                <Icon
-                  name="Play"
-                  size="sm"
-                  className="text-muted-foreground shrink-0"
-                  aria-hidden="true"
-                />
-              </InlineStack>
-            </Button>
+              tour={tour}
+              onStart={() => startTour(tour.id)}
+            />
           ))}
         </BlockStack>
       </BlockStack>
@@ -114,7 +93,53 @@ export function FeaturedTours() {
   );
 }
 
-function FeaturedTourLabel({ tour }: { tour: FeaturedTour }) {
+function FeaturedTourButton({
+  tour,
+  onStart,
+}: {
+  tour: FeaturedTour;
+  onStart: () => void;
+}) {
+  const completed = useTourCompletion(tour.id);
+
+  return (
+    <Button
+      variant="ghost"
+      size="lg"
+      disabled={!tour.available}
+      onClick={onStart}
+      className="h-auto min-h-10 w-full justify-start whitespace-normal py-2 text-left"
+      {...tracking("learning_hub.tours.start", {
+        tour_id: tour.id,
+        is_restart: completed,
+      })}
+    >
+      <InlineStack
+        gap="4"
+        align="space-between"
+        blockAlign="center"
+        wrap="nowrap"
+        fill
+      >
+        <FeaturedTourLabel tour={tour} completed={completed} />
+        <Icon
+          name={completed ? "RotateCcw" : "Play"}
+          size="sm"
+          className="text-muted-foreground shrink-0"
+          aria-hidden="true"
+        />
+      </InlineStack>
+    </Button>
+  );
+}
+
+function FeaturedTourLabel({
+  tour,
+  completed,
+}: {
+  tour: FeaturedTour;
+  completed: boolean;
+}) {
   return (
     <BlockStack className="min-w-0">
       <InlineStack gap="2" blockAlign="center">
@@ -130,6 +155,12 @@ function FeaturedTourLabel({ tour }: { tour: FeaturedTour }) {
             {tour.tag}
           </Badge>
         )}
+        {completed && (
+          <Badge size="sm" variant="outline" className="text-green-600">
+            <Icon name="Check" size="xs" aria-hidden="true" />
+            Completed
+          </Badge>
+        )}
         {!tour.available && (
           <Badge size="sm" variant="outline">
             Coming soon
diff --git a/src/components/Learn/ToursLibrary.tsx b/src/components/Learn/ToursLibrary.tsx
index 5ab007c90..3bf8c3c79 100644
--- a/src/components/Learn/ToursLibrary.tsx
+++ b/src/components/Learn/ToursLibrary.tsx
@@ -13,6 +13,7 @@ import {
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Heading, Paragraph, Text } from "@/components/ui/typography";
+import { useTourCompletion } from "@/providers/TourProvider/tourCompletion";
 import { resetAllTourPipelineState } from "@/providers/TourProvider/tourPipelineStorage/resetAllTourPipelineState";
 import { APP_ROUTES } from "@/routes/router";
 import { tracking } from "@/utils/tracking";
@@ -30,6 +31,7 @@ import { getTour } from "./tours/registry";
 
 function TourCard({ tour }: { tour: Tour }) {
   const isAvailable = getTour(tour.id) !== undefined;
+  const completed = useTourCompletion(tour.id);
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -55,6 +57,12 @@ function TourCard({ tour }: { tour: Tour }) {
             <Badge size="sm" variant="secondary">
               {tour.area}
             </Badge>
+            {completed && (
+              <Badge size="sm" variant="outline" className="text-green-600">
+                <Icon name="Check" size="xs" aria-hidden="true" />
+                Completed
+              </Badge>
+            )}
             <Text size="xs" tone="subdued">
               {tour.duration}
             </Text>
@@ -64,10 +72,17 @@ function TourCard({ tour }: { tour: Tour }) {
               size="sm"
               variant="ghost"
               onClick={startTour}
-              {...tracking("learning_hub.tours.start", { tour_id: tour.id })}
+              {...tracking("learning_hub.tours.start", {
+                tour_id: tour.id,
+                is_restart: completed,
+              })}
             >
-              Start tour
-              <Icon name="Play" size="sm" aria-hidden="true" />
+              {completed ? "Restart" : "Start tour"}
+              <Icon
+                name={completed ? "RotateCcw" : "Play"}
+                size="sm"
+                aria-hidden="true"
+              />
             </Button>
           ) : (
             <Button
diff --git a/src/providers/TourProvider/TourTelemetryBridge.test.tsx b/src/providers/TourProvider/TourTelemetryBridge.test.tsx
new file mode 100644
index 000000000..5be7c1009
--- /dev/null
+++ b/src/providers/TourProvider/TourTelemetryBridge.test.tsx
@@ -0,0 +1,118 @@
+import { render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { TourDefinition } from "@/components/Learn/tours/registry";
+
+import { TourTelemetryBridge } from "./TourTelemetryBridge";
+
+const track = vi.fn();
+const recordCompletion = vi.fn(() => ({
+  completionCount: 1,
+  previouslyCompleted: false,
+}));
+
+let tourState: { currentStep: number };
+let tour: TourDefinition | null;
+
+vi.mock("@reactour/tour", () => ({
+  useTour: () => tourState,
+}));
+
+vi.mock("@/providers/AnalyticsProvider", () => ({
+  useAnalytics: () => ({ track }),
+}));
+
+vi.mock("./TourModeContext", () => ({
+  useTourMode: () => (tour ? { tour } : null),
+}));
+
+vi.mock("./tourCompletion", () => ({
+  useRecordTourCompletion: () => recordCompletion,
+  useTourCompletions: () => ({ data: undefined }),
+}));
+
+const TOUR: TourDefinition = {
+  id: "first-pipeline",
+  steps: [
+    { selector: "#a", content: "a", interaction: "add-task" },
+    { selector: "#b", content: "b" },
+    { selector: "#c", content: "c" },
+  ],
+};
+
+function eventsOfType(type: string) {
+  return track.mock.calls.filter(([actionType]) => actionType === type);
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  tour = TOUR;
+  tourState = { currentStep: 0 };
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("TourTelemetryBridge", () => {
+  it("fires step_viewed once per step reached", () => {
+    const { rerender } = render(<TourTelemetryBridge />);
+    tourState = { currentStep: 1 };
+    rerender(<TourTelemetryBridge />);
+    tourState = { currentStep: 1 };
+    rerender(<TourTelemetryBridge />);
+
+    const steps = eventsOfType("learning_hub.tours.step_viewed");
+    expect(steps).toHaveLength(2);
+    expect(steps[0][1]).toMatchObject({
+      tour_id: "first-pipeline",
+      step_index: 0,
+      step_count: 3,
+      interaction: "add-task",
+    });
+    expect(steps[1][1]).toMatchObject({
+      step_index: 1,
+      interaction: undefined,
+    });
+  });
+
+  it("marks completion and fires completed on reaching the last step", () => {
+    const { rerender } = render(<TourTelemetryBridge />);
+    tourState = { currentStep: 2 };
+    rerender(<TourTelemetryBridge />);
+
+    expect(recordCompletion).toHaveBeenCalledTimes(1);
+    const completed = eventsOfType("learning_hub.tours.completed");
+    expect(completed).toHaveLength(1);
+    expect(completed[0][1]).toMatchObject({
+      tour_id: "first-pipeline",
+      step_count: 3,
+      completion_count: 1,
+    });
+  });
+
+  it("fires exited with furthest_step when unmounted before completing", () => {
+    const { rerender, unmount } = render(<TourTelemetryBridge />);
+    tourState = { currentStep: 1 };
+    rerender(<TourTelemetryBridge />);
+    unmount();
+
+    const exited = eventsOfType("learning_hub.tours.exited");
+    expect(exited).toHaveLength(1);
+    expect(exited[0][1]).toMatchObject({
+      tour_id: "first-pipeline",
+      furthest_step: 1,
+      step_count: 3,
+      percent_complete: 67,
+    });
+  });
+
+  it("does not fire exited when the tour completed", () => {
+    const { rerender, unmount } = render(<TourTelemetryBridge />);
+    tourState = { currentStep: 2 };
+    rerender(<TourTelemetryBridge />);
+    unmount();
+
+    expect(eventsOfType("learning_hub.tours.exited")).toHaveLength(0);
+  });
+});
diff --git a/src/providers/TourProvider/TourTelemetryBridge.tsx b/src/providers/TourProvider/TourTelemetryBridge.tsx
new file mode 100644
index 000000000..2755b1b73
--- /dev/null
+++ b/src/providers/TourProvider/TourTelemetryBridge.tsx
@@ -0,0 +1,82 @@
+import { useTour } from "@reactour/tour";
+import { useEffect, useRef } from "react";
+
+import { useAnalytics } from "@/providers/AnalyticsProvider";
+
+import { useRecordTourCompletion, useTourCompletions } from "./tourCompletion";
+import { useTourMode } from "./TourModeContext";
+
+export function TourTelemetryBridge() {
+  const { currentStep } = useTour();
+  const tourMode = useTourMode();
+  const { track } = useAnalytics();
+  const recordCompletion = useRecordTourCompletion();
+  const { data: completions } = useTourCompletions();
+
+  const tour = tourMode?.tour;
+  const stepCount = tour?.steps.length ?? 0;
+
+  const startedAtRef = useRef<number>(Date.now());
+  const furthestRef = useRef(0);
+  const seenStepsRef = useRef<Set<number>>(new Set());
+  const completedRef = useRef(false);
+  const previouslyCompletedRef = useRef(false);
+
+  useEffect(() => {
+    if (!completedRef.current && tour) {
+      previouslyCompletedRef.current = Boolean(completions?.[tour.id]);
+    }
+  }, [completions, tour]);
+
+  useEffect(() => {
+    if (!tour || stepCount === 0) return;
+
+    if (currentStep > furthestRef.current) {
+      furthestRef.current = currentStep;
+    }
+
+    if (!seenStepsRef.current.has(currentStep)) {
+      seenStepsRef.current.add(currentStep);
+      track("learning_hub.tours.step_viewed", {
+        tour_id: tour.id,
+        step_index: currentStep,
+        step_count: stepCount,
+        interaction: tour.steps[currentStep]?.interaction,
+      });
+    }
+
+    if (currentStep >= stepCount - 1 && !completedRef.current) {
+      completedRef.current = true;
+      const { completionCount, previouslyCompleted } = recordCompletion(
+        tour.id,
+      );
+      previouslyCompletedRef.current = previouslyCompleted;
+      track("learning_hub.tours.completed", {
+        tour_id: tour.id,
+        step_count: stepCount,
+        completion_count: completionCount,
+        previously_completed: previouslyCompleted,
+        duration_ms: Date.now() - startedAtRef.current,
+      });
+    }
+  }, [currentStep, tour, stepCount, track, recordCompletion]);
+
+  useEffect(() => {
+    if (!tour) return undefined;
+    return () => {
+      if (completedRef.current) return;
+      const furthest = furthestRef.current;
+      track("learning_hub.tours.exited", {
+        tour_id: tour.id,
+        furthest_step: furthest,
+        step_count: stepCount,
+        percent_complete:
+          stepCount > 0 ? Math.round(((furthest + 1) / stepCount) * 100) : 0,
+        duration_ms: Date.now() - startedAtRef.current,
+        previously_completed: previouslyCompletedRef.current,
+      });
+    };
+  }, [tour, stepCount, track]);
+
+  return null;
+}
diff --git a/src/providers/TourProvider/tourCompletion.test.tsx b/src/providers/TourProvider/tourCompletion.test.tsx
new file mode 100644
index 000000000..d9a256b83
--- /dev/null
+++ b/src/providers/TourProvider/tourCompletion.test.tsx
@@ -0,0 +1,109 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useRecordTourCompletion, useTourCompletion } from "./tourCompletion";
+
+const fetchWithErrorHandling = vi.hoisted(() =>
+  vi.fn<(url: string, options?: RequestInit) => Promise<unknown>>(() =>
+    Promise.resolve({}),
+  ),
+);
+
+vi.mock("@/utils/fetchWithErrorHandling", () => ({
+  fetchWithErrorHandling: (url: string, options?: RequestInit) =>
+    fetchWithErrorHandling(url, options),
+}));
+
+let backend = { available: true, backendUrl: "https://backend.example" };
+
+vi.mock("@/providers/BackendProvider", () => ({
+  useBackend: () => backend,
+}));
+
+function makeWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  };
+}
+
+function renderCompletion(tourId: string) {
+  return renderHook(
+    () => ({
+      completed: useTourCompletion(tourId),
+      record: useRecordTourCompletion(),
+    }),
+    { wrapper: makeWrapper() },
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  fetchWithErrorHandling.mockResolvedValue({});
+  backend = { available: true, backendUrl: "https://backend.example" };
+});
+
+describe("tourCompletion (backend)", () => {
+  it("reads completion state from the settings endpoint", async () => {
+    fetchWithErrorHandling.mockResolvedValueOnce({
+      completed_tours: {
+        "first-pipeline": {
+          completedAt: "2026-06-01T00:00:00.000Z",
+          completionCount: 2,
+        },
+      },
+    });
+
+    const { result } = renderCompletion("first-pipeline");
+
+    await waitFor(() => expect(result.current.completed).toBe(true));
+  });
+
+  it("records a completion: PATCHes the merged map and flips the cache", async () => {
+    const { result } = renderCompletion("first-pipeline");
+    await waitFor(() => expect(result.current.completed).toBe(false));
+
+    let recorded!: { completionCount: number; previouslyCompleted: boolean };
+    act(() => {
+      recorded = result.current.record("first-pipeline");
+    });
+
+    expect(recorded.completionCount).toBe(1);
+    expect(recorded.previouslyCompleted).toBe(false);
+    await waitFor(() => expect(result.current.completed).toBe(true));
+
+    const patchCall = fetchWithErrorHandling.mock.calls.find(
+      ([, options]) => options?.method === "PATCH",
+    );
+    expect(patchCall?.[0]).toBe(
+      "https://backend.example/api/users/me/settings",
+    );
+    const body = JSON.parse(patchCall?.[1]?.body as string);
+    expect(
+      body.settings.completed_tours["first-pipeline"].completionCount,
+    ).toBe(1);
+  });
+
+  it("does not PATCH when no backend is available", async () => {
+    backend = { available: false, backendUrl: "" };
+    const { result } = renderCompletion("subgraphs");
+
+    act(() => {
+      result.current.record("subgraphs");
+    });
+
+    expect(
+      fetchWithErrorHandling.mock.calls.some(
+        ([, options]) => options?.method === "PATCH",
+      ),
+    ).toBe(false);
+    // Still reflected in-session via the cache.
+    await waitFor(() => expect(result.current.completed).toBe(true));
+  });
+});
diff --git a/src/providers/TourProvider/tourCompletion.ts b/src/providers/TourProvider/tourCompletion.ts
new file mode 100644
index 000000000..e17ef6272
--- /dev/null
+++ b/src/providers/TourProvider/tourCompletion.ts
@@ -0,0 +1,123 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { useBackend } from "@/providers/BackendProvider";
+import { fetchWithErrorHandling } from "@/utils/fetchWithErrorHandling";
+
+interface TourCompletionRecord {
+  completedAt: string;
+  completionCount: number;
+}
+
+type TourCompletionMap = Record<string, TourCompletionRecord>;
+
+const SETTINGS_PATH = "/api/users/me/settings";
+const COMPLETED_TOURS_KEY = "completed_tours";
+const QUERY_KEY = "tourCompletions";
+const STALE_MS = 1000 * 60 * 5;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function parseCompletionMap(value: unknown): TourCompletionMap {
+  let raw = value;
+  if (typeof raw === "string") {
+    try {
+      raw = JSON.parse(raw);
+    } catch {
+      return {};
+    }
+  }
+  if (!isRecord(raw)) return {};
+
+  const out: TourCompletionMap = {};
+  for (const [tourId, record] of Object.entries(raw)) {
+    if (
+      isRecord(record) &&
+      typeof record.completedAt === "string" &&
+      typeof record.completionCount === "number"
+    ) {
+      out[tourId] = {
+        completedAt: record.completedAt,
+        completionCount: record.completionCount,
+      };
+    }
+  }
+  return out;
+}
+
+function extractCompletedTours(payload: unknown): TourCompletionMap {
+  if (!isRecord(payload)) return {};
+  const wrapped = isRecord(payload.settings)
+    ? payload.settings[COMPLETED_TOURS_KEY]
+    : undefined;
+  return parseCompletionMap(payload[COMPLETED_TOURS_KEY] ?? wrapped);
+}
+
+async function fetchCompletions(
+  backendUrl: string,
+): Promise<TourCompletionMap> {
+  const url = new URL(SETTINGS_PATH, backendUrl);
+  url.searchParams.set("setting_names", COMPLETED_TOURS_KEY);
+  const payload = await fetchWithErrorHandling(url.toString());
+  return extractCompletedTours(payload);
+}
+
+function queryKey(backendUrl: string) {
+  return [QUERY_KEY, backendUrl] as const;
+}
+
+export function useTourCompletions() {
+  const { available, backendUrl } = useBackend();
+  return useQuery({
+    queryKey: queryKey(backendUrl),
+    queryFn: () => fetchCompletions(backendUrl),
+    enabled: available && Boolean(backendUrl),
+    staleTime: STALE_MS,
+    refetchOnWindowFocus: false,
+  });
+}
+
+export function useTourCompletion(tourId: string): boolean {
+  const { data } = useTourCompletions();
+  return Boolean(data?.[tourId]);
+}
+
+interface RecordedCompletion {
+  completionCount: number;
+  previouslyCompleted: boolean;
+}
+
+export function useRecordTourCompletion() {
+  const queryClient = useQueryClient();
+  const { available, backendUrl } = useBackend();
+
+  const { mutate } = useMutation({
+    mutationFn: async (next: TourCompletionMap) => {
+      const url = new URL(SETTINGS_PATH, backendUrl);
+      await fetchWithErrorHandling(url.toString(), {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ settings: { [COMPLETED_TOURS_KEY]: next } }),
+      });
+    },
+  });
+
+  return (tourId: string): RecordedCompletion => {
+    const key = queryKey(backendUrl);
+    const current = queryClient.getQueryData<TourCompletionMap>(key) ?? {};
+    const previouslyCompleted = Boolean(current[tourId]);
+    const completionCount = (current[tourId]?.completionCount ?? 0) + 1;
+    const next: TourCompletionMap = {
+      ...current,
+      [tourId]: { completedAt: new Date().toISOString(), completionCount },
+    };
+
+    queryClient.setQueryData(key, next);
+    if (available && backendUrl) {
+      mutate(next);
+    }
+
+    return { completionCount, previouslyCompleted };
+  };
+}
diff --git a/src/routes/Dashboard/Learn/LearnHomeView.test.tsx b/src/routes/Dashboard/Learn/LearnHomeView.test.tsx
index 179cdb984..4563b3367 100644
--- a/src/routes/Dashboard/Learn/LearnHomeView.test.tsx
+++ b/src/routes/Dashboard/Learn/LearnHomeView.test.tsx
@@ -28,6 +28,10 @@ vi.mock("@/providers/AnalyticsProvider", () => ({
   useAnalytics: vi.fn().mockReturnValue({ track: vi.fn() }),
 }));
 
+vi.mock("@/providers/BackendProvider", () => ({
+  useBackend: () => ({ available: false, backendUrl: "" }),
+}));
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: { retry: false },
diff --git a/src/routes/Dashboard/Learn/Tour.tsx b/src/routes/Dashboard/Learn/Tour.tsx
index c774a6c9b..57c146957 100644
--- a/src/routes/Dashboard/Learn/Tour.tsx
+++ b/src/routes/Dashboard/Learn/Tour.tsx
@@ -26,6 +26,7 @@ import {
 } from "@/providers/TourProvider/tourPipelineLifecycle";
 import { TourPipelineStorageProvider } from "@/providers/TourProvider/tourPipelineStorage/TourPipelineStorageProvider";
 import { TourCompletionActions } from "@/providers/TourProvider/TourPopover";
+import { TourTelemetryBridge } from "@/providers/TourProvider/TourTelemetryBridge";
 import { APP_ROUTES } from "@/routes/router";
 import { EditorV2 } from "@/routes/v2/pages/Editor/EditorV2";
 import {
@@ -253,11 +254,14 @@ function TourPageBody({
     >
       <TourMockBackendController />
       {resolved && (
-        <TourReactourBridge
-          tour={tour}
-          urlStep={urlStep}
-          onUrlStepChange={handleUrlStepChange}
-        />
+        <>
+          <TourReactourBridge
+            tour={tour}
+            urlStep={urlStep}
+            onUrlStepChange={handleUrlStepChange}
+          />
+          <TourTelemetryBridge />
+        </>
       )}
       <EditorV2
         pipelineRef={