In this article, we will explain how to use listening scripts to track different Dropzone customer events.
The 3 Dropzone custom events
The dropzone source has 3 custom events that can be tracked:
dz-drop: Triggered when a candidate drops a resume in the dropzonedz-success: Triggered when a file is submitted to the APIdz-error: Triggered when something goes wrong
These events are attached and dispatched to the document object of the webpage.
Listening scripts for the custom events
You can listen to these three events by adding an event listener that takes as an argument the custom event name. To do that, you can use the scripts below.
Script 1: Listening to file drop event:
document.addEventListener('dz-drop', function (e) {
console.log('drop',e)
// code to execute after a file is added to the dropzone
}, false);
Script 2: Listening to file sent success event:
document.addEventListener('dz-success', function (e) {
console.log('success',e)
// code to execute after the file is submitted to Hrflow.ai api
}, false);
Script 3: Listening to the error event:
document.addEventListener('dz-error', function (e) {
console.log('error',e)
// code to execute when an execption occured
}, false);
How to add a listening script to a Dropzone source:
To add a listening script to a Dropzone Source, please follow these steps:
Step 1
First, go to My Sources section (under Connections), and click on the dropzone source you want to track.
Step 2
Go to Settings, under the Design tab, go to the Pixel script box and insert the listening scripts you want to add to the dropzone, then click on the Edit button.
