Tyler Morse, Software Engineer and Dylan Casey, Product Manager
When we set out to build a timeline to commemorate Google's 10th birthday, we wanted to add an experimental search feature. We may be a little biased, but because we needed to search a specific subset of the web, and needed customized presentation, we decided to use Google Site Search, which is powered by the Custom Search platform. Using Site Search, the team designed a customized user interface and user experience, tightly embedded within the timeline application, in a few days.
The Google Timeline data is stored and served up as static files of JavaScript objects and arrays. While this was very efficient for the Timeline JavaScript application, we needed to massage the data in order to get it indexed and searchable, as well as tie it back to the timeline objects.
We generated static HTML files for all timeline events. The filenames have identifying data in them that allow us to correlate a search result with the original event; this way, we can translate a user click on a search result to the appropriate timeline event. Since we wanted explicit control of event dates, we also encoded the event date in each HTML file.
We use Site Search's flexible XML interface for retrieving the results. When we get back search results, we parse the XML data, extract specifically the information we need, and render these results.
Since we did not want to take users away from the timeline application, we presented the results inline. As we had limited real estate available, we only displayed 3 results at a time. As shown in the screenshot above, we added pagination to the results section, and the ability to sort the events by event date.
We couldn't treat our search results like typical URLs, as on Google.com. We wanted to show users the event within the actual timeline when they clicked on a search result, instead of navigating them to the indexed static HTML file. Clicking on a result provides an interactive experience, and brings up the specific timeline event.
The end result: a Google search for Google's history, custom fit to meet the specific needs of our timeline, just before we blew out the candles on our cake.
When we set out to build a timeline to commemorate Google's 10th birthday, we wanted to add an experimental search feature. We may be a little biased, but because we needed to search a specific subset of the web, and needed customized presentation, we decided to use Google Site Search, which is powered by the Custom Search platform. Using Site Search, the team designed a customized user interface and user experience, tightly embedded within the timeline application, in a few days.
The Google Timeline data is stored and served up as static files of JavaScript objects and arrays. While this was very efficient for the Timeline JavaScript application, we needed to massage the data in order to get it indexed and searchable, as well as tie it back to the timeline objects.We generated static HTML files for all timeline events. The filenames have identifying data in them that allow us to correlate a search result with the original event; this way, we can translate a user click on a search result to the appropriate timeline event. Since we wanted explicit control of event dates, we also encoded the event date in each HTML file.
We use Site Search's flexible XML interface for retrieving the results. When we get back search results, we parse the XML data, extract specifically the information we need, and render these results.
Since we did not want to take users away from the timeline application, we presented the results inline. As we had limited real estate available, we only displayed 3 results at a time. As shown in the screenshot above, we added pagination to the results section, and the ability to sort the events by event date.
We couldn't treat our search results like typical URLs, as on Google.com. We wanted to show users the event within the actual timeline when they clicked on a search result, instead of navigating them to the indexed static HTML file. Clicking on a result provides an interactive experience, and brings up the specific timeline event.
The end result: a Google search for Google's history, custom fit to meet the specific needs of our timeline, just before we blew out the candles on our cake.
