We have a button on our website. Clicking on this button will send users to an external page (a page with a different domain) in the same tab. We want to register click event on this button.
In this case, we are not seeing the event on amplitude.
I am assuming this is because we are navigating away from website before amplitude has enough time to send the event.
We tried adding `await` to the amplitude `track` event which works but it is resulting in a slight delay which is not a good user experience.
Does anyone have any solution for this? This looks like a common use case.
Best answer by Yosimy.Cortes
Hi Tarun,
My name is Yosimy from Amplitude Support, happy to help!
Could you let me know what SDK you are using?
You're correct in your assumption that the event might not be getting enough time to send before the navigation occurs. This is a common issue when trying to track events that lead to a redirection.
One solution to this problem is to use the `sendBeacon()` method. This method is specifically designed to handle such cases where a small amount of critical data needs to be sent to the server before the page unloads. It sends the data asynchronously, doesn't delay the unload, and doesn't impact the performance of the next navigation.
In the Amplitude Browser 2.0 SDK, you can enable this to set the transport to use beacon only when exiting the page. Amplitude recommends adding your own event listener for the pagehide event. Here is an example:
window.addEventListener('pagehide', () => { amplitude.setTransport('beacon') // Sets https transport to use `sendBeacon` API amplitude.flush() }, );
You can read more about the sendBeacon in the Browser SDK documentation here: https://www.docs.developers.amplitude.com/data/sdks/browser-2/#use-sendbeacon
I hope this helps! Let me know if you have any other questions.
Best, Yosimy
P.S. Checkout upcoming events and user meetups on our events page.
My name is Yosimy from Amplitude Support, happy to help!
Could you let me know what SDK you are using?
You're correct in your assumption that the event might not be getting enough time to send before the navigation occurs. This is a common issue when trying to track events that lead to a redirection.
One solution to this problem is to use the `sendBeacon()` method. This method is specifically designed to handle such cases where a small amount of critical data needs to be sent to the server before the page unloads. It sends the data asynchronously, doesn't delay the unload, and doesn't impact the performance of the next navigation.
In the Amplitude Browser 2.0 SDK, you can enable this to set the transport to use beacon only when exiting the page. Amplitude recommends adding your own event listener for the pagehide event. Here is an example:
window.addEventListener('pagehide', () => { amplitude.setTransport('beacon') // Sets https transport to use `sendBeacon` API amplitude.flush() }, );
You can read more about the sendBeacon in the Browser SDK documentation here: https://www.docs.developers.amplitude.com/data/sdks/browser-2/#use-sendbeacon
I hope this helps! Let me know if you have any other questions.
Best, Yosimy
P.S. Checkout upcoming events and user meetups on our events page.
If you don't have an Amplitude account, you can create an Amplitude Starter account for free and enjoy direct access to the Community via SSO. Create an Amplitude account. You can also create a Guest account below!
If you're a current customer, select the domain you use to sign in with Amplitude.
If you don't have an Amplitude account, you can create an Amplitude Starter account for free and enjoy direct access to the Community via SSO. Create an Amplitude account. Want to sign up as a guest? Create a Community account.
If you're a current customer, select the domain you use to sign in with Amplitude.
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.