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.
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?
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