What's happening here? In <iframe> below is displayed an example of "your app" — some "simple monitored app" with links, input fields of different kind and buttons. Each element in this frame has its own unique "data-dtu" attribute. And the frame itself imports DTU JavaScript SDK — so everything is set up according to DTU setup instructions.

When you interact with the elements in the frame below, usage stats (via window.localStorage of this browser) is being saved and becomes available for the next frame — where DTU analytics app is loaded.

Frame with remote your_app.html (if you open this demo on dotheyuse.com web site, then "remote" means "on dotheyuse.com web site"):

What's happening here? In <iframe> below is displayed DTU analytics app that has access (via window.localStorage of this browser) to the data generated by the app in the previous iframe.

Interact with the elements in the first frame and then find reports for these interactions in this second frame. This is the concept of how this "elements usage analytics" works. If you want to see how DTU analytics app displays data for lots of reports, please visit cloud-based demo page.

Frame with remote dtu_app.html (if you open this demo on dotheyuse.com web site, then "remote" means "on dotheyuse.com web site"):