1

I have a tracking mechanism through which I send JSON objects to an API endpoint during the stay of an user on a web page. So I am sending API calls on some particular events. The API has to receive a call when the user leaves the page.

The problem is that I am using the functions below to trigger when the user closes the broser, but the functions are triggered only in browser debug mode.

// page-wrapper.component.ts ... // triggers on DOM unload @HostListener('window:unload', ['$event']) unloadHandler(event) { this.service.apiCall(); // this is nevertriggered console.log('unloaded DOM') // triggered only in browser debug mode } // triggers just before unloadHandler() @HostListener('window:beforeunload', ['$event']) beforeUnloadHander(event) { this.service.apiCall(); // same as above }

So I tried both the methods. If I debug them The methods seems to be triggered but the APIs do not receive anything.

I can ensure that the function that contacts the APIs was tested and it has no problems.

I think the problem is related to unloadHandler() or beforeUnloadHandler().

Does someone know how to call an api when the user closes the broser window or the browser tab?

Note: that the application could live in a standalone browser tab or an iframe.

neboduus
  • 418
  • 1
  • 5
  • 14
  • Are you able to reach inside the functions beforeUnloadHander and unloadHandler? What you want your API to receive? – Prachi May 16 '18 at 07:30
  • I can reach `beforeUnloadHandler()` only if I make it `return false`. When I do that the browser asks me If I am sure to exit the page. But at that time the user could respond NO and the browser keeps the window open. So it is not the right moment to contact the API. My API has to recieve a JSON object when the user leaves the page. – neboduus May 16 '18 at 09:11
  • read this https://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own – Francesco May 18 '18 at 06:04

2 Answers2

1

Thanks to @Francesco I arrived at the following conclusion:

It is not possible to ensure that every time an user exits a browser page a specific function will be triggered. The reason is that the browser could close the window for many reasons. Yes it could be a user action but this is not the only case. For example The browser could crash.

In my case I will have to find another strategy to track the time the user stays on the page. For example I am planning to send a lot of API calls before the user exits with all the informations I need to understand his stay on the page. I will update the answer when I will reach a good solution. Anyway I will still wait for better answers.

neboduus
  • 418
  • 1
  • 5
  • 14
0

You can try with this in your app.component.ts:

window.addEventListener('beforeunload', (e) => {
  yourApiCall();
});

I used that to display a message before unloading the page..

bertonc96
  • 772
  • 2
  • 13
  • 24
  • Hi @Giovanni, O don't think there is a difference between your syntax and mine. But I will try it anyway and let you know. Thanks anyway – neboduus May 18 '18 at 05:54