Session Pixel for Usage metrics

server/config/development.yaml

@@ -22,6 +22,7 @@ startWorkflowDisabled: false
 hideWorkflowQueryErrors: false
 refreshWorkflowCountsDisabled: false
 activityCommandsDisabled: false
+disableTrackingPixel: false
 auth:
   enabled: false
   providers:

server/config/docker.yaml

@@ -23,6 +23,7 @@ startWorkflowDisabled: {{ env "TEMPORAL_START_WORKFLOW_DISABLED" | default "fals
 hideWorkflowQueryErrors: {{ env "TEMPORAL_HIDE_WORKFLOW_QUERY_ERRORS" | default "false" }} 
 refreshWorkflowCountsDisabled: {{ env "TEMPORAL_REFRESH_WORKFLOW_COUNTS_DISABLED" | default "false" }}
 activityCommandsDisabled: {{ env "TEMPORAL_ACTIVITY_COMMANDS_DISABLED" | default "false" }}
+disableTrackingPixel: {{ env "TEMPORAL_DISABLE_TRACKING_PIXEL" | default "false" }}
 cors:
   cookieInsecure: {{ env "TEMPORAL_CSRF_COOKIE_INSECURE" | default "false" }}
   unsafeAllowAllOrigins: {{ env "TEMPORAL_CORS_UNSAFE_ALLOW_ALL_ORIGINS" | default "false" }}

server/server/api/handler.go

@@ -76,6 +76,7 @@ type SettingsResponse struct {
 	HideWorkflowQueryErrors       bool
 	RefreshWorkflowCountsDisabled bool
 	ActivityCommandsDisabled      bool
+	DisableTrackingPixel          bool
 }
 
 func TemporalAPIHandler(cfgProvider *config.ConfigProviderWithRefresh, apiMiddleware []Middleware, conn *grpc.ClientConn) echo.HandlerFunc {
@@ -153,6 +154,7 @@ func GetSettings(cfgProvider *config.ConfigProviderWithRefresh) func(echo.Contex
 			HideWorkflowQueryErrors:       cfg.HideWorkflowQueryErrors,
 			RefreshWorkflowCountsDisabled: cfg.RefreshWorkflowCountsDisabled,
 			ActivityCommandsDisabled:      cfg.ActivityCommandsDisabled,
+			DisableTrackingPixel:          cfg.DisableTrackingPixel,
 		}
 
 		return c.JSON(http.StatusOK, settings)

server/server/config/config.go

@@ -67,6 +67,8 @@ type (
 		RefreshWorkflowCountsDisabled bool `yaml:"refreshWorkflowCountsDisabled"`
 		// Whether to disable activity commands in the UI
 		ActivityCommandsDisabled bool `yaml:"activityCommandsDisabled"`
+		// Whether to disable the tracking pixel in the UI
+		DisableTrackingPixel bool `yaml:"disableTrackingPixel"`
 		// Forward specified HTTP headers from HTTP API requests to Temporal gRPC backend
 		ForwardHeaders []string `yaml:"forwardHeaders"`
 		HideLogs       bool     `yaml:"hideLogs"`

src/lib/components/session-pixel.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { page } from '$app/state';
+
+  const TRACKING_PIXEL_BASE_URL =
+    'https://wpt.tomwheeler.com/cgi-sys/cgiwrap/twheeler/wtp.cgi';
+  let trackingPixelURL = $state('');
+
+  const disableTrackingPixel = $derived(
+    page.data?.settings?.disableTrackingPixel,
+  );
+
+  const uidKey = 'temporal-user-uuid';
+  const clusterId = $derived(page.data?.systemInfo?.clusterId);
+  const srcId = 'temporal-web-ui';
+
+  onMount(() => {
+    if (
+      !disableTrackingPixel &&
+      !sessionStorage.getItem('session-pixel-fired')
+    ) {
+      let uuid = localStorage.getItem(uidKey);
+      if (!uuid) {
+        uuid = crypto.randomUUID();
+        localStorage.setItem(uidKey, uuid);
+      }
+      sessionStorage.setItem('session-pixel-fired', 'true');
+      trackingPixelURL = `${TRACKING_PIXEL_BASE_URL}?srcid=${clusterId}:${uuid}:${srcId}`;
+    }
+  });
+</script>
+
+{#if trackingPixelURL}
+  <img
+    src={trackingPixelURL}
+    alt=""
+    aria-hidden="true"
+    width="1"
+    height="1"
+    style="position:absolute;left:-9999px"
+  />
+{/if}

src/lib/services/settings-service.ts

@@ -48,6 +48,7 @@ export const fetchSettings = async (request = fetch): Promise<Settings> => {
     refreshWorkflowCountsDisabled:
       !!settingsResponse?.RefreshWorkflowCountsDisabled,
     activityCommandsDisabled: !!settingsResponse?.ActivityCommandsDisabled,
+    disableTrackingPixel: !!settingsResponse?.DisableTrackingPixel,
 
     showTemporalSystemNamespace: settingsResponse?.ShowTemporalSystemNamespace,
     feedbackURL: settingsResponse?.FeedbackURL,

src/lib/svelte-mocks/app/stores.ts

@@ -34,6 +34,7 @@ const settings: Settings = {
   workflowTerminateDisabled: false,
   hideWorkflowQueryErrors: false,
   activityCommandsDisabled: false,
+  disableTrackingPixel: false,
   feedbackURL: '',
   runtimeEnvironment: {
     isCloud: false,

src/lib/types/global.ts

@@ -99,6 +99,7 @@ export type Settings = {
   hideWorkflowQueryErrors: boolean;
   batchActionsDisabled: boolean;
   activityCommandsDisabled: boolean;
+  disableTrackingPixel: boolean;
   showTemporalSystemNamespace: boolean;
   feedbackURL: string;
   runtimeEnvironment: {

src/lib/types/index.ts

@@ -299,6 +299,7 @@ export type SettingsResponse = {
   HideWorkflowQueryErrors: boolean;
   RefreshWorkflowCountsDisabled: boolean;
   ActivityCommandsDisabled: boolean;
+  DisableTrackingPixel: boolean;
   ShowTemporalSystemNamespace: boolean;
   FeedbackURL: string;
   Version: string;

src/routes/(app)/+layout.svelte

@@ -7,6 +7,7 @@
   import BottomNavigation from '$lib/components/bottom-nav.svelte';
   import DataEncoderSettings from '$lib/components/data-encoder-settings.svelte';
   import NamespacePicker from '$lib/components/namespace-picker.svelte';
+  import SessionPixel from '$lib/components/session-pixel.svelte';
   import SideNavigation from '$lib/components/side-nav.svelte';
   import SkipNavigation from '$lib/components/skip-nav.svelte';
   import TopNavigation from '$lib/components/top-nav.svelte';
@@ -316,3 +317,4 @@
     </BottomNavigation>
   </MainContentContainer>
 </div>
+<SessionPixel />