Skip to main content
You're viewing documentation for a previous version of this software.Switch to the latest stable version
PESDK/Web/Concepts

Events

Understanding how users engage with a product is critical to every business. Learn how to track your user's interactions with the PhotoEditor SDK for HTML5.

The UI emits events that let you know what happens inside the editor. Most users use these events for monitoring and analytics. You can listen to them by calling the UI's on method:

const editor = new PhotoEditorSDK.UI.DesktopUI(/* ... */);
const events = PhotoEditorSDK.UI.DesktopUI.Events;
editor.on(events.EXPORT, result => {
console.log('User clicked export, resulting image / dataurl:');
console.log(result);
});

See the documentation for available UI events.

const editor = new PhotoEditorSDK.UI.ReactUI(/* ... */);
const events = PhotoEditorSDK.UI.ReactUI.Events;
editor.on(events.EXPORT, result => {
console.log('User clicked export, resulting image / dataurl:');
console.log(result);
});

See the documentation for available UI events.

Some people use the EXPORT event to find out which operations the user has applied to the image:

const editor = new PhotoEditorSDK.UI.DesktopUI(/* ... */);
const events = PhotoEditorSDK.UI.DesktopUI.Events;
editor.on(events.EXPORT, (result, editor) => {
// User has clicked export, find out what operations he used
const stack = editor.getSDK().getOperationsStack();
console.log('User used operations:');
stack.forEach(operation => {
console.log(operation.constructor.identifier);
});
});

Example output:

User used operations:
orientation
crop
filter
border
sprite