From 8212df2b2e7aa11e48445b102263b5b4cd0039b8 Mon Sep 17 00:00:00 2001
From: Shrishti Rawat <146873449+Shrishti0423@users.noreply.github.com>
Date: Fri, 23 Oct 2026 00:46:26 +0530
Subject: [PATCH 1/2] Update analytics data sending method

Replaced 'unload' event with 'visibilitychange' to send analytics data when the document is hidden.
---
 2-ui/5-loading/01-onload-ondomcontentloaded/article.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
index 07624a6587..81766f265a 100644
--- a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
+++ b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
@@ -143,8 +143,10 @@ Here's how to use it:
 ```js
 let analyticsData = { /* object with gathered data */ };
 
-window.addEventListener("unload", function() {
-  navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
+document.addEventListener("visibilitychange", function() {
+  if (document.visibilityState === "hidden") {
+    navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
+  }
 });
 ```
 

From 1a7496ac78d3294522015fa2fe830ea6e0934e82 Mon Sep 17 00:00:00 2001
From: Shrishti Rawat <146873449+Shrishti0423@users.noreply.github.com>
Date: Tue, 3 Nov 2026 22:08:59 +0530
Subject: [PATCH 2/2] Fix analytics reporting on visibility change

Updated the explanation of using the visibilitychange event and navigator.sendBeacon for sending analytics data.
---
 .../01-onload-ondomcontentloaded/article.md         | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
index 81766f265a..d31547f076 100644
--- a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
+++ b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md
@@ -133,22 +133,25 @@ The notable exception is sending analytics.
 
 Let's say we gather data about how the page is used: mouse clicks, scrolls, viewed page areas, and so on.
 
-Naturally, `unload` event is when the user leaves us, and we'd like to save the data on our server.
+When the page becomes hidden, we may want to save the collected data on our server. The `visibilitychange` event is useful for this: it fires when the user switches tabs, minimizes the browser, or leaves the page.
 
 There exists a special `navigator.sendBeacon(url, data)` method for such needs, described in the specification <https://w3c.github.io/beacon/>.
 
-It sends the data in background. The transition to another page is not delayed: the browser leaves the page, but still performs `sendBeacon`.
+It sends the data in the background. The transition to another page is not delayed: the browser leaves the page, but still performs `sendBeacon`.
 
 Here's how to use it:
+
 ```js
 let analyticsData = { /* object with gathered data */ };
+let analyticsSent = false;
 
 document.addEventListener("visibilitychange", function() {
-  if (document.visibilityState === "hidden") {
-    navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
+  if (document.visibilityState === "hidden" && !analyticsSent) {
+    analyticsSent = navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
   }
 });
-```
+``` 
+
 
 - The request is sent as POST.
 - We can send not only a string, but also forms and other formats, as described in the chapter <info:fetch>, but usually it's a stringified object.