Click map generator

By Martin Jacobsen

Using previews in Sanity to automate generating simple click maps.

Labels attach to the element with the corresponding ID, but can be dragged to a more convenient position

About the project

This project takes advantage of Sanity's excellent support for custom preview components to load the entire document of an email newsletter into the studio preview pane and traverse its DOM to attach labels with click stats to their corresponding elements.

The user enters a URL to the web version of the email, and enters CSV data from our analytics tool and is then able to do some basic editing like moving labels and editing their colors and size, or indeed make corrections to their value, before generating the final graphic which is used in our reports to our clients.

This is the first iteration of our "reportbot" as it is lovingly referred to internally, and is saving us a bunch of time not having to create these graphics manually.

About the author