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:

DesktopUI


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.

JavaScript


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:

DesktopUI

ReactUI


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