feat: time on page

izadoesdev · izadoesdev · commit c0e3e9687d20 · 2025-08-19T13:28:08.000+03:00
diff --git a/apps/api/src/query/builders/pages.ts b/apps/api/src/query/builders/pages.ts
@@ -247,4 +247,130 @@ export const PagesBuilders: Record<string, SimpleQueryConfig> = {
 		],
 		customizable: true,
 	},
+
+	page_time_analysis: {
+		allowedFilters: [
+			'path',
+			'country',
+			'device_type',
+			'browser_name',
+			'os_name',
+			'referrer',
+			'utm_source',
+			'utm_medium',
+			'utm_campaign',
+		],
+		customizable: true,
+		customSql: (
+			websiteId: string,
+			startDate: string,
+			endDate: string,
+			_filters?: unknown[],
+			_granularity?: unknown,
+			limit?: number,
+			offset?: number,
+			_timezone?: string,
+			filterConditions?: string[],
+			filterParams?: Record<string, Filter['value']>
+		) => {
+			const combinedWhereClause = buildWhereClause(filterConditions);
+
+			return {
+				sql: `
+            SELECT 
+                CASE WHEN trimRight(path(path), '/') = '' THEN '/' ELSE trimRight(path(path), '/') END as name,
+                COUNT(*) as sessions_with_time,
+                COUNT(DISTINCT anonymous_id) as visitors,
+                ROUND(quantile(0.5)(time_on_page), 2) as median_time_on_page,
+                ROUND((COUNT(*) / SUM(COUNT(*)) OVER()) * 100, 2) as percentage_of_sessions
+            FROM analytics.events
+            WHERE client_id = {websiteId:String}
+                AND time >= parseDateTimeBestEffort({startDate:String})
+                AND time <= parseDateTimeBestEffort({endDate:String})
+                AND event_name = 'page_exit'
+                AND time_on_page IS NOT NULL
+                AND time_on_page > 1
+                AND time_on_page < 3600
+                ${combinedWhereClause}
+            GROUP BY name
+            HAVING COUNT(*) >= 1
+            ORDER BY median_time_on_page DESC
+            LIMIT {limit:Int32} OFFSET {offset:Int32}
+            `,
+				params: {
+					websiteId,
+					startDate,
+					endDate,
+					limit: limit || 100,
+					offset: offset || 0,
+					...filterParams,
+				},
+			};
+		},
+		meta: {
+			title: 'Page Time Analysis',
+			description:
+				'Analysis of time spent on each page, showing median time with quality filters to ensure reliable data.',
+			category: 'Engagement',
+			tags: ['time', 'engagement', 'pages', 'performance'],
+			output_fields: [
+				{
+					name: 'name',
+					type: 'string',
+					label: 'Page Path',
+					description: 'The URL path of the page',
+					example: '/home',
+				},
+				{
+					name: 'sessions_with_time',
+					type: 'number',
+					label: 'Sessions with Time Data',
+					description: 'Number of sessions with valid time measurements',
+					example: 245,
+				},
+				{
+					name: 'visitors',
+					type: 'number',
+					label: 'Unique Visitors',
+					description: 'Number of unique visitors with time data',
+					example: 189,
+				},
+				{
+					name: 'median_time_on_page',
+					type: 'number',
+					label: 'Median Time (seconds)',
+					description: 'Median time spent on the page in seconds',
+					unit: 'seconds',
+					example: 32.5,
+				},
+				{
+					name: 'percentage_of_sessions',
+					type: 'number',
+					label: 'Session %',
+					description: 'Percentage of total sessions with time data',
+					unit: '%',
+					example: 15.8,
+				},
+			],
+			output_example: [
+				{
+					name: '/home',
+					sessions_with_time: 245,
+					visitors: 189,
+					median_time_on_page: 32.5,
+					percentage_of_sessions: 15.8,
+				},
+				{
+					name: '/about',
+					sessions_with_time: 156,
+					visitors: 134,
+					median_time_on_page: 54.2,
+					percentage_of_sessions: 10.1,
+				},
+			],
+			default_visualization: 'table',
+			supports_granularity: ['hour', 'day'],
+			version: '1.0',
+		},
+	},
 };
