In this tutorial, we'll automate a simple process: sending home listings from Redfin to a Google Sheet for comparison shopping.
We'll use this Redfin page to develop our workflow. There is a video at the end of of this tutorial demonstrating what’s covered in the text.
0. Set Up your Google Sheet
- Create a new Google Sheet and give it a name, such as "Redfin Data"
- In row 1 create the following column headers
- Address
- Price
- Beds
- Baths
- Square Feet
- My Rating
1. Place a Button
Open the Page Editor
Start by navigating your browser to a property listing: Redfin. Then, open the PixieBrix Page Editor.
Grant Access
The first time you open the Page Editor on a new webpage, you need to grant PixieBrix access to the page. You can grant permanent access by either:
- Clicking Grant Permanent Access, or
- Granting temporary access by clicking on the PixieBrix extension in the Chrome Extensions dropdown and then refreshing the page
Place a Button
- Click Add in the top left of the Page Editor and choose Button
- Then hover your cursor over either of the Redfin buttons in the button group in the top right of the page, which includes
[Log In, Sign Up]
- Click and PixieBrix will add a new custom button "Action" at the end of the button group. I'm choosing to add a button up here because I know it will be on every listing page
Customize the Caption
To customize the Caption, replace the word "Action" with "Google Sheets." You'll see the button on the page update with your new caption
The button should now look like this
2A. Read Data
We'll add an Extract from Page brick to select data from the page (even data not directly visible in the interface). Click the "Add Button"
In the Brick Selection modal, search for “Extract from Page” and choose it
When you add a brick, the Page Editor automatically selects that brick for configuration
Select the Page Element
Next, we'll tell PixieBrix where to read the data from on the page. Click the pointer icon
Hover your mouse over the section of the page shown below. When the purple overlay looks like the following, click to select the page element:
Change the Property name from “Property” to “Address”
Click the Google Sheets button that you placed in Step 1, and expand the Output Data in the Data Panel on the right side of the Page Editor. You should see the address:
Copy the Property Path to Data
You can click the 📃 icon next to Address, and PixieBrix will copy the property path to your clipboard.
Here is what PixieBrix copied to your clipboard: @data.Address
2B. Annotate Data (Optional)
Add a Popup Modal
Click “Add” and search for “show a modal” and then + Add brick
Now when you click your “Google Sheets” button, a popup form appears over the page
Configure the Popup Modal
- Type “My Rating” in the “Form Title” field
- Scroll down to Current Field and use “myPersonalRating” for the Name
- Change the Label to “My Personal Rating”
- Change Field Description to “My personal rating from 1 to 10”
- Change Input Type to Dropdown and add ten Options for ratings 1-10
@form.myPersonalRatingNow when you click your “Google Sheets” button, your newly configured popup modal appears over the page
3. Send to Google Sheet
Configure the Google Sheet
To select data from the page (even data not directly visible in the interface), we'll add a Add Google sheet row brick. Click the "Add Button" and search "add google" and click "Add brick"
- Under Google Sheet click Select
- Choose the spreadsheet you created for this tutorial, Redfin Data, and click Select
- For tab name, choose the sheet you want to send the data to. In our case thats "Sheet 1" because we didn't rename the sheet
- Add the two property paths we’ve addressed thus far to its corresponding rows in the spreadsheet
If you want, you can go back and configure Price, Beds, etc. the same way you configured Address. Just click Add Property in the Extract from Page Input
🧱 jQuery
🧱 Add Google sheet row
Test your Workflow
Press the Google Sheets button to scrape the data you selected. Try it from different listings to make sure it works. Once you're happy with the button, click Save to scrape more listings in the future.
