feat: added new entry/exit page metric

Signed-off-by: Henry <mail@henrygressmann.de>

Author: explodingcamera

CHANGELOG.md

@@ -18,6 +18,7 @@ Since this is not a library, this changelog focuses on the changes that are rele
 
 ## [Unreleased]
 
+- Added new entry/exit page metric
 - Updated to the latest version of DuckDB (1.5.1)
 - Fixed error when both `listen` and `port` configuration options are set
 - Added retry logic when loading the DuckDB database to handle potential locking issues on startup (e.g. when the database is being updated by another process or when using a shared network drive)

src/app/core/reports.rs

@@ -2,13 +2,15 @@ use std::collections::BTreeMap;
 use std::fmt::{Debug, Display};
 
 use crate::app::DuckDBConn;
-use crate::utils::duckdb::{ParamVec, repeat_vars};
-use anyhow::{Result, bail};
+use crate::utils::duckdb::{repeat_vars, ParamVec};
+use anyhow::{bail, Result};
 use chrono::{DateTime, Utc};
 use duckdb::params_from_iter;
 use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 
+const SESSION_DURATION_SQL: &str = "interval '30 minutes'";
+
 #[derive(Serialize, Deserialize, JsonSchema, Debug, Clone, Hash, PartialEq, Eq)]
 pub struct DateRange {
     pub start: DateTime<Utc>,
@@ -49,6 +51,8 @@ pub enum Metric {
 #[serde(rename_all = "snake_case")]
 pub enum Dimension {
     Url,
+    UrlEntry,
+    UrlExit,
     Fqdn,
     Path,
     Referrer,
@@ -168,6 +172,12 @@ fn filter_sql(filters: &[DimensionFilter]) -> Result<(String, ParamVec<'_>)> {
 
             Ok(match filter.dimension {
                 Dimension::Url => format!("concat(fqdn, path) {filter_value}"),
+                Dimension::UrlEntry => format!(
+                    "(time_from_last_event is null or time_from_last_event > {SESSION_DURATION_SQL}) and concat(fqdn, path) {filter_value}"
+                ),
+                Dimension::UrlExit => format!(
+                    "(time_to_next_event is null or time_to_next_event > {SESSION_DURATION_SQL}) and concat(fqdn, path) {filter_value}"
+                ),
                 Dimension::Path => format!("path {filter_value}"),
                 Dimension::Fqdn => format!("fqdn {filter_value}"),
                 Dimension::Referrer => format!("referrer {filter_value}"),
@@ -190,32 +200,36 @@ fn filter_sql(filters: &[DimensionFilter]) -> Result<(String, ParamVec<'_>)> {
 
 fn metric_sql(metric: Metric) -> String {
     match metric {
-        Metric::Views => "count(sd.created_at)",
+        Metric::Views => "count(sd.created_at)".to_owned(),
         Metric::UniqueVisitors => {
             // Count the number of unique visitors as the number of distinct visitor IDs
             "--sql
             count(distinct sd.visitor_id)"
+                .to_owned()
         }
         Metric::BounceRate => {
             // total sessions: no time_to_next_event / time_to_next_event is null
-            // bounce sessions: time to next / time to prev are both null or both > interval '30 minutes'
-            "--sql
+            // bounce sessions: time to next / time to prev are both null or both > session duration
+            format!(
+                "--sql
             coalesce(
                 count(distinct sd.visitor_id)
-                    filter (where (sd.time_to_next_event is null or sd.time_to_next_event > interval '30 minutes') and
-                                 (sd.time_from_last_event is null or sd.time_from_last_event > interval '30 minutes')) /
-                nullif(count(distinct sd.visitor_id) filter (where sd.time_to_next_event is null or sd.time_to_next_event > interval '30 minutes'), 0),
+                    filter (where (sd.time_to_next_event is null or sd.time_to_next_event > {SESSION_DURATION_SQL}) and
+                                 (sd.time_from_last_event is null or sd.time_from_last_event > {SESSION_DURATION_SQL})) /
+                nullif(count(distinct sd.visitor_id) filter (where sd.time_to_next_event is null or sd.time_to_next_event > {SESSION_DURATION_SQL}), 0),
                 1
             )
             "
+            )
         }
         Metric::AvgTimeOnSite => {
-            // avg time_to_next_event where time_to_next_event <= 1800 and time_to_next_event is not null
-            "--sql
-            coalesce(avg(extract(epoch from sd.time_to_next_event)) filter (where sd.time_to_next_event is not null and sd.time_to_next_event <= interval '30 minutes'), 0)"
+            // avg time_to_next_event where time_to_next_event <= session duration and time_to_next_event is not null
+            format!(
+                "--sql
+            coalesce(avg(extract(epoch from sd.time_to_next_event)) filter (where sd.time_to_next_event is not null and sd.time_to_next_event <= {SESSION_DURATION_SQL}), 0)"
+            )
         }
     }
-    .to_owned()
 }
 
 pub fn earliest_timestamp(conn: &DuckDBConn, entities: &[String]) -> Result<Option<DateTime<Utc>>> {
@@ -442,21 +456,36 @@ pub fn dimension_report(
     let (filters_sql, filters_params) = filter_sql(filters)?;
 
     let metric_column = metric_sql(*metric);
-    let (dimension_column, group_by_columns) = match dimension {
-        Dimension::Url => ("concat(fqdn, path)", "fqdn, path"),
-        Dimension::Path => ("path", "path"),
-        Dimension::Fqdn => ("fqdn", "fqdn"),
-        Dimension::Referrer => ("referrer", "referrer"),
-        Dimension::Platform => ("platform", "platform"),
-        Dimension::Browser => ("browser", "browser"),
-        Dimension::Mobile => ("mobile::text", "mobile"),
-        Dimension::Country => ("country", "country"),
-        Dimension::City => ("concat(country, city)", "country, city"),
-        Dimension::UtmSource => ("utm_source", "utm_source"),
-        Dimension::UtmMedium => ("utm_medium", "utm_medium"),
-        Dimension::UtmCampaign => ("utm_campaign", "utm_campaign"),
-        Dimension::UtmContent => ("utm_content", "utm_content"),
-        Dimension::UtmTerm => ("utm_term", "utm_term"),
+    let (dimension_column, group_by_columns, dimension_scope_sql) = match dimension {
+        Dimension::Url => ("concat(fqdn, path)", "fqdn, path", None),
+        Dimension::UrlEntry => (
+            "concat(fqdn, path)",
+            "fqdn, path",
+            Some(format!("time_from_last_event is null or time_from_last_event > {SESSION_DURATION_SQL}")),
+        ),
+        Dimension::UrlExit => (
+            "concat(fqdn, path)",
+            "fqdn, path",
+            Some(format!("time_to_next_event is null or time_to_next_event > {SESSION_DURATION_SQL}")),
+        ),
+        Dimension::Path => ("path", "path", None),
+        Dimension::Fqdn => ("fqdn", "fqdn", None),
+        Dimension::Referrer => ("referrer", "referrer", None),
+        Dimension::Platform => ("platform", "platform", None),
+        Dimension::Browser => ("browser", "browser", None),
+        Dimension::Mobile => ("mobile::text", "mobile", None),
+        Dimension::Country => ("country", "country", None),
+        Dimension::City => ("concat(country, city)", "country, city", None),
+        Dimension::UtmSource => ("utm_source", "utm_source", None),
+        Dimension::UtmMedium => ("utm_medium", "utm_medium", None),
+        Dimension::UtmCampaign => ("utm_campaign", "utm_campaign", None),
+        Dimension::UtmContent => ("utm_content", "utm_content", None),
+        Dimension::UtmTerm => ("utm_term", "utm_term", None),
+    };
+    let filters_sql = match (filters_sql.is_empty(), dimension_scope_sql) {
+        (true, Some(scope)) => format!("and ({scope})"),
+        (false, Some(scope)) => format!("{filters_sql} and ({scope})"),
+        (_, None) => filters_sql,
     };
 
     params.push(range.start);

web/src/api/constants.ts

@@ -11,6 +11,8 @@ export const dimensionNames: Record<Dimension, string> = {
 	platform: "Platform",
 	browser: "Browser",
 	url: "URL",
+	url_entry: "Entry",
+	url_exit: "Exit",
 	path: "Path",
 	mobile: "Device Type",
 	referrer: "Referrer",

web/src/api/dashboard.ts

@@ -12,6 +12,8 @@ export const dimensions = [
 	"platform",
 	"browser",
 	"url",
+	"url_entry",
+	"url_exit",
 	"path",
 	"mobile",
 	"referrer",

web/src/api/types.ts

@@ -8,7 +8,7 @@
 .tabs {
   .tabsList {
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
     margin-bottom: 1rem;
 
     .dimensionSelect {
@@ -24,18 +24,50 @@
     }
   }
 
-  .tabsList > button {
+  .tabsList button {
     all: unset;
     cursor: pointer;
     user-select: none;
+    opacity: 0.9;
+    font-weight: 500;
+  }
+
+  .tabsList button[aria-selected="true"] {
+    opacity: 1;
+    font-weight: 600;
+    text-decoration: underline;
+    text-decoration-thickness: 0.15rem;
+  }
+
+  .tabsList > button:last-of-type {
+    margin-right: auto;
+  }
 
-    &[aria-selected="true"] {
-      text-decoration: underline;
-      font-weight: 600;
+  .tabsList .pageTabGroup {
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+
+    > :first-child {
+      margin-right: 0.1rem;
     }
 
-    &:last-of-type {
-      margin-right: auto;
+    > :not(:first-child) {
+      font-size: 0.8rem;
+      padding: 0.1rem 0.1rem;
+      margin-top: 0.15rem;
+
+      &button {
+        font-weight: 800;
+      }
+
+      &:not([aria-selected="true"]) {
+        opacity: 0.6;
+      }
+    }
+
+    > :last-child {
+      margin-right: 0.5rem;
     }
   }
 

web/src/components/dimensions/dimensions.module.css

@@ -45,6 +45,48 @@ export const DimensionTabsCard = ({
 	);
 };
 
+export const PageDimensionTabsCard = ({
+	query,
+	onSelect,
+}: {
+	query: ProjectQuery;
+	onSelect: (value: DimensionTableRow, dimension: Dimension) => void;
+}) => {
+	const showSessionPageDimensions = query.metric === "views" || query.metric === "unique_visitors";
+	const dimensions: Dimension[] = showSessionPageDimensions
+		? ["url", "url_entry", "url_exit", "fqdn"]
+		: ["url", "fqdn"];
+
+	return (
+		<article className={styles.card}>
+			<Tabs.Root
+				className={styles.tabs}
+				defaultValue="url"
+				key={showSessionPageDimensions ? "session-pages" : "basic-pages"}
+			>
+				<Tabs.List className={styles.tabsList}>
+					<div className={styles.pageTabGroup}>
+						<Tabs.Tab value="url">URL</Tabs.Tab>
+						{showSessionPageDimensions && (
+							<>
+								<Tabs.Tab value="url_entry">Entry</Tabs.Tab>
+								<Tabs.Tab value="url_exit">Exit</Tabs.Tab>
+							</>
+						)}
+					</div>
+					<Tabs.Tab value="fqdn">Domain</Tabs.Tab>
+					<div>{metricNames[query.metric]}</div>
+				</Tabs.List>
+				{dimensions.map((dimension) => (
+					<Tabs.Panel key={dimension} value={dimension} className={styles.tabsContent}>
+						<DimensionTable dimension={dimension} query={query} onSelect={(value) => onSelect(value, dimension)} />
+					</Tabs.Panel>
+				))}
+			</Tabs.Root>
+		</article>
+	);
+};
+
 export const DimensionDropdownCard = ({
 	dimensions,
 	query,
@@ -173,6 +215,21 @@ const DimensionValueButton = ({ children, onSelect }: { children: string; onSele
 	</button>
 );
 
+const renderUrlDimensionLabel = (value: DimensionTableRow, onSelect: () => void) => {
+	const url = tryParseUrl(value.dimensionValue);
+
+	return (
+		<>
+			<LinkIcon size={16} />
+			<DimensionValueButton onSelect={onSelect}>{formatPath(url)}</DimensionValueButton>
+			<a href={getHref(url)} target="_blank" rel="noreferrer" className={styles.external}>
+				<SquareArrowOutUpRightIcon size={16} />
+			</a>
+			{typeof url !== "string" && <span className={styles.hostname}>{formatHost(url)}</span>}
+		</>
+	);
+};
+
 const dimensionLabels: Record<Dimension, (value: DimensionTableRow, onSelect: () => void) => React.ReactNode> = {
 	utm_campaign: (value, onSelect) => (
 		<>
@@ -216,20 +273,9 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow, onSelect: ()
 			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue}</DimensionValueButton>
 		</>
 	),
-	url: (value, onSelect) => {
-		const url = tryParseUrl(value.dimensionValue);
-
-		return (
-			<>
-				<LinkIcon size={16} />
-				<DimensionValueButton onSelect={onSelect}>{formatPath(url)}</DimensionValueButton>
-				<a href={getHref(url)} target="_blank" rel="noreferrer" className={styles.external}>
-					<SquareArrowOutUpRightIcon size={16} />
-				</a>
-				{typeof url !== "string" && <span className={styles.hostname}>{formatHost(url)}</span>}
-			</>
-		);
-	},
+	url: renderUrlDimensionLabel,
+	url_entry: renderUrlDimensionLabel,
+	url_exit: renderUrlDimensionLabel,
 	fqdn: (value, onSelect) => {
 		const url = tryParseUrl(value.dimensionValue);
 		return (

web/src/components/dimensions/index.tsx

@@ -9,7 +9,13 @@ import type { DateRange } from "../api/ranges";
 
 import { useMetric, useRange } from "../hooks/persist";
 import { cls } from "../utils";
-import { DimensionCard, DimensionDropdownCard, DimensionTabs, DimensionTabsCard } from "./dimensions";
+import {
+	DimensionCard,
+	DimensionDropdownCard,
+	DimensionTabs,
+	DimensionTabsCard,
+	PageDimensionTabsCard,
+} from "./dimensions";
 import { LineGraph } from "./graph";
 import { SelectFilters } from "./project/filter";
 import { SelectMetrics } from "./project/metric";
@@ -112,7 +118,7 @@ export const Project = () => {
 					<LineGraph data={graph ?? []} metric={metric} title={metricNames[metric]} range={range} />
 				</article>
 				<div className={styles.tables}>
-					<DimensionTabsCard dimensions={["url", "fqdn"]} query={query} onSelect={onSelectDimRow} />
+					<PageDimensionTabsCard query={query} onSelect={onSelectDimRow} />
 					<DimensionDropdownCard
 						dimensions={["referrer", "utm_source", "utm_medium", "utm_campaign", "utm_content", "utm_term"]}
 						query={query}

web/src/components/project.tsx

@@ -54,6 +54,14 @@ const filters = {
 		invertable: true,
 		filterTypes: ["equal", "contains", "starts_with", "ends_with"],
 	},
+	url_entry: {
+		invertable: true,
+		filterTypes: ["equal", "contains", "starts_with", "ends_with"],
+	},
+	url_exit: {
+		invertable: true,
+		filterTypes: ["equal", "contains", "starts_with", "ends_with"],
+	},
 	fqdn: {
 		invertable: true,
 		filterTypes: ["equal", "contains", "starts_with", "ends_with"],
@@ -129,6 +137,9 @@ const filters = {
 >;
 
 type filterDimension = keyof typeof filters;
+const displayFilters = (Object.keys(filters) as filterDimension[]).filter(
+	(dimension) => dimension !== "url_entry" && dimension !== "url_exit",
+);
 
 const FilterDialog = ({ onAdd }: { onAdd: (filter: DimensionFilter) => void }) => {
 	const closeRef = useRef<HTMLButtonElement>(null);
@@ -171,7 +182,7 @@ const FilterDialog = ({ onAdd }: { onAdd: (filter: DimensionFilter) => void }) =
 				<label>
 					Dimension
 					<select name="dimension" value={dimension} onChange={(e) => setDimension(e.target.value as filterDimension)}>
-						{Object.keys(filters).map((dimension) => (
+						{displayFilters.map((dimension) => (
 							<option key={dimension} value={dimension}>
 								{dimensionNames[dimension as filterDimension]}
 							</option>

web/src/components/project/filter.tsx

@@ -6,8 +6,8 @@
   --pico-background-color: #f7f8ff;
   --card-background-base: 0deg 0% 100%;
   --pico-card-background-color: hsl(var(--card-background-base));
-  --pico-block-spacing-vertical: 1rem;
-  --pico-block-spacing-horizontal: 1rem;
+  --pico-block-spacing-vertical: 0.8rem;
+  --pico-block-spacing-horizontal: 0.8rem;
   --pico-card-box-shadow: 0px 0px 24px #15233610;
   --pico-dropdown-background-color: #ffffff81;