feat: add orientation dimension

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

Author: explodingcamera

Cargo.lock

@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
 cd "$(dirname "$0")" || exit
 esbuild ../tracker/script.ts --minify --format=esm --target=chrome123,edge123,firefox124,safari17 --outfile=../tracker/script.min.js
-bunx tsc ../tracker/script.ts --target ESNext --module ESNext --declaration --emitDeclarationOnly --outFile ../tracker/script.d.ts
+bunx tsc ../tracker/script.ts --target ESNext --module ESNext --declaration --emitDeclarationOnly --outDir ../tracker

data/licenses-cargo.json

@@ -66,7 +66,8 @@ pub enum Dimension {
     UtmCampaign,
     UtmContent,
     UtmTerm,
-    ScreenSize,
+    ScreenWidth,
+    Orientation,
 }
 
 #[derive(Serialize, Deserialize, JsonSchema, Debug, Clone, Copy, Hash, Eq, PartialEq, PartialOrd, Ord)]
@@ -192,7 +193,8 @@ fn filter_sql(filters: &[DimensionFilter]) -> Result<(String, ParamVec<'_>)> {
                 Dimension::UtmCampaign => format!("utm_campaign {filter_value}"),
                 Dimension::UtmContent => format!("utm_content {filter_value}"),
                 Dimension::UtmTerm => format!("utm_term {filter_value}"),
-                Dimension::ScreenSize => format!("screen_size {filter_value}"),
+                Dimension::ScreenWidth => format!("screen_width {filter_value}"),
+                Dimension::Orientation => format!("orientation {filter_value}"),
             })
         })
         .collect::<Result<Vec<String>>>()?;
@@ -483,7 +485,8 @@ pub fn dimension_report(
         Dimension::UtmCampaign => ("utm_campaign", "utm_campaign", None),
         Dimension::UtmContent => ("utm_content", "utm_content", None),
         Dimension::UtmTerm => ("utm_term", "utm_term", None),
-        Dimension::ScreenSize => ("screen_size", "screen_size", None),
+        Dimension::ScreenWidth => ("screen_width", "screen_width", None),
+        Dimension::Orientation => ("orientation", "orientation", None),
     };
     let filters_sql = match (filters_sql.is_empty(), dimension_scope_sql) {
         (true, Some(scope)) => format!("and ({scope})"),

data/licenses-npm.json

@@ -23,7 +23,8 @@ pub struct Event {
     pub utm_campaign: Option<String>,
     pub utm_content: Option<String>,
     pub utm_term: Option<String>,
-    pub screen_size: Option<String>,
+    pub screen_width: Option<String>,
+    pub orientation: Option<String>,
 }
 
 #[derive(Debug, Clone)]
@@ -101,7 +102,8 @@ macro_rules! event_params {
             $event.utm_term,
             None::<std::time::Duration>,
             None::<std::time::Duration>,
-            $event.screen_size,
+            $event.screen_width,
+            $event.orientation,
         ]
     };
 }

scripts/build-tracker.sh

@@ -1 +1,2 @@
-alter table events add column screen_size text;
+alter table events add column screen_width text;
+alter table events add column orientation text;

src/app/core/reports.rs

@@ -22,6 +22,8 @@ const UTM_CONTENTS: &[&str] = &["", "banner", "sidebar", "footer", "popup"];
 const UTM_MEDIUMS: &[&str] = &["", "cpc", "organic", "referral", "email"];
 const UTM_SOURCES: &[&str] = &["", "google", "bing", "facebook", "twitter"];
 const UTM_TERMS: &[&str] = &["", "liwan", "analytics", "tracking", "web"];
