The simplest way to start tracking drag and drop actions on your web app using Google Tag Manager (GTM) would be to incorporate JavaScript event listeners, which would pick up on “dragstart” and “drop” events.

Firstly, create two new Custom HTML tags in GTM. The tag for the “dragstart” event would leverage a JavaScript event listener set to trigger on this specific event. Similarly, the tag for the “drop” event will be set up in the same manner, but to trigger on the “drop” event. With this setup, every time a user starts to drag or drops an element on your site, an event will fire.

Next, you’ll want to push these events into the Data Layer. You can accomplish this directly within your new Custom HTML tags, using the dataLayer.push method. This will allow you to push key information about the event (like the ID of the element being dragged, and its new position when dropped) into GTM’s Data Layer.

Once your new events are being pushed into the Data Layer, you can proceed to set up corresponding triggers in GTM. These triggers will be set to fire when GTM detects the newly defined “dragstart” or “drop” event in the Data Layer.

Finally, you can connect these triggers to appropriate tags for GA4, effectively sending each drag and drop action as an event to GA4 for you to monitor and analyze.