How to track and report Drag and Drop elements?

Greetings Everyone!
Do you have drag and drop elements in your application and want to track which element is dropped? We've got the perfect solution for you using Custom Events! By calling a function when an element is dropped and passing the information to PX through a custom event, you can easily keep track of your user interactions.
Sample HTML Code:

<div id="dropTarget" ondragover="allowDrop(event)" ondrop="handleDrop(event)"></div>

Sample JS Code:

//Send custom event to PX when element is dropped
function handleDrop(event) {
  const dropText = event.dataTransfer.getData('text/plain');
  aptrinsic('track', 'Dropevent', {"droppedElement":dropText});
}

Result:

If you have a canvas option in your app where users can drag and drop images or shapes and they can save their progress with a "SAVE" button. Wouldn't it be great to know how many elements they dropped onto the canvas when they hit that save button? Well, you can! And you can even track the individual count of each element too!
Sample HTML Code:

<button class="btn btn-success" onclick="sendCountOfElements()">Save</div>

Sample JS Code:

//Send custom event to PX when Save button is clicked

function sendCountOfElements(){
  let elementarray= getdropElements();
  let count= elementarray.length;
  aptrinsic('track', 'onSave', {"count":count,"Element1":getCount(elementarray,"Element 1"),"Element2":getCount(elementarray,"Element 2"),"Element3":getCount(elementarray,"Element 3")});
}

Result:

For a detailed explanation, check the below videos:

• To track drop events- https://share.getcloudapp.com/geuPBNLv
• To pass the information on save- https://share.getcloudapp.com/NQupBPQB

Once you've passed all this valuable data to PX, what next?
To gain insights on which element receives the highest adoption and which requires more attention, you can generate a query builder report. For instance, if you have a "DropEvent" custom event, grouping the report by the sent property will provide you with this information.
 

Adoption can also be monitored in feature performance widget once the features are created for this custom event.
 

And you can trigger tailored engagements to users who may have less adoption, ensuring they become aware of this feature.
You can use them in funnels to track user journeys and in path analyzer to visualize user journeys.