+const SCREEN_WIDTH_BUCKETS: &[&str] = &["xs", "sm", "md", "lg", "xl", "2xl"];
+const ORIENTATIONS: &[&str] = &["portrait", "landscape"];
 
 pub fn random_events(
     time_range: (DateTime<Utc>, DateTime<Utc>),
@@ -106,6 +108,8 @@ pub fn random_events(
         let browser = random_el(BROWSERS, 0.0);
         let mobile = rng.random_bool(0.48);
         let (city, country) = random_el(CITIES, 0.8);
+        let screen_width = random_el(SCREEN_WIDTH_BUCKETS, 0.0);
+        let orientation = random_el(ORIENTATIONS, 0.0);
 
         Some(Event {
             browser: if browser.is_empty() { None } else { Some(browser.to_string()) },
@@ -125,7 +129,8 @@ pub fn random_events(
             utm_medium: Some(random_el(UTM_MEDIUMS, 0.6).to_string()),
             utm_source: Some(random_el(UTM_SOURCES, 0.6).to_string()),
             utm_term: Some(random_el(UTM_TERMS, 0.6).to_string()),
-            screen_size: None,
+            screen_width: Some(screen_width.to_string()),
+            orientation: Some(orientation.to_string()),
         })
     })
 }

src/app/models.rs

@@ -227,7 +227,7 @@ async fn project_detailed_handler(
                 let city = city.filter(|city| !city.is_empty());
                 data.push(DimensionTableRow { dimension_value: key, value, display_name: city, icon: country });
             }
-            Dimension::ScreenSize => {
+            Dimension::ScreenWidth | Dimension::Orientation => {
                 let display_name =
                     key.chars().next().map(|c| c.to_uppercase().collect::<String>() + &key[c.len_utf8()..]);
                 data.push(DimensionTableRow { dimension_value: key, value, display_name, icon: None });

src/migrations/events/V5__screen_size.sql

@@ -31,7 +31,8 @@ struct EventRequest {
     url: String,
     referrer: Option<String>,
     utm: Option<Utm>,
-    screen_width: Option<u32>,
+    screen_width: Option<String>,
+    orientation: Option<String>,
 }
 
 #[derive(serde::Deserialize, JsonSchema)]
@@ -43,15 +44,6 @@ struct Utm {
     term: Option<String>,
 }
 
-fn screen_size_bucket(width: u32) -> &'static str {
-    match width {
-        0..=767 => "mobile",
-        768..=1023 => "tablet",
-        1024..=2559 => "desktop",
-        _ => "ultrawide",
-    }
-}
-
 static EXISTING_ENTITIES: LazyLock<quick_cache::sync::Cache<String, ()>> =
     LazyLock::new(|| quick_cache::sync::Cache::new(512));
 
@@ -141,45 +133,10 @@ fn process_event(
         utm_medium: event.utm.as_ref().and_then(|u| u.medium.clone()),
         utm_source: event.utm.as_ref().and_then(|u| u.source.clone()),
         utm_term: event.utm.as_ref().and_then(|u| u.term.clone()),
-        screen_size: event.screen_width.map(|w| screen_size_bucket(w).to_string()),
+        screen_width: event.screen_width,
+        orientation: event.orientation,
     };
 
     events.send(event)?;
     Ok(())
 }
-
-#[cfg(test)]
-mod tests {
-    use super::screen_size_bucket;
-
-    #[test]
-    fn test_screen_size_bucket_mobile() {
-        assert_eq!(screen_size_bucket(0), "mobile");
-        assert_eq!(screen_size_bucket(375), "mobile");
-        assert_eq!(screen_size_bucket(430), "mobile");
-        assert_eq!(screen_size_bucket(767), "mobile");
-    }
-
-    #[test]
-    fn test_screen_size_bucket_tablet() {
-        assert_eq!(screen_size_bucket(768), "tablet");
-        assert_eq!(screen_size_bucket(810), "tablet");
-        assert_eq!(screen_size_bucket(1023), "tablet");
-    }
-
-    #[test]
-    fn test_screen_size_bucket_desktop() {
-        assert_eq!(screen_size_bucket(1024), "desktop");
-        assert_eq!(screen_size_bucket(1280), "desktop");
-        assert_eq!(screen_size_bucket(1920), "desktop");
-        assert_eq!(screen_size_bucket(2559), "desktop");
-    }
-
-    #[test]
-    fn test_screen_size_bucket_ultrawide() {
-        assert_eq!(screen_size_bucket(2560), "ultrawide");
-        assert_eq!(screen_size_bucket(3440), "ultrawide");
-        assert_eq!(screen_size_bucket(3840), "ultrawide");
-        assert_eq!(screen_size_bucket(7680), "ultrawide");
-    }
-}