A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Measuring user interaction time with website

collimarco
2021-10-10

With current APIs, is there any way to measure how long a user has been interacting with the website (not just with a single page)?

That would be useful to decide when to trigger a push notification prompt, a newsletter signup prompt, etc. That would increase the likelihood that a website display the prompt at the right moment, after some interaction, and not as soon as a user lands on a website.

simevidas
2021-10-17

I guess you could store a timestamp of the visitor’s arrival in sessionStorage.

collimarco
2021-10-18

you could store a timestamp of the visitor’s arrival in sessionStorage

That would not measure the actual interaction time with your website… Idle, not using the PC or the browser, visiting other sites on other tabs, etc.

That’s why we need an API to measure the actual interaction time.

simevidas
2021-10-18

Chrome recently shipped Idle Detection.

As far as I know, there is no single API that would directly tell you how long the user has interacted with a website as a whole, but there are different APIs that can be used together to enable a library that can answer that question more or less reliably.

jackyjoy123
2022-02-20

thanks my issue has been fixed.

collimarco
2022-05-17

I still think that an API would be really useful.

Also note that the Idle Detection requires a permission, so it’s not suited for my use case: for example one of the use cases would be to ask the permission for notifications only once the user has interacted with the website for some time.

If you have privacy concern, the API could round the “interaction time” value… For example instead of saying that the user has interacted with a domain for 123.45 seconds, it could say > 1 minute.

The API would be really simple:

  • window.getDomainInteractionTime => number
  • or alternatively, window.getDomainEngagementLevel => ‘new’, ‘low’, ‘medium’, ‘high’, etc.

Then, based on the level of engagement, you can display personalized messages, push notification prompt, a newsletter signup prompt, etc…

raphaellouis
2022-05-28

Hi all!

1. What is “Time on Site”?

“This is an average of the amount of time all visitors to a page spend on that particular page. This can be misleading as some people might leave the page open and go to lunch. But it is a pretty good reflection on how people are engaging with your content.”

2. Concept

image

3. What are we trying to measure?

  1. The user has confirmation that loading has started.
  2. The user has enough information in front of them to think that they can interact with the page.
  3. The user can interact with the page (this particular moment being dependant of the type of the interaction).
  4. The user’s interaction with the page is effortless and intuitive, with no delays and jank.
  5. User Interaction With Forms

4. How Long Do Users Stay on Web Pages?

Summary: Users often leave Web pages in 10–20 seconds, but pages with a clear value proposition can hold people’s attention for much longer. To gain several minutes of user attention, you must clearly communicate your value proposition within 10 seconds.

5. My idea/Algorithm

  1. Users often leave Web pages in 10–20 seconds
  2. This statistical information should not be made with cookies, only localstorage
  3. “One analysis of 5 million desktop and mobile pages found that the average time it takes to fully load a webpage is 10.3 seconds on desktop, and 27.3 seconds on mobile .” - this should be the maximum or minimum time for the function to measure user interaction time
  4. It is necessary to specify the type of interaction that the user will make on the site
6. Source code of the my idea/algorithm
var info = userLeaveWebpage(); // website//mobile
localstorage.saveData(info)

// or
var website = userLeaveWebpage.mobile(); 
var mobile = userLeaveWebpage.website();

if website == 10 or website == 20:
   userInteractTimeWebsite.form(10) // evaluate every 10 seconds if the user used the form or not in website
    window.getDomainInteractionTime => number
    //window.getDomainEngagementLevel => ‘new’, ‘low’, ‘medium’, ‘high
  return localstorage.statusPage('true', '[10, 20]');

if website == 10 or website == 20:
    window.getDomainInteractionTime => number
    //window.getDomainEngagementLevel => ‘new’, ‘low’, ‘medium’, ‘high
     userInteractTimeMobile.form(10) // evaluate every 10 seconds if the user used the form or not in mobile
  return localstorage.statusPage('true', '[10, 20]');

7. References
raphaellouis
2022-05-28

@collimarco @simevidas @jackyjoy123 Hi all! What do you think of this code?

collimarco
2022-05-28

@raphaellouis It’s nice to see that you are also interested in this proposal. However I really don’t understand your idea / code.

raphaellouis
2022-05-28

@collimarco thank you for feedback ;D

