TripAdvisor for Chrome

Shaun McQuaker posted December 14, 2016

 

Why a Chrome Extension?

At TripAdvisor we’re always looking for new and innovative ways to engage our users on every platform and device. Recently we’ve started an initiative to develop a Chrome extension for desktop – TripAdvisor for Chrome. The extension allows travellers to better plan their trips, vacations and local outings. Wouldn’t it be nice if as you surfed the web, you could immediately access useful TripAdvisor content about the page you’re viewing? A chrome extension can make that happen! For instance, when viewing a hotel page like the Hilton Garden Inn Wisconsin Dells, the extension presents a brief summary of the hotel with the ability to quickly view reviews, photos and deals directly on TripAdvisor. When looking at the web page for a new restaurant, the extension automatically fetches TripAdvisor ratings and content for you and lets you know if you should go. The same for attractions, a water-park for the kids, a new zoo, etc. The extension puts all the content of TripAdvisor at your fingertips as you browse the web. Pretty cool stuff!

This blog entry will take a quick look at how our Chrome extension works.

 

Chrome Extension Architecture

A chrome extension has 3 main parts:

  1. A background page – this controls the behaviour of the extension, it can run persistently or when certain events fire
  2. UI pages – these are pages that present various parts of the extension UI
  3. Content scripts – JavaScript that executes in the context of a page that’s been loaded into the browser

chrome-extension-architecture

Lots more information on the Google Chrome Developer website.

 

How does it work?

TripAdvisor for Chrome has two main components.

ComponentWhat it does
Browser extensionThis is a light-weight shim that provides some basic functionality:

  • A user interface

  • Logic for pinging the back-end service

Back-end service
The back-end does all the heavy lifting, including:

  • API to get relevant hotel, attraction, restaurant data

  • Mapping database to match URLs to TripAdvisor locations

  • HTML data for some UI components

  • End-point for telemetry gathering & error reporting

 

tripadvisor-for-chrome-architecture

 

When you visit a page the first thing the extension does is check against a blacklist of websites. The main purpose here is to filter out:

  1. Unrelated websites i.e. cnn.com, gmail.com, etc.
  2. Advertising partners i.e. expedia.com, booking.com, etc.
  3. Websites with adult content

 

We currently check for websites containing mature content using 3 different methods:

  1. Profanity regular expression matched against certain page elements
  2. Mature website “RTA” ratings markup in the page header
  3. A hard blacklist

 

Once we deem the site as okay to check, a quick request is done to a back-end mapping service which checks if the URL is related to any TripAdvisor location. If there is no mapping, the extension does nothing further on the page. If a match is found then the extension does 2 things:

  1. Enables a browser action drop-down – clicking the extension icon, you will see a drop-down summarizing the TripAdvisor content for the location
  2. Presents a simple overlay highlighting the TripAdvisor bubble rating

tripadvisor-for-chrome-layout

The overlay that is added to the website will minimize out of the way after 5 seconds so as to not be intrusive. On hover, it will expand to show more relevant content about the location from TripAdvisor. This is done by loading in content from the back-end HTML Render Engine. This content is specifically iframe’d in so as to not interfere with the page content and make sure our display is unaffected by any aggressive CSS styling on the page.

 

What do we track?

We take great steps to only track information we need. All interactions with the extension are tracked so we can measure how various parts of the extension are performing in an effort to make the product better. Here’s what we track:

  1. Impressions, hovers, clicks on certain extension elements
  2. URLs viewed by the user – if we showed the TripAdvisor content overlay or expected to show the overlay but were not able to
  3. Some Google search queries – if we showed the TripAdvisor search overlay or expected to show the overlay but were not able to.
  4. Browser geolocation information

 

Geolocation is used a hint for disambiguating multiple locations which may all map to the same website or URL, such as restaurant chains. If we encounter a URL mapped to multiple TripAdvisor locations, we can use the information to pick the most likely ( closest ) match.

 

When is it available?

Right now! Try the extension by installing it in the Chrome Webstore. We hope you enjoy our new extension and happy travels!

 

2 responses to “TripAdvisor for Chrome”

  1. Albert Barkley says:

    Awesome information and I hope that this plugin will be most suitable to stay with updated information without making Google Chrome overloaded.

    • Shaun McQuaker says:

      Hi Albert, thanks for the comment. Yes we will be updating it going forward and we’ve taken great care to make sure it remains performant.

Leave a Reply

Your email address will not be published. Required fields are marked *