The client was a startup who were developing a tool for web publishers to manage their analytics tags on pages without involving developers. They had implemented a comprehensive backend system which allowed non-technical users to add tags and populate variables from content on the page.
However, because the app UI ran on a separate website to the publisher's site, and involved manually writing potentially complex CSS and XPath selectors to extract values from the page, they were finding it difficult to interest potential clients.
They asked Uzeweb to look at how they could enable their users to have a simpler and more integrated experience with their publisher sites.
Initial investigation
The first goal was to run code within the context of a publisher's site. We looked at several options, and settled on starting with a bookmarklet as a low-friction and cost-effective way to put the concept in front of potential customers, as there would be nothing to install in either the browser or website.
The second goal was to communicate with an API in the tag manager backend. This should be reasonably straightforward with CORS, but if the publisher has a restrictive CSP it could be blocked. There was also a hard requirement to support Internet Explorer, so other more modern techniques were unavailable. We therefore decided to implement it using an older technique with iframes. If the browser security model was updated to prevent their use, we could then swap to use newer techniques and keep the iframe as a fallback for older browsers.
The final goal was to provide a simple visual tool for users to build CSS or XPath selectors without needing technical knowledge. We prototyped a proof of concept point-and-click selector builder.
Implementation
We started by building a bookmarklet which created an iframe on the remote host and loaded a script to build the UI. We then implemented an internal communication protocol between the bookmarklet code and the code within the iframe using the iframe's window name, allowing for cross-domain communications without worrying about CSP. This allowed us to launch the app running in an iframe on any website, regardless of permissions.
The communication protocol allowed the app to tell the bookmarklet to enter a visual selection mode. When activated, the bookmarklet would intercept mouse clicks on the publisher's page, and highlight the element the user hovered over. When the user clicked, it would build a path to the highlighted element, and communicate that path to the app.
From there we were able to build a straightforward single page app running within the iframe, communicating with the backend API to save, load and manage tag definitions, and communicating with the publisher site to collect variable values to pass to the tags.
Outcome
Feedback from clients was immediate and positive - they were impressed that they could extract tag parameters themselves using a point-and-click interface on their own site, and being able to run it on clients' sites before they had signed up proved to be a compelling demo in sales pitches.
These changes helped the client to achieve rapid growth and secure $13M in VC funding before being acquired 4 years later for an undisclosed sum.
