Integrating a custom Trustpilot TrustBox the correct way

At Auto Trader we ran an experiment to test whether our hypothesis that adding a Trustpilot TrustBox would increase conversion. In the spirit of lean product development we used an off the shelf Trustpilot and Wingify’s Visual Web Optimiser (VWO) to create the experiment. Upon analysing the results of the experiment we found that it significantly increased our conversion rate from the product landing page.

The experiment being a success and I was tasked with implementing a production solution. Upon first analysis we discovered that both our and Trustpilot’s requirements weren’t so straight forward.

Our custom Trustpilot TrustBox

You might be tempted to think the requirements would look something like this:

  • Add a Trustpilot TrustBox

When in actual fact they were more like this:

  • Seamlessly integrate with our product style guide
  • Preserve access our own Auto Trader testimonials for SEO
  • Preserve search engine listing stars based off Auto Trader testimonials
  • Silently fallback to our own testimonials in case Trustpilot is unavailable
  • Do not add significant page load time
  • Display without a flash/delay
  • Hide Trustpilot reviews from search engines as to not harm SEO reputation via content duplication (Trustpilot’s recommendation)
  • Adhere to Trustpilot brand guidelines

Challenge 1: Do not add significant page load time?

This meant we would have to make our API calls from the server-side and cache them so that the initial lookup cost wouldn’t be felt by every user. Trustpilot’s API headers recommend 1 hour however we settled on 15 minutes to keep it as fresh as possible and because cache invalidation is hard.

There are only two hard things in Computer Science: cache invalidation and naming things. — Phil Karlton

Challenge 2: Hide Trustpilot reviews from Google as to not harm SEO reputation via content duplication?

Trustpilot’s guide to implementation

Dynamically load the data with JavaScript. Can’t do this… This will break our requirement of “Display without a flash/delay”.

Use an Iframe. This looks promising although we’d need to come up with a way to embed the content in an iframe without breaking the requirement of “Display without a flash/delay”.

Challenge 3: Display without a flash/delay (Using an Iframe)

So we’re going to use an Iframe but that means the browser will load the DOM find the Iframe then begin to load the Iframe. We had to create a way to do the API calls to Trustpilot on the server, render them directly in the page at initial load whilst hiding the content from search engines.

We achieved this by creating an Iframe with a blank src attribute.

Rendering the content of the Iframe into a custom typed script tag.

Then using an inline script to inject the content into the Iframe.

And there we have it. A custom Trustpilot TrustBox implemented meeting all of our own and Trustpilot’s requirements.

Try it out

You can see the live implementation of this at http://www.autotrader.co.uk/sell-my-car