If Google Sheets is your central HQ and you need to take website screenshots, don’t stress! In this tutorial, we’ll show you how to use Google Sheets to take screenshots of any website.
We’ll use Apps Script to create a custom Google Sheets function, ‘screenshot,’ which will accept a website URL as a parameter and return the screenshot URL.
This little function has proven to be of great value to content sites that have sections of repeatable content (i.e., it leverages the benefits of programmatic SEO) or use cases where the goal is to automate website monitoring and reporting of any sort (e.g., monitor competitor pricing or ads, monitor website compliance, etc.).
What Will You Need?
- Google Sheets
- A screenshotapi.net API Key
Step 1: Create a New App Script Project
To create a new App Script Project, open the desired Google Sheet and go to Extensions > App Script.
The App Script project will automatically open in a new window.
Step 2: Get a Screenshot API Key
Go to ScreenshotAPI.net, sign up for a free trial, and copy your API Key.
Step 3: Create a Custom Function to Take Screenshots
Now, let's get started with creating our custom function!
Our function needs to accept the website URL as a parameter, generate the screenshot of the website using the Screenshot API, and finally return the image returned by the Screenshot API as a response.
(This website URL can be referenced from a different column, and the results can be put into a different one.)
Here’s our implementation of an App Script function ‘screenshot’ that does the job:
/**
* Takes a website URL as input and returns a screenshot of the website using the ScreenshotAPI service.
* @param {string} websiteUrl - The URL of the website to take a screenshot of.
* @return {string} screenshotUrl - The URL of the screenshot image.
* @customfunction
*/
async function SCREENSHOT(websiteUrl) {
const YOUR_API_KEY = 'XXXXXXX-XXXXXXX-XXXXXXX-XXXXXXX' // Your ScreenshotAPI API key
const query = 'https://shot.screenshotapi.net/screenshot?token=${YOUR_API_KEY}&url=${websiteUrl}&output=image&file_type=png&wait_for_event=load'; // The URL for the screenshot API request
const options = {
'method' : 'get',
'contentType': 'application/json',
'followRedirects':false
}; // The options for the fetch request
const response = await UrlFetchApp.fetch(query,options); // Make the fetch request to ScreenshotAPI
const screenshotUrl = response.getHeaders()['Location']; // Get the URL of the screenshot from the response headers
return screenshotUrl; // Return the URL of the screenshot
}
Replace the YOUR_API_KEY variable with the API key you copied in step 2.
Hit Ctrl + S or Cmd + S to save the file.
Step 4: Call the Function from Google Sheets
Call the function by typing in =SCREENSHOT(). Provide the website URL as a parameter by passing in the appropriate cell reference.
You can also drag this to execute for multiple rows at once.
Quickstart Template: Google Sheets Function to Take Website Screenshots
If you’d like to get started without having to set up the App Script on your own, duplicate the sample spreadsheet.
Note: This function expects you to pass two parameters - Website URL and API Key. You’ll need to pass the API Key as the second parameter.
Frequently Asked Questions
Why Take Screenshots of a Website in Google Sheets?
Some of the use cases we frequently see include:
- Building content for a programmatic SEO website
- Tracking website changes over time inside Google Sheets
- Monitoring competitor pricing, website, or ads inside Google Sheets
What Is the Google Apps Script?
Google Apps Script is a cloud-based JavaScript platform that lets you integrate and automate tasks across Google products.
For the context of the tutorial, App Script helped us create our own custom functions using JavaScript, which can then be used just like any other built-in function in Google Sheets.
You can learn more about the App Script.
Ready to Get Started?
Open a new Google Sheets spreadsheet and grab your ScreenshotAPI key here!