Automate website analysis with AI

Generate website analysis reports from URLs using AI

Tags Streamline Icon: https://streamlinehq.com
Wrench Streamline Icon: https://streamlinehq.com
Uses
People Man Graduate Streamline Icon: https://streamlinehq.com
Intermediate

If you haven’t experimented with ChatGPT’s vision capabilities yet, get ready for a fun and useful tutorial to showcase the power of this ability from OpenAI.

In this tutorial, we’ll combine OpenAI’s GPT-4 API with Zapier and Bannerbear to autogenerate a screenshot from a URL, analyze it with ChatGPT, and provide a detailed summary report of opportunities to improve the marketing effectiveness of the website.

This tutorial was inspired by Andrew Peluso, of Pesty Marketing, from our community.

You’ll need:

Steps:

  • Step 1: Create a Zapier intake form
  • Step 2: Create a Zap with a form submission trigger
  • Step 3: Take a screenshot with Bannerbear
  • Step 4: Generate an OpenAI key
  • Step 5: Analyze the screenshot with ChatGPT vision

Join 5,163 others learning. Create a free account

Sign up with
Already have an account?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Step 1: Create a Zapier intake form

To start, head over to Zapier and navigate to the Interfaces tab. Click the Create button to create a new Interface.

On the Interface homepage, add a Form component to your Interface.

You will be prompted to select an existing Zapier table to store the form data or you can select to do this later. For now, we’ll skip this step as it’s not required for this workflow.

With the Form component added, we can start adding fields. We are going to add Business Name, Business Industry, and Website URL fields. At a minimum, you will need the Website URL field, but we recommend adding all three of these fields to the form.

Click on the link in the upper right-hand corner of the Interface page to open the form in shareable test mode and submit a test request. This is the URL we will be taking a screenshot of for our marketing analysis.

Step 2: Create a Zap with a form submission trigger

Once your form is created, we will need to create a Zap automation that will ingest the form submissions. To do this, go back to your Zapier dashboard, click the Zaps menu item on the left side, and click the Create button.

https://assets-global.website-files.com/65d4bab2989b365c8d09a9ea/663de85483598dae3f414996_Tutorial Content (48).png

For the trigger of your Zap, search and select Zapier Interfaces and set the Event to Form Submission Created.

For the Trigger, select your Interface, Page, and Form from Step 1.

Step 3: Take a screenshot with Bannerbear

Now that we have a Zap created that ingests our form submissions, we need to add a step with Bannerbear to take a screenshot of the submitted website URL. To do this, create a Bannerbear account (you can start with a free trial).

Next, we’ll need to get an API key from Bannerbear. Navigate to the Projects tab, create a new Project, and click on the Settings / API Key button in the top right corner.

Then click the copy button by the Project API Key.

Head back over to Zapier and create an action step for Bannerbear. Select the Create Screenshot Event.

On the Account tab, click the Connect button and you will be prompted to add your Project API key from Bannerbear in the pop-up window.

💡 Tip: You may think you need to add your master Bannerbear API key in Zapier to connect the account, but the integration works at the Project level, which is why we created a Project and then copied the Project API Key.

In the Action tab in Zapier, set the Website URL to the Website URL from your form in the previous step of the Zap. You can optionally set the width and height of the screenshot — we will leave these blank to keep the default settings.

Finally, test this step and make sure you get a proper screenshot from your submitted URL.

Step 4: Generate an OpenAI key

Next, we’ll need to generate an OpenAI key. This will be used in the following step within our Zap to perform a visual analysis of our website screenshot. To do this, log in to platform.openai.com, then click ‘API’ to be taken to the developer platform.

https://assets-global.website-files.com/65d4bab2989b365c8d09a9ea/660ba95e9f800c74268c7e27_Tutorial Content (14).png

Click ‘API keys’ on the left menu, and click ‘Create new secret key’.

https://assets-global.website-files.com/65d4bab2989b365c8d09a9ea/660ba9673ebf70d6ce63d0db_Tutorial Content (15).png

Give it a name and click ‘Create secret key’. Once generated, copy it to your clipboard. Also, keep it secure; do not share it publicly as it gives access to your OpenAI account capabilities.

💡 Tip: You will need to add Credits to your OpenAI account in addition to creating an API key. To do this, navigate to Settings > Billing, add a payment source, and add at least the minimum credit balance to your account.

Step 5: Analyze the screenshot with ChatGPT

Now that you have your OpenAI API key, head back to Zapier and add a ChatGPT step. Set the Event to Analyze Image Content With Vision.

This is where you’ll need your OpenAI API key. On the Account tab, when you click Connect, a pop-up window will appear where you can paste in your OpenAI API key. Drop it into the top text box and then click Continue.

https://assets-global.website-files.com/65d4bab2989b365c8d09a9ea/663de92e39a7ebf2f06cce37_Tutorial Content (58).png

In the Action tab, we are going to create a prompt to have ChatGPT analyze the marketing effectiveness of the website based on the generated screenshot from Bannerbear. Make sure to select the Screenshot PNG URL from the Bannerbear step as the image below your prompt.

Sample prompt:

You are GPT-4 Vision. You are trained to interpret images. The attached image is a screenshot of a [insert industry from Interface form] website's homepage. Analyze this [insert industry from Interface form] website's homepage for marketing effectiveness and consider the following criteria in your analysis.

User Interface (UI) Design: Assess how visually appealing the homepage is, including the use of color, imagery, layout, and typography. Is the design clean, modern, and relevant to pest control services?

User Experience (UX): Determine how easy it is for users to navigate the homepage. Are the menus, buttons, and links easily clickable? Is the information architecture logical?

Content Quality: Evaluate the clarity, relevance, and helpfulness of the content. Is the information about services, pricing, and contact details easy to find and understand? Is the content free from spelling and grammatical errors?

Call to Action (CTA) Effectiveness: Analyze the visibility and persuasiveness of the call to action. Is it clear what the user should do next, such as call for a free estimate or book a service online? Are the CTAs prominently placed and compelling?

Trust and Credibility: Consider elements that build trust, such as the presence of customer testimonials, accreditations, and badges. Is there an 'About Us' section that highlights the expertise and reliability of the company?

Finally, test this step to make sure you’re getting marketing analysis of the website from ChatGPT as the output.

💡 Tip: In our testing, we sometimes found ChatGPT would not always analyze the screenshot. To combat this, you can tweak the sample prompt we’ve provided with more explicit instructions if you run into this issue.

And that’s it! If you made it this far, you’ve gone from a website URL submission to a marketing effectiveness analysis using OpenAI, Zapier, and Bannerbear.

From here, you could route this analysis through another AI step to create a more formatted executive summary, connect the output to an email client to auto-send the analysis back to the form requester, or if you’re planning to use this workflow to power a product, you could store this information in a database like Airtable.

This tutorial was created by Garrett.

Get full access

✔️ All 100+ courses & tutorials in our catalog
✔️ New content added weekly
✔️ Private community access
✔️ No subscription, $250 paid once
✔️ Expense it using this template. Or get a team account.
✔️ 30-day refund policy. No questions asked
Join 5,163 learners from companies like Microsoft, Coca Cola, NBA, Adobe & Google

More tutorials like this

View all

If you scrolled this far, you must be a little interested...

Start learning ->

Join 5,163 professionals already learning