New Feature: Custom Event – hydrationDone
A new custom event called ‘hydrationDone’ has been introduced in the preview. This event will be dispatched when the funnel/website preview has completed its hydration. This allows a user to run specific custom code post hydration.
Why was this feature introduced?
- Users might previously have faced issues where their custom scripts would execute before our preview hydration was finished.
- This mismatch in timing could lead to an incorrect execution flow, hindering the intended functionality of their custom code.
How was this issue resolved?
- By dispatching the ‘hydrationDone’ event after the complete hydration of the preview, we’ve effectively eliminated this problem.
- Users can now add an event listener to the ‘hydrationDone’ event, executing their following code. This is especially useful if they’re trying to manipulate DOM content.
Steps to use this new feature
- Add a code element in the builder
- Program your code to listen for the ‘hydrationDone’ event like this:
document.addEventListener(
"hydrationDone",
() => {
// Add custom JavaScript here
})
Once the preview DOM content is loaded and the hydration event is received, the custom code will run without any conflicts or race condition.
Note: If a user’s custom code is critical to the page load, they might need to disable ‘Optimise JavaScript’. That’s because it can delay the hydration event if there are no user interactions.