diff --git a/apps/dashboard/app/(main)/websites/[id]/_components/tabs/overview-tab.tsx b/apps/dashboard/app/(main)/websites/[id]/_components/tabs/overview-tab.tsx
@@ -63,13 +63,6 @@ interface ChartDataPoint {
 	[key: string]: unknown;
 }
 
-interface PageData {
-	name: string;
-	visitors: number;
-	pageviews?: number;
-	percentage: number;
-}
-
 interface TechnologyData {
 	name: string;
 	visitors: number;
@@ -144,7 +137,12 @@ const QUERY_CONFIG = {
 	limit: 100,
 	parameters: {
 		summary: ['summary_metrics', 'today_metrics', 'events_by_date'] as string[],
-		pages: ['top_pages', 'entry_pages', 'exit_pages'] as string[],
+		pages: [
+			'top_pages',
+			'entry_pages',
+			'exit_pages',
+			'page_time_analysis',
+		] as string[],
 		traffic: [
 			'top_referrers',
 			'utm_sources',
@@ -261,6 +259,8 @@ export function WebsiteOverviewTab({
 		top_pages: getDataForQuery('overview-pages', 'top_pages') || [],
 		entry_pages: getDataForQuery('overview-pages', 'entry_pages') || [],
 		exit_pages: getDataForQuery('overview-pages', 'exit_pages') || [],
+		page_time_analysis:
+			getDataForQuery('overview-pages', 'page_time_analysis') || [],
 		top_referrers: getDataForQuery('overview-traffic', 'top_referrers') || [],
 		utm_sources: getDataForQuery('overview-traffic', 'utm_sources') || [],
 		utm_mediums: getDataForQuery('overview-traffic', 'utm_mediums') || [],
@@ -380,7 +380,7 @@ export function WebsiteOverviewTab({
 		},
 	});
 
-	const pagesTabs = useTableTabs({
+	const standardPagesTabs = useTableTabs({
 		top_pages: {
 			data: analytics.top_pages || [],
 			label: 'Top Pages',
@@ -601,11 +601,6 @@ export function WebsiteOverviewTab({
 		);
 	};
 
-	const createPercentageCell = () => (info: CellInfo) => {
-		const percentage = info.getValue() as number;
-		return <PercentageBadge percentage={percentage} />;
-	};
-
 	const formatNumber = useCallback(
 		(value: number | null | undefined): string => {
 			if (value == null || Number.isNaN(value)) {
@@ -628,6 +623,91 @@ export function WebsiteOverviewTab({
 		</div>
 	);
 
+	const formatTimeSeconds = useCallback((seconds: number): string => {
+		if (seconds < 60) {
+			return `${seconds.toFixed(1)}s`;
+		}
+		const minutes = Math.floor(seconds / 60);
+		const remainingSeconds = Math.round(seconds % 60);
+		return `${minutes}m ${remainingSeconds}s`;
+	}, []);
+
+	const createTimeCell = (info: CellInfo) => {
+		const seconds = info.getValue() as number;
+		return (
+			<span className="font-medium text-foreground">
+				{formatTimeSeconds(seconds)}
+			</span>
+		);
+	};
+
+	const createPercentageCell = () => (info: CellInfo) => {
+		const percentage = info.getValue() as number;
+		return <PercentageBadge percentage={percentage} />;
+	};
+
+	const pageTimeColumns = [
+		{
+			id: 'name',
+			accessorKey: 'name',
+			header: 'Page',
+			cell: (info: CellInfo) => {
+				const name = info.getValue() as string;
+				return (
+					<span className="font-medium text-foreground" title={name}>
+						{name}
+					</span>
+				);
+			},
+		},
+		{
+			id: 'median_time_on_page',
+			accessorKey: 'median_time_on_page',
+			header: 'Avg Time',
+			cell: createTimeCell,
+		},
+		{
+			id: 'sessions_with_time',
+			accessorKey: 'sessions_with_time',
+			header: 'Sessions',
+			cell: (info: CellInfo) => (
+				<span className="font-medium text-foreground">
+					{formatNumber(info.getValue() as number)}
+				</span>
+			),
+		},
+		{
+			id: 'visitors',
+			accessorKey: 'visitors',
+			header: 'Visitors',
+			cell: (info: CellInfo) => (
+				<span className="font-medium text-foreground">
+					{formatNumber(info.getValue() as number)}
+				</span>
+			),
+		},
+		{
+			id: 'percentage_of_sessions',
+			accessorKey: 'percentage_of_sessions',
+			header: 'Share',
+			cell: createPercentageCell(),
+		},
+	];
+
+	const pagesTabs = [
+		...standardPagesTabs,
+		{
+			id: 'page_time_analysis',
+			label: 'Time Analysis',
+			data: analytics.page_time_analysis || [],
+			columns: pageTimeColumns,
+			getFilter: (row: any) => ({
+				field: 'path',
+				value: row.name,
+			}),
+		},
+	];
+
 	const deviceColumns = [
 		{
 			id: 'device_type',
diff --git a/apps/dashboard/app/(main)/websites/[id]/page.tsx b/apps/dashboard/app/(main)/websites/[id]/page.tsx
@@ -173,7 +173,7 @@ function WebsiteDetailsPage() {
 
 	if (isError || !data) {
 		return (
-			<div className="select-none pt-8">
+			<div className="select-none py-8">
 				<EmptyState
 					action={
 						<Link href="/websites">
@@ -209,7 +209,7 @@ function WebsiteDetailsPage() {
 	return (
 		<div>
 			<Tabs
-				className="mt-6 space-y-4"
+				className="space-y-4 py-6"
 				defaultValue="overview"
 				onValueChange={(value) => setActiveTab(value as TabId)}
 				value={activeTab}
diff --git a/apps/dashboard/components/analytics/data-table.tsx b/apps/dashboard/components/analytics/data-table.tsx
@@ -70,12 +70,21 @@ interface DataTableProps<TData extends { name: string | number }, TValue> {
 }
 
 function getRowPercentage(row: any): number {
-	if (row.marketShare !== undefined)
+	if (row.marketShare !== undefined) {
 		return Number.parseFloat(row.marketShare) || 0;
-	if (row.percentage !== undefined)
+	}
+	if (row.percentage !== undefined) {
 		return Number.parseFloat(row.percentage) || 0;
-	if (row.percent !== undefined) return Number.parseFloat(row.percent) || 0;
-	if (row.share !== undefined) return Number.parseFloat(row.share) || 0;
+	}
+	if (row.percentage_of_sessions !== undefined) {
+		return Number.parseFloat(row.percentage_of_sessions) || 0;
+	}
+	if (row.percent !== undefined) {
+		return Number.parseFloat(row.percent) || 0;
+	}
+	if (row.share !== undefined) {
+		return Number.parseFloat(row.share) || 0;
+	}
 	return 0;
 }
 
@@ -153,7 +162,7 @@ const EnhancedSkeleton = ({ minHeight }: { minHeight: string | number }) => (
 	</div>
 );
 
-function FullScreenTable<TData extends { name: string | number }, TValue>({
+function FullScreenTable<TData extends { name: string | number }>({
 	data,
 	columns,
 	search,
@@ -172,7 +181,7 @@ function FullScreenTable<TData extends { name: string | number }, TValue>({
 	onAddFilter,
 }: {
 	data: TData[];
-	columns: any[];
+	columns: ColumnDef<TData, unknown>[];
 	search: string;
 	onClose: () => void;
 	initialPageSize?: number;
@@ -386,7 +395,8 @@ function FullScreenTable<TData extends { name: string | number }, TValue>({
 										}
 										className={cn(
 											'h-11 bg-muted/20 px-2 font-semibold text-muted-foreground text-xs uppercase tracking-wide backdrop-blur-sm sm:px-4',
-											(header.column.columnDef.meta as any)?.className,
+											(header.column.columnDef.meta as { className?: string })
+												?.className,
 											header.column.getCanSort()
 												? 'group cursor-pointer select-none transition-all duration-200 hover:bg-muted/30 hover:text-foreground'
 												: 'select-none'
@@ -464,7 +474,11 @@ function FullScreenTable<TData extends { name: string | number }, TValue>({
 													className={cn(
 														'px-2 py-3 font-medium text-sm transition-colors duration-150 sm:px-4',
 														cellIndex === 0 && 'font-semibold text-foreground',
-														(cell.column.columnDef.meta as any)?.className
+														(
+															cell.column.columnDef.meta as {
+																className?: string;
+															}
+														)?.className
 													)}
 													key={cell.id}
 													style={{
