Web scraping Google search results into your Bubble app is easy with a service like Serper.dev. In the previous video I demonstrated how we can easily, quickly, less than five minutes, we add in the API to the Bubble API connector and we can then get results such as this. And in fact I'm really surprised it's dead quick. We get back our list, so my search term query was something like, oh yeah, best no code web app platforms and I'm getting back Zapier, I'm getting back G2.

Saving Search Data to Your Bubble App

Okay, in this Bubble tutorial video I'm going to show you how you can save this data to your Bubble app. I'm going to go through every step you need but before I launch into that, Bubble tutorials, if you're learning, well there's no better place than planetnocode.com. We've got so many Bubble tutorials that they don't fit on our YouTube channel. A little bit cheeky to say, but what I really mean is is that we have got more Bubble tutorial videos on our website planetnocode.com than you can find on our YouTube channel.

So let's save these search results to our Bubble database. First thing I'm going to do is actually go back here and click manual because I just want to see the key link, the key data fields basically. So we'll just do title and link I think. So I'm going to go into data, I'm going to create new data type. I will say search results and add in those fields title of type text and link also of type text.

Setting Up the Page

Okay, I'm now going to add in a page. Now I'm not going to do any amazing design work here, I should just say web scrape Google search results. Web scrape Google will do. And I'm now going to add in a button and an input with this search query and I'll say web scrape Google search.

Okay, now I get back a number of results and I can add in, if I go into the playground here, I can say how many results I want to get back and it adds a parameter, default being 10, to the body or the raw data content of my API. Cool. But yeah, I know I'm going to get 10 back basically.

Optimizing the Workflow

Now I could have one massive workflow which is saying save result one, save result two, save result three, but I want to make it a bit of a better experience to my front-end users and also I like if I'm going to iterate through a list of things I like to be able to make that number like n or x as in it's a variable, it's a flexible number.

Running a Backend Workflow

So to do that I'm going to run a backend workflow. So I'm going to have one backend workflow because I'm going to make this whole process run in the backend. It's not going to be public. I will say web scrape Google search and I'm going to add in two parameters.

So, no, one parameter, I just say search query and then I add in my action. So plugins, SERP adopt dev, scrape Google. Now if you don't see that, the number one reason you don't see it is because in plugins you have use as set to data and not action. If you swap it to action you might need to reinitialize the call but then you'll find it available as a workflow action.

I'm going to swap this for my search query. That's like my variable that I'm putting into this workflow. And now I need another API workflow and I say save search result and I'm going to add in data create a new thing search result. This is going to be run for every one of the ten search results or any number that I get back from SERP adopt dev.

And so I'll add in title, add in link and then into here I need to also add in title and link and then link up the endpoint parameters, title and link, to say title and link. So then on my web scrape Google I can add in here schedule API workflow on list.

Important Note on Backend Workflows

One quick thing on backend workflows, you won't be able to access this or run this unless you're on a paid bubble plan, but we can run on a list and the list is Google scrape organic. How do I know it's Google scrape organic? Well that's because if I go back here and initialize the call, it's here. Organic list. This is the list that I want to iterate through in order to save the results. And then the list I want to run on is that.

And then I want to say save search results. I want just to run immediately, so current date time. If I leave the intervals box empty, bubble will self optimize. If you're gonna schedule a list of hundreds of things, they're just all going to queue up and bubble will execute them as soon as it can and you can get a little bit of kind of stickage and pause there. But that shouldn't really matter with these ten.

And then title is going to be, when I get this option at the top, this scrape Google organic, I'm now referring in terms to one of the results. So I now say title and I say link. Obviously I get all of this extra data such as site links and position, but you know you can add those in, but I'm just keeping it simple for now.

Displaying the Results

And then I need a way of displaying it. So I'm going to go back to my page, Google web scrape, and I'm just going to add in a repeating group. And it's going to be of search results. And all I'm doing in order so this tutorial doesn't go on for ages, is I'm just going to list all of the search results that I've created.

You might want to consider grouping them by having another data type called search, and you would create that when this button is clicked. And that way you can go through. So if your user clicks the button three times, you have three separate searches, and each of those separate searches would be related to ten search results. But for now, just to prove that it's working, I'm going to say do a search for search results not limited. Set that to zero. Ah, it doesn't work if I'm using fixed layout very nicely. Change that to 50. And then I'm going to add in some text, search results title, just add in a line space, so it's nice and quick, search results link.

I think that is now all going to work. Yeah, add in the button workflow. So what does this do? This button triggers my API, well my back-end workflow, which is web scrape Google search, not my individual save because that is triggered by the web scrape Google search. I'm going to say current date and time, and then my search query is going to be the input on the page.

Testing the Functionality

Let's test that. So why don't I search for the... I don't want to get competitors coming up. Why don't we go for something like creative uses of chat GPT. Okay, now you can see this is Bubble going through the 10 results and saving them one by one. The reason they're not being displayed fully, I'll update that, is because I've been lazy and I've used fixed layouts and fixed layouts cause headaches. Let's try that. Go back to my demo, refresh the page. Okay, there we go. I've scraped all of those results for how you could use ChatGPT creatively.

Conclusion: The Power of Google Results Web Scrape

So this is an incredibly powerful tool if your web app does anything in the realm of SEO. If you want to create a web app even that allows your users to track their position, you can do that. This is the starting point for doing that by using the Serper.dev API and we've covered it in basically 15 minutes. How to add in Google search, web scraping or you know accessing the Google search API into your Bubble application.