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.
How to get preview thumbnails automatically for Data Studio Reports.
- 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” )
- Create a new “Preview” dimension using the new image field from step 1.
- 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.
Thank you! This is great.
Interestingly, I manage a domain that is tourist in nature and there is one page out of thousands with “nude-beaches” in the URL. The Lets Validate service seems to block anything that might be related to “adult” websites. Any thoughts on a workaround?
Hi Kenn – thanks for the feedback! Good question and first I had heard of any restrictions. As far as workarounds, I can’t think of any easy ones. The image server project is on Github though, so you could try setting up your own without restrictions. I have thought about setting up my own “headless Chrome” instance for serving images in a similar way for a couple reasons – first to get around dependence on this service, which is great but I dont control, and second to get around the need for an editor to update data sources like google sheets. Having this kind of server could help distinguish your services. After I get through my next presentation I may work on this.
Have you found another tool to replace LetsValidate?
Hi Ally, yes I am using a replacement service now. Currently I am using Thum.io services. They appear to have some evaluation level services and very nice , very inexpensive imaging services. Their servers are fast and cache nicely. This is what I currently use on the Data Studio Resources finder
Please check out Thum.io here
Images (JPGs) have ‘broken’ icons?
Lee, …hoping to do a simple chart with Name and Image (URL)
Added the (Calculated) formula …for my Column containing the URLs “Image URL”
ImageURL = name of column containing URLs
Name = Name of column containing name
Result = ‘broken’ JPGs icons with the person’s name
…indicating that the ‘alternative text’ – ie: “Name” column is displayed
…instead of the URL
Would there be a “Permission” problem (between GoogleSheet and DataStudio)?
Hi Jayson, Yes there are restrictions on the source of the images shown in charts for Data Studio. First, if you are embedding the report in a web page only certain sources are allowed. Second, if you are storing the images on Google Drive, you can access them in a report, but only with certain URL formats. YOu can see this when looking at this report I created – the second page has instructions on how to access those images. Not sure this is what you are looking for, but it should give you a place to start. https://datastudio.google.com/s/mjkMpkirjMQ