Monitor Webpage Visual Changes with n8n and Google Sheets

This guide shows you how to automatically monitor a webpage for visual changes and log those changes to Google Sheets using n8n. You’ll set up a workflow that periodically takes a screenshot of the page, compares it to the previous version, and records any differences in a spreadsheet. This is useful for tracking website updates, competitor changes, or ensuring your own site’s design stays consistent.

What You’ll Need

• An n8n account (self-hosted or cloud) with access to the workflow editor.
• A Google account with Google Sheets enabled.
• Basic familiarity with n8n nodes and Google Sheets.

Step-by-Step

1. Create a new workflow in n8n. Log in to your n8n instance and click “New Workflow” to start building.
2. Add a Schedule Trigger node. Drag a “Schedule Trigger” onto the canvas. Configure it to run at your desired interval (e.g., every hour, daily). For most monitoring, daily or every 6 hours is reasonable.
3. Add an HTTP Request node. Drag an “HTTP Request” node and connect it to the Schedule Trigger. Set the Method to GET and the URL to the webpage you want to monitor. This fetches the page’s HTML content, which we’ll use for a quick text comparison later (optional).
4. Add a Screenshot node. Drag a “Screenshot” node (available in n8n’s core nodes) and connect it to the HTTP Request node. Set the URL to the same webpage. Choose a viewport width and height (e.g., 1280×800). This node uses a headless browser to capture a PNG image of the page.
5. Store the screenshot in a temporary location. The Screenshot node outputs a binary file. You need to save it somewhere n8n can access for comparison. The easiest way is to use a “Read/Write Files from Disk” node. Drag one in, set Operation to Write, and specify a file path like /tmp/screenshot.png. Connect it to the Screenshot node.
6. Add a Google Sheets node to fetch the previous screenshot data. Drag a “Google Sheets” node. Connect it to the Schedule Trigger (or after the write node, but it’s independent). Configure it to connect to your Google account (create credentials if needed). Set Operation to Read, and select the spreadsheet and sheet where you’ll store monitoring data. Add a filter to get the latest row (e.g., by a timestamp column).
7. Add a Code node to compare images. Drag a “Code” node. Connect it to both the Read/Write Files node (which has the new screenshot) and the Google Sheets node (which has the old screenshot reference). In the Code node, write a script that compares the two images. You can use a simple pixel-based comparison or a more advanced perceptual hash. For simplicity, use the sharp library (if available in your n8n environment) or a basic binary comparison. If the images are identical, output a flag like changed: false; otherwise changed: true.
8. Add an IF node to filter changes. Drag an “IF” node and connect it to the Code node. Set the condition to check if the changed value is true. This will branch only when a visual change is detected.
9. Add a Google Sheets node to log changes. Drag another “Google Sheets” node and connect it to the IF node’s “true” output. Configure it to Append a row to your monitoring sheet. Include columns like: timestamp, URL, change detected (yes), and optionally a link to the screenshot or the screenshot binary itself (if you store it in Google Drive).
10. Add a notification node (optional). Connect the IF node’s “true” output to an email or Slack node to alert you when a change occurs.
11. Test and activate the workflow. Run the workflow manually once to ensure everything works. Check your Google Sheet for the logged row. Then activate the workflow to start scheduled monitoring.

Common Mistakes

• Not storing the previous screenshot correctly. If you don’t save the screenshot to a persistent location (like a file path or Google Drive), you won’t have a baseline for comparison.
• Comparing screenshots of different sizes. Ensure your viewport settings are consistent across runs. If the page loads differently (e.g., due to dynamic content), the comparison may flag false positives.
• Ignoring dynamic content. Many websites have changing elements like ads, timers, or user-specific content. These will cause false alarms. Use a tool like puppeteer with n8n to block or mask dynamic elements.
• Using the wrong Google Sheets credentials. Double-check that the Google account you connected has edit access to the target spreadsheet.

Tips

• Use a perceptual hash for comparison. Instead of pixel-by-pixel comparison, use a perceptual hash (like pHash) to detect visual differences that are meaningful to humans, reducing false positives from minor rendering differences.
• Store screenshots in Google Drive. Instead of a local file, save the screenshot to Google Drive using a Google Drive node. This makes it easy to review changes later and avoids local storage limits.
• Add a text comparison as a secondary check. Compare the HTML content from the HTTP Request node to catch changes that don’t affect the visual layout (e.g., text changes).
• Schedule during off-peak hours. If you’re monitoring a site with heavy traffic, schedule runs during low-traffic times to get more consistent screenshots.

Troubleshooting

Workflow fails at the Screenshot node. Ensure the webpage is publicly accessible and doesn’t block headless browsers. Some sites use CAPTCHA or bot detection. Try using a different user agent or proxy.

Google Sheets node can’t connect. Re-authenticate your Google account in n8n credentials. Make sure the spreadsheet ID and sheet name are correct.

Image comparison always returns “changed”. This often happens because of dynamic elements (e.g., a clock). Adjust your comparison threshold or use a perceptual hash with a tolerance.

The workflow runs but no changes are logged. Check the IF node condition. Ensure the Code node outputs a boolean or string that matches your condition. Also verify that the Google Sheets append node is configured with the correct column order.

Frequently Asked Questions

Can I monitor multiple webpages with one workflow? Yes, you can use a loop or a list of URLs from a Google Sheet, but you’ll need to adapt the workflow to iterate over them.

How often should I run the workflow? It depends on how frequently the page changes. For most sites, daily or every 6 hours is sufficient. Running too often may overload the server or trigger anti-bot measures.

Does n8n have a built-in screenshot node? Yes, n8n has a “Screenshot” node that uses Puppeteer under the hood. It’s available in the core nodes.

Can I get an alert when a change is detected? Yes, you can add an email, Slack, or Telegram node connected to the IF node’s true output.

What if the webpage takes longer than 30 seconds to load? You can increase the timeout in the Screenshot node settings. Also, consider using a shorter page or a dedicated rendering service.

Is it possible to compare only a specific region of the page? Yes, you can use the Screenshot node’s “clip” option to capture only a portion of the page, or use a Code node to crop the image before comparison.

Related

• Fix Bluetooth Not Detecting Devices on Windows 10
• Scrape Dynamic Websites with JavaScript: A How-To
• Fix Microsoft Teams Not Detecting Camera