diff --git a/alpha-lab/.vitepress/config.mts b/alpha-lab/.vitepress/config.mts
index b768819fe..20027e489 100644
--- a/alpha-lab/.vitepress/config.mts
+++ b/alpha-lab/.vitepress/config.mts
@@ -13,6 +13,7 @@ let theme_config_additions = {
{ text: "Map Gaze Onto Body Parts", link: "/dense-pose/" },
{ text: "Map Gaze Onto a 3D Model of an Environment", link: "/nerfs/" },
{ text: "Map Gaze Onto Facial Landmarks", link: "/gaze-on-face/" },
+ { text: "Map Gaze Onto Website AOIs", link: "/web-aois/" },
],
},
{
diff --git a/alpha-lab/cards.json b/alpha-lab/cards.json
index 8818eb396..f64a80545 100644
--- a/alpha-lab/cards.json
+++ b/alpha-lab/cards.json
@@ -128,5 +128,15 @@
},
"image": "/alpha-lab/map-gaze-nadia.webp",
"category": "Gaze Mapping"
+ },
+ {
+ "title": "Map Gaze Onto Website AOIs",
+ "details": "Define areas of interest on a website and map gaze onto them using our Web-AOI tool.",
+ "link": {
+ "text": "View",
+ "href": "/alpha-lab/web-aois/"
+ },
+ "image": "/alpha-lab/web-aoi.webp",
+ "category": "Gaze Mapping"
}
]
diff --git a/alpha-lab/public/web-aoi.webp b/alpha-lab/public/web-aoi.webp
new file mode 100644
index 000000000..92f6b4e8f
Binary files /dev/null and b/alpha-lab/public/web-aoi.webp differ
diff --git a/alpha-lab/web-aois/heatmap-gazes-overlaid.png b/alpha-lab/web-aois/heatmap-gazes-overlaid.png
new file mode 100644
index 000000000..d4a0f7c69
Binary files /dev/null and b/alpha-lab/web-aois/heatmap-gazes-overlaid.png differ
diff --git a/alpha-lab/web-aois/heatmap_output.png b/alpha-lab/web-aois/heatmap_output.png
new file mode 100644
index 000000000..a588e32ef
Binary files /dev/null and b/alpha-lab/web-aois/heatmap_output.png differ
diff --git a/alpha-lab/web-aois/index.md b/alpha-lab/web-aois/index.md
new file mode 100644
index 000000000..cc06fa52e
--- /dev/null
+++ b/alpha-lab/web-aois/index.md
@@ -0,0 +1,115 @@
+---
+title: Map Gaze Onto Website AOIs
+description: "Define areas of interest on a website and map gaze onto them using our Web-AOI tool. "
+permalink: /alpha-lab/web-aois
+meta:
+ - name: twitter:card
+ content: player
+ - name: twitter:image
+ content: "https://i.ytimg.com/vi/1yJfhtdJoMA/maxresdefault.jpg"
+ - name: twitter:player
+ content: "https://www.youtube.com/embed/DzK055NbRPM"
+ - name: twitter:width
+ content: "1280"
+ - name: twitter:height
+ content: "720"
+ - property: og:image
+ content: "https://i.ytimg.com/vi/1yJfhtdJoMA/maxresdefault.jpg"
+tags: [Neon]
+---
+
+
+
+# Map Gaze Onto Website AOIs
+
+
+
+
+
+::: tip
+Want to see your website through your users' eyes? Discover what really captures their attention as they scroll using our website AOI Tool + Neon eye tracking!
+:::
+
+## Understanding Gaze Patterns in Web Interaction
+
+Understanding where people focus their attention on websites is key to optimizing user interfaces and improving user experiences, whether individuals are making decisions about online shopping or simply browsing content. This knowledge is also useful for educational technology, commonly referred to as EdTech. Consider interactive displays in classrooms or online learning platforms—grasping how users interact with these tools is fundamental for enhancing learning outcomes.
+
+By gathering data on gaze patterns during these interactions, designs can be tailored to prioritize user needs. This results in websites that are easier to navigate, applications with better user interfaces, online stores that offer more intuitive shopping experiences, and EdTech applications that foster more effective learning environments.
+
+In this guide, we will introduce a desktop application featuring an integrated browser that incorporates AprilTag markers onto webpages. This tool integrates with Neon, facilitating the recording and visualization of gaze data mapped onto areas of interest on a website.
+
+## Introducing Web Gaze Mapping
+
+Pupil Cloud offers powerful tools like the [Marker Mapper](https://docs.pupil-labs.com/neon/pupil-cloud/enrichments/marker-mapper/) and [Reference Image Mapper](https://docs.pupil-labs.com/neon/pupil-cloud/enrichments/reference-image-mapper/) enrichments, which enable users to map gaze onto areas of interest. However, they do not provide a turnkey solution for defining AOIs on a website and importantly, maintaining gaze mapping even during scrolling—a behavior typical of regular website usage.
+
+By following this guide, you can easily define AOIs on websites of your choice and record Neon data. Importantly, with this tool, the AOIs are not lost as you scroll. Afterward, you'll receive gaze mapping for each AOI, including individual AOI heatmaps and a full-page heatmap.
+
+### How Does This Tool Work?
+
+We leverage [Playwright](https://playwright.dev/), an open-source automation library for browser testing and web scraping, alongside AprilTags automatically placed on the webpage within the browser interface. Through Playwright, we generate AOIs using selectable web elements, while the AprilTags facilitate the real-time transformation of gaze data from *scene-camera* to *screen-based* coordinates. For a deeper understanding of this transformation, refer to [the documentation](https://docs.pupil-labs.com/alpha-lab/gaze-contingency-assistive/#how-to-use-a-head-mounted-eye-tracker-for-screen-based-interaction).
+
+## Steps To Recreate
+
+Explore the [GitHub repository](https://github.com/pupil-labs/web-aois) and follow these simple steps:
+
+1. Define Areas of Interest (AOIs) on your selected website.
+2. Put Neon and start collecting data.
+3. Process your recording to generate CSV files with gaze mapped onto AOI coordinates.
+4. Visualize the data with customized heatmaps.
+
+## Visualize Mapped Gaze Data
+
+After running the code, new files will be generated.
+
+- For every AOI, you will get `png` files with transparent and overlaid heatmaps and csv files with the gaze data mapped on the AOI coordinates.
+- A transparent and overlaid heatmap will also be provided for the full page (e.g., see below), along with a `gaze.csv` file that will include the mapped gaze data to the webpage in full.
+
+
+
+
+
+
+
+
+
+
+