Web analytics and IOT: connect online conversions to the physical world
One of the challenges for a scrum team is to perceive a connection between the development effort required to build software features and their impact both to the user experience and the company business.
Since July 2019, when I switched to a Product owner role to lead the evolution of a logistics booking tool towards an e-commerce b2b approach, I thought that the development team would have benefit to follow closely the outcome of their work, especially during the tool first launch.
Although tools such as Google Studio dashboards can beautifully quantify the users’s actions in details and highlight trends overtime, they don’t show results in exact real time out of the box. Moreover diagrams and bar charts struggle to visualize in an exciting way the early modest achievements of a new-born digital product.
On the other hand Hotjar user interaction recordings can bring excitement and curiosity to the team by demonstrating how early adopters interact with the interface, but the excitement quickly decrease after viewing several user sessions that look alike.
I thought there was an opportunity to create something original, fun and engaging to display online conversions in real time, without leveraging a computer screen. After spending quite some time researching and prototyping, I’ve decided to build a physical conversion tracker that turn on light bulbs when a specific interaction is achieved.
You can watch it in action here.
The first bulb is designated to light up when a booking request of a shipment within a customer agreement is sent via the digital interface (the DFDS tool name is Direct). The second and the third bulbs instead announce when the new key features we introduced are utilized: one lights up when a customer receives an instant price back after submitting a quote request for a shipment, the other when a booking request based on an instant quote is sent.
The build and configuration in a nutshell
The conversion tracker is made of three vintage looking light bulbs and each of them is controlled by a Shelly one wi-fi switch. A laser-cut case host the bulbs, the shelly switches and three mechanical switches. The latter are required to be able to reset the settings of a Shelly one, for instance when the wi-fi network credentials must be changed.
I’ve decided to cut three extra holes on the top of the case to place removable labels that state which conversion each bulb refers to.
The wi-fi switches are controlled via three IFTT webhooks applets configured to ping the Shelly cloud API.
The 5 min. implementation with Google TagManager
With the launch of the Direct booking portal we worked closely with Digital Analytics team to measure performance and for the tracking implementation. This was done via the datalayer and Google Tagmanager. It was therefore straightforward deploying the IFTT webhooks applets urls with Tag Manager as all the interactions were already tracked.
This setup allows to change very easily the interaction that should trigger the wi-fi switches if needed. For instance, instead of informing the team each time a booking request is submitted, a light bulb can be turn on when 500 booking requests are received in a given day. After all, the notifications of this type should motivate and not annoy the team.
Adjustment of this type can be done via google tag manager quite easily and don’t require any changes the configuration of IFTT applets or of the Shelly devices.
A big thank you goes to Daniel Varberg, who configured Direct’s tracking setup and make this possible.
Why building a physical online tracker?
Building a device like this has been a fun little personal project and that alone is a very good reason to do it. Although you can purchase mechanical counters that visualize web and social media metrics, building your own conversion tracker with an IOT it’s an extremely rewarding experience. Keep also in mind that the Shelly catalog of relays is very diverse and versatile and with a bit of creativity and maker skills you could come up with something truly original.
For instance, by using different Shelly relays, it’s possible make a led strip light up with different colors and intensity according to the web page seen by a user. Or maybe a fan could spin at a higher or lower intensity according to the number visitors on a website page. What about a bottle of champagne that can be opened automatically when the first 1000 leads are acquired?
And this lead to my second consideration: “physical” conversion trackers like the one I built at DFDS are a nice way to announce when a milestones is reached in real time, but not frequent and repetitive conversions. When DFDS Direct was made available only to a few beta testers, it was nice for the team to celebrate each booking that was made, but as soon as the frequency increased nobody was noticing the light.
I think that another reason to invest some time to build a tool of this type is to promote a development team internally. Powerpoint decks, roadmap posters and team photos define the identity of a team in a large organisation such as DFDS. However, it was priceless to see the surprised faces of the logistics managers visiting the DFDS tech hub, when they learnt that the light was blinking every-time a conversion was registered. It was nice to hear them asking if it was possible to build another conversion tracker for the sales team, so we can all feel more connected when we work in offices spread over multiple countries.
Resources
In the future, I might create a step by step guide but for now I can point you to a few resources that I based my project on:
Shelly One schematics configuration (a picture is worth more than 1000s words):
https://lh3.googleusercontent.com/proxy/S9BTOirRQ-wsD00s3LUGmW-vNSuyLqBa4Cbmnd6q_pMDsvXGVlVyNzmbQzpsrnEvrdawLJllinnYk8oDgAWSqr_oTCFxoyiZnU2K9vvlEORwUAClI7HNVKmBRAB5PP8
Shelly app configuration (one of the many tutorial I found online if you really need a step by step guide):
https://www.youtube.com/watch?v=x4P2wj3o8r4
IFFT applets configurations:
https://www.shelly-support.eu/index.php?attachment/837-shelly-support-group-english-ver-pdf/
Follow this guide to setup different parameters for your lights(duration, dim level, led strip colors and intensity etc.):
https://www.facebook.com/groups/ShellyIoTCommunitySupport
And of course, the simply amazing Shelly support group on Facebook: https://www.facebook.com/groups/ShellyIoTCommunitySupport
Final considerations
It has been a fun experience building this little device. However it has been a great experience working with the DFDS Direct team, a team of dedicated FE and BE developers, designers, scrum masters, web analysts, business and logistics experts. At the end of May I left the project and DFDS for a similar position in a financial institution called Danske Bank. I am glad that, although the COVID-19 forced us to work for most of the time remotely, I was able to see the project going live and spend my last few days at DFDS with these lovely people. Go team!
