UPDATE – 9/30/2018 The Let’s Validate API that was producing page thumbnails is back up!  Im still looking for another source of dynamic thumbnails….

UPDATE – 9/29/2018  The Let’s Validate API that was producing page thumbnails is down.  I have tried to reach out to the owner but not getting a response, so I am searching for a new free API for this method.  If anyone has suggestions please let me know in the comments or on Twitter @Helpfullee

Adding page previews, thumbnail images that link to target pages can really jazz up your Google Data Studio reports.  Why settle for a boring table of pages when you can give the viewer something to look at? But getting screenshots, and linking them to your reports, can be a daunting task in Data Studio.  Wouldn’t it be great if you could render those screenshots automatically, right in the report, saving tons of time and effort?

I had this challenge when I was working on the Google Data Studio Resource finder.  I really wanted to give users a preview of the pages in the reviews, particularly the Data Studio templates so they could check them out before going to the site being reviewed.

I thought about going out and getting screenshots of all the pages, loading them somewhere and then modifying all my entries. But the thought of all that work to gather images, store them, and link the image to the right page was just too much! Also, this would not work for autogenerated reports like ‘Top 5 Pages’.  So, I put it off until I found a better way…

The key automating preview screenshots is using a service that can take a URL and return a screenshot image automatically, quickly and, hopefully, for free.  After some research, I found one that fit all these needs.

Create thumbnails for Data Studio on the fly using the Let’s Validate free API

The letsvalidate API description can be found at github.com here.   The service is currently provided by Let’s Validate Pro (Twitter @letsvalidate) and is used in their premium services. Currently, their site does extensive page evaluations.  While you have to have to pay for their other services, the basic thumbnail capture API is offered to the public for free.  The free thumbnail image API has limited functions, but it does provide what we need to create preview thumbnails at a pretty decent scale for Data Studio reporting.

• Provides a basic web interface:  Give it a URL and it returns an image
• The API can produce 100 thumbnails a minute.
• The API uses headless chrome so it can render almost any page.
• Images are cached for quick reuse.

The service is simple to use.  Try clicking on this URL to see the result.

https://api.letsvalidate.com/v1/thumbs/?url=helpfullee.com 

Actual Auto Generated Preview Screenshot

It takes a few seconds on your first view, but if you click it again you will see the rendering is almost immediate.  Ahh, the power of caching!  While the image is not the greatest quality, it is fine for Data Studio reports as a preview.

How to get preview thumbnails automatically for Data Studio Reports.

1.  Create a new ‘thumbnail’ image dimension based on a target URL field called ResourceURL
   IMAGE(CONCAT(‘https://api.letsvalidate.com/v1/thumbs?url=‘,ResourceURL),”Waiting for Image” )
2. Create a new “Preview” dimension using the new image field from step 1.
   HYPERLINK(Resource URL,Thumbnail)
3. Use the new “Preview” field in your table reports.  The image will show and link to the page.

Example:  Top 5  Pages with previews from Google Analytics data

Here is a small embedded example of page preview in action.  FIrst, I’m going to generate a decent table of links to the top 5 landing pages.  And for fun we can throw in a selector for “Source”  so the user can see whats popular from different sources.  To do this from Analytics I have found it best to build up the needed fields and combine them instead of doing everything in one big field definition.

First , We need a URL for the page .  We build this by putting together the host and page fields and making sure it is tagged as a URL type after we define it.

Next we need to create a field that actually goes out and gets the thumbnail image. Here is the screenshot of the thumbnail field definition.

Finally, We can make a link to the thumbnail to the actual page with a field called ‘thumb link’

Now, all that is left is to add the column to the table.   The view below is the actual embedded data studio showing the top 5 pages for this site as generated by Google Analytics. You can pick different sources and see how the top pages change. You can see a version without previews here.

Here’s an example from analyzing  Drupal hosting and development companies – this is a “detail view” to give the user a better feel for each company. The preview screenshot of each companies page is linked to their homepage and comes up automatically.  Hint: Create a single column table just for the preview image and turn off table headers.

To see another live example, check out the Google Data Studio Resources finder – the main page, templates page and even the twitter page all use this method to generate preview thumbnails quickly and efficiently!

Let me know what you think of this method with a comment or @Helpfullee on Twitter.  I would also love it if you know of any other open thumbnail services that might be used.