1. Concept
  1. User waits for page to load
  2. After the page is loaded
  3. The user will interact with some element of the page
  4. For each element that the user interacts with the page, that element that was interacted with is evaluated for a time and the information of that time is saved in the information in localstorage or it can be sent to the server directly through a fetch

2. In short

  1. My idea is to specify the form of user interaction at a time defined by the page
  2. we can have user interaction in an email field or on page scrolling - this has to be set
  3. In my code I do a time evaluation which is based on most page stats - with this I define which element I want to analyze in that time interval
  4. For me to evaluate which element I need to analyze, it is necessary for the api to establish which elements should be evaluated
  5. I made a suggestion like this: user interaction on the form, interaction waiting for the page to load etc.
  6. Is a pseudo code to demonstrate my idea

3. Code

image

3.1 Source-code

//// -- LEVEL 1
//// -- Tables and References

Table UserInteractionWays {
  InteractionByForm timestamp
  WaitForPageToLoad timestamp
  TimeThatUserWaitPage timestamp
  ClickingAButtonForASetTime timestamp
 }

3.2 Screenshot

3.3 Source-code real

<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The localStorage Property</h2>
<p>Saved name is:</p>
<p id="demo"></p>
<script>
// Set Item
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
localStorage.setItem("WaitForPageToLoad", loadTime);
document.getElementById("demo").innerHTML = localStorage.getItem("WaitForPageToLoad");
</script>
</body>
</html>

API - Measuring user interaction time with website

  1. loadTime is window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart
  2. WaitForPageToLoad with localStorage.setItem(“WaitForPageToLoad”, loadTime),
  3. UserInteractionTime.WaitForPageToLoad(): return timestamp(save in localstorage)

Other supports

  1. UserInteractionTime.InteractionByForm(): return timestamp(save in localstorage)
  2. UserInteractionTime.TimeThatUserWaitPage(): return timestamp(save in localstorage)
  3. UserInteractionTime.ClickingAButtonForASetTime(): return timestamp(save in localstorage)
  4. UserInteractionTime.PageScroll(): return timestamp(save in localstorage)

proof of concept

image

Notes

the time the user waits on the page was -1653750874358 or 2022-05-24 16:18:56.

References

raphaellouis
2022-05-28

@collimarco If you have any questions, I explain in another way, I really want to help with this proposal

Summarizing the api It should be like this

  1. UserInteractionTime.WaitForPageToLoad(): return timestamp
  2. UserInteractionTime.InteractionByForm(): return timestamp
  3. UserInteractionTime.TimeThatUserWaitPage(): return timestamp
  4. UserInteractionTime.ClickingAButtonForASetTime(): return timestamp
  5. UserInteractionTime.PageScroll(): return timestamp(save in localstorage
Reasons
  1. The types of user interactions are specified
  2. Any type of user interaction is returned an expected or awaited time
  3. My inspiration would be something like selenium
try:
    element = UserInteractionTime(driver, 10).until(
        EC.presence_of_element_located((By.ID, "myDynamicElement"))
    )
finally:
    UserInteractionTime.quit()

References

raphaellouis
2022-05-29
How to measure user interaction time with the website?
  1. Compare the page load response time with the time the page element is viewed, clicked, filled, or waited and waited.
  2. The comparison will give you an average, a central value.
  3. Frameworks like selenium do exactly what I said.
  4. For you compare the page load response time with the time the page element is viewed, clicked, filled, or waited and waited. You need this: “Summary: Users often leave Web pages in 10–20 seconds, but pages with a clear value proposition can hold people’s attention for much longer. To gain several minutes of user attention, you must clearly communicate your value proposition within 10 seconds.”
  5. To create our api to create an API that is made to interact in Dom - Document Object Model.
  6. My api has everything you need.
My api:UserInteractionTime.js
var start=0, end;

function UserInteraction(nameDef, value){
    localStorage.setItem(nameDef, value);
    return localStorage.getItem(nameDef);
}

function UserInteractionForm(){
  $('.eform input').on('focus', function(e){
   start=Date.now()
 })
$(document).on('submit','.eform', function(e){
   end=Date.now()-start;
   let number = start+end;
   console.log("Seconds filling the form", parseFloat(end/1000).toFixed(2) )
   UserInteraction("InteractionByForm", number)   
});
}

function  loadTime(){
   return window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
}

Api

  • UserInteraction(“WaitForPageToLoad”, loadTime()); // return timestamp
  • UserInteractionForm(); // return timestamp

References