Web scraping Google Events Results with Nodejs
Tags: webscraping, node, serpapi, google
Published: 2022-11-13 10:25:23

<h2 id='what'>What will be scraped</h2>

![what](https://user-images.githubusercontent.com/64033139/198845132-08b6d5e6-f5f3-41b9-b7c5-d967711bb52f.png)

<h2 id='full_code'>Full code</h2>

If you don't need an explanation, have a look at [the full code example in the online IDE](https://replit.com/@MikhailZub/Google-Events-Results-with-NodeJS-SerpApi#withCheerio.js)

```javascript
const cheerio = require("cheerio");
const axios = require("axios");

const searchString = "Events in Seattle"; // what we want to search

const AXIOS_OPTIONS = {
  headers: {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36",
  }, // adding the User-Agent header as one way to prevent the request from being blocked
  params: {
    q: searchString, // our encoded search string
    hl: "en", // parameter defines the language to use for the Google search
    ibp: "htl;events", // parameter defines the use of Google Events results
  },
};

function getResultsFromPage() {
  return axios.get("https://www.google.com/search", AXIOS_OPTIONS).then(function ({ data }) {
    let $ = cheerio.load(data);

    if (!$("li[data-encoded-docid]").length) return null;

    const imagesPattern = /var _u='(?<url>[^']+)';var _i='(?<id>[^']+)/gm; //https://regex101.com/r/qBLEPN/1
    const images = [...data.matchAll(imagesPattern)].map(({ groups }) => ({
      id: groups.id,
      url: decodeURIComponent(groups.url.replaceAll("\\x", "%")),
    }));

    return Array.from($("li[data-encoded-docid]")).map((el) => ({
      title: $(el).find(".dEuIWb").text(),
      date: {
        startDate: `${$(el).find(".FTUoSb").text()} ${$(el).find(".omoMNe").text()}`,
        when: $(el).find(".Gkoz3").text(),
      },
      address: Array.from($(el).find(".ov85De span")).map((el) => $(el).text()),
      link: $(el).find(".zTH3xc").attr("href"),
      eventLocationMap: {
        image: `https://www.google.com${$(el).find(".lu_vs").attr("data-bsrc")}`,
        link: `https://www.google.com${$(el).find(".ozQmAd").attr("data-url")}`,
      },
      description: $(el).find(".PVlUWc").text(),
      ticketInfo: Array.from($(el).find(".RLN0we[jsname='CzizI'] div[data-domain]")).map((el) => ({
        source: $(el).attr("data-domain"),
        link: $(el).find(".SKIyM").attr("href"),
        linkType: $(el).find(".uaYYHd").text(),
      })),
      venue: {
        name: $(el).find(".RVclrc").text(),
        rating: parseFloat($(el).find(".UIHjI").text()),
        reviews: parseInt($(el).find(".z5jxId").text().replace(",", "")),
        link: `https://www.google.com${$(el).find(".pzNwRe a").attr("href")}`,
      },
      thumbnail: images.find((innerEl) => innerEl.id === $(el).find(".H3ReNc .YQ4gaf").attr("id"))?.url,
      image: images.find((innerEl) => innerEl.id === $(el).find(".XiXcOd .YQ4gaf").attr("id"))?.url,
    }));
  });
}

async function getGoogleEventsResults() {
  const events = [];
  while (true) {
    const resultFromPage = await getResultsFromPage();
    if (resultFromPage) {
      events.push(...resultFromPage);
      AXIOS_OPTIONS.params.start ? (AXIOS_OPTIONS.params.start += 10) : (AXIOS_OPTIONS.params.start = 10);
    } else break;
  }

  return events;
}

getGoogleEventsResults().then((result) => console.dir(result, { depth: null }));
```

<h2 id='preparation'>Preparation</h2>

First, we need to create a Node.js\* project and add [`npm`](https://www.npmjs.com/) packages [`cheerio`](https://www.npmjs.com/package/cheerio) to parse parts of the HTML markup, and [`axios`](https://www.npmjs.com/package/axios) to make a request to a website.

To do this, in the directory with our project, open the command line and enter:

```bash
$ npm init -y
```

And then:

```bash
$ npm i cheerio axios
```

\*<span style="font-size: 15px;">If you don't have Node.js installed, you can [download it from nodejs.org](https://nodejs.org/en/) and follow the installation [documentation](https://nodejs.dev/learn/introduction-to-nodejs).</span>

<h2 id='process'>Process</h2>

First of all, we need to extract data from HTML elements. The process of getting the right CSS selectors is fairly easy via [SelectorGadget Chrome extension](https://selectorgadget.com/) which able us to grab CSS selectors by clicking on the desired element in the browser. However, it is not always working perfectly, especially when the website is heavily used by JavaScript.

We have a dedicated [web Scraping with CSS Selectors](https://serpapi.com/blog/web-scraping-with-css-selectors-using-python/#css_gadget) blog post at SerpApi if you want to know a little bit more about them.

The Gif below illustrates the approach of selecting different parts of the results.

![how](https://user-images.githubusercontent.com/64033139/198845271-60c530ca-0d66-4d21-8d60-211a294a32e9.gif)

<h3 id='code_explanation'>Code explanation</h3>

Declare constants from [`cheerio`](https://www.npmjs.com/package/cheerio) and [`axios`](https://www.npmjs.com/package/axios) libraries:

```javascript
const cheerio = require("cheerio");
const axios = require("axios");
```

Next, we write what we want to search, the request options: [`HTTP headers`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) with [`User-Agent`](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) which is used to act as a "real" user visit, and the necessary parameters for making a request:

```javascript
const searchString = "Events in Seattle"; // what we want to search

const AXIOS_OPTIONS = {
  headers: {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36",
  }, // adding the User-Agent header as one way to prevent the request from being blocked
  params: {
    q: searchString, // our encoded search string
    hl: "en", // parameter defines the language to use for the Google search
    ibp: "htl;events", // parameter defines the use of Google Events results
  },
};
```

📌Note: [Default `axios` request user-agent is `axios/<axios_version>`](https://github.com/axios/axios/blob/892c241773e7dda78a969ac1faa9b365e24f6cc8/lib/adapters/http.js#L224) so websites understand that it's a script that sends a request and might block it. [Check what's your user-agent](https://www.whatismybrowser.com/detect/what-is-my-user-agent/).

Next, we write a function that makes the request and returns the received data from the page. We received the response from [`axios`](https://www.npmjs.com/package/axios) request that has `data` key that we [destructured](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) and parse it with [`cheerio`](https://www.npmjs.com/package/cheerio):

```javascript
function getResultsFromPage() {
  return axios
    .get("https://www.google.com/search", AXIOS_OPTIONS)
    .then(function ({ data }) {
        let $ = cheerio.load(data);
        ...
  })
}
```

Next, we check if no "events" result on the page, we return `null`. We do that to stop our scraper when there are no more pages left:

```javascript
if (!$("li[data-encoded-docid]").length) return null;
```

Then, we need to get images data from the `script` tags, because when the page loads for thumbnails and images use placeholders with resolution 1px x 1px, and the real thumbnails and images are set by JavaScript in the browser.

First, we define [`imagesPattern`](https://regex101.com/r/qBLEPN/1), then using [`spread syntax`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) we make an array from an [iterable iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) of matches, received from [`matchAll`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll) method.

Next, we take match results and make objects with image `id` and `url`. To make a valid `url` we need to remove all "\\x" chars (using [`replaceAll`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) method), decode it (using [`decodeURIComponent`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) method) and make from these objects the `images` aray:

```javascript
//https://regex101.com/r/qBLEPN/1
const imagesPattern = /var _u='(?<url>[^']+)';var _i='(?<id>[^']+)/gm;
const images = [...data.matchAll(imagesPattern)].map(({ groups }) => ({
  id: groups.id,
  url: decodeURIComponent(groups.url.replaceAll("\\x", "%")),
}));
```

Next, we need to get the different parts of the page using next methods:

- [`$()`](https://api.jquery.com/class-selector/);
- [`text()`](https://api.jquery.com/text/);
- [`trim()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim);
- [`Array.from()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from);
- [`find()`](https://api.jquery.com/find/)(for selectors);
- [`attr()`](https://api.jquery.com/attr/);
- [`find()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)(for arrays).

```javascript
title: $(el).find(".dEuIWb").text(),
date: {
    startDate: `
    ${$(el).find(".FTUoSb").text()} ${$(el).find(".omoMNe").text()}
    `,
    when: $(el).find(".Gkoz3").text(),
},
address: Array.from($(el)
    .find(".ov85De span"))
    .map((el) => $(el).text()),
link: $(el).find(".zTH3xc").attr("href"),
eventLocationMap: {
    image:
        `https://www.google.com${$(el).find(".lu_vs").attr("data-bsrc")}`,
    link:
        `https://www.google.com${$(el).find(".ozQmAd").attr("data-url")}`,
},
description: $(el).find(".PVlUWc").text(),
ticketInfo: Array.from($(el).find(".RLN0we[jsname='CzizI'] div[data-domain]"))
    .map((el) => ({
        source: $(el).attr("data-domain"),
        link: $(el).find(".SKIyM").attr("href"),
        linkType: $(el).find(".uaYYHd").text(),
    })),
venue: {
    name: $(el).find(".RVclrc").text(),
    rating: parseFloat($(el).find(".UIHjI").text()),
    reviews: parseInt($(el).find(".z5jxId").text().replace(",", "")),
    link: `https://www.google.com${$(el).find(".pzNwRe a").attr("href")}`,
},
thumbnail: images
    .find((innerEl) => innerEl.id === $(el).find(".H3ReNc .YQ4gaf").attr("id"))
    ?.url,
image: images
    .find((innerEl) => innerEl.id === $(el).find(".XiXcOd .YQ4gaf").attr("id"))
    ?.url,
```

Next, we write a function in which we get results from each page (using [`while`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while) loop), check if results are present, add them to the `events` array ([`push`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) method) and set to request params new `start` value (it means the number from which we want to see results on the next page).

When no more results on the page (`else` statement) we stop the loop and return the `events` array:

```javascript
async function getGoogleEventsResults() {
  const events = [];
  while (true) {
    const resultFromPage = await getResultsFromPage();
    if (resultFromPage) {
      events.push(...resultFromPage);
      AXIOS_OPTIONS.params.start ? (AXIOS_OPTIONS.params.start += 10) : (AXIOS_OPTIONS.params.start = 10);
    } else break;
  }

  return events;
}
```

Now we can launch our parser:

```bash
$ node YOUR_FILE_NAME # YOUR_FILE_NAME is the name of your .js file
```

<h2 id='output'>Output</h2>

```json
[
   {
      "title":"Tower of Power",
      "date":{
         "startDate":"29 Oct",
         "when":"Thu, Oct 27, 7:30 PM – Sun, Oct 30, 9:30 PM PDT"
      },
      "address":[
         "Dimitriou's Jazz Alley",
         "2033 6th Ave, Seattle, WA"
      ],
      "link":"https://www.jazzalley.com/www-home/artist.jsp?shownum=6377",
      "eventLocationMap":{
         "image":"https://www.google.com/maps/vt/data=OmPOWRffaJ5QzQJzj_uJm9rhXFYS6C1W0lRoW6r_BArGhlrBB-5S3BDjaSpWtzFtkC2hXFY3JZP_L5gkPrVhFrhYgkYNXe4IWGdzx4Qz3bqn0IBRo6I",
         "link":"https://www.google.com/maps/place//data=!4m2!3m1!1s0x5490154b9ece636b:0x67dcbe766e371a09?sa=X&hl=en"
      },
      "description":"Dimitriou's Jazz Alley welcomes Tower of Power! Band members are: Emilio Castillo (sax), Doc Kupka (sax), David Garibaldi (drums), Roger Smith (keys/piano), Adolfo Acosta (trumpet), Jerry Cortez...",
      "ticketInfo":[
         {
            "source":"Jazzalley.com",
            "link":"https://www.jazzalley.com/www-home/artist.jsp?shownum=6377",
            "linkType":"TICKETS"
         },
         {
            "source":"Cheapoticketing.com",
            "link":"https://www.cheapoticketing.com/events/5307844/tower-of-power-tickets",
            "linkType":"TICKETS"
         },
         {
            "source":"Feefreeticket.com",
            "link":"https://www.feefreeticket.com/tower-of-power-dimitrious-jazz-alley/5307844",
            "linkType":"TICKETS"
         },
         {
            "source":"Visit Seattle",
            "link":"https://visitseattle.org/events/tower-of-power-3/",
            "linkType":"MORE INFO"
         },
         {
            "source":"Facebook",
            "link":"https://m.facebook.com/events/612485650587298/",
            "linkType":"MORE INFO"
         }
      ],
      "venue":{
         "name":"Dimitriou's Jazz Alley",
         "rating":4.8,
         "reviews":2249,
         "link":"https://www.google.com/search?hl=en&q=Dimitriou%27s+Jazz+Alley&ludocid=7484066096647445001&ibp=gwp%3B0,7"
      },
      "thumbnail":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmK8jQnWyhw2p5LAL5XEEQxRwjd7Gpyc9FgPOod4DVzL1jLAxdTuPUSoA&s",
      "image":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8lisCKUpEb3Nf0-dvbWup-FQFFJS6aEbH0ST6YFMnANDwTCcpWavkGmlcEw&s=10"
   },
    ... and other events results
]
```

<h2 id='serp_api'>Using<a href="https://serpapi.com/google-events-api"> Google Events API </a>from SerpApi</h2>

This section is to show the comparison between the DIY solution and our solution.

The biggest difference is that you don't need to create the parser from scratch and maintain it.

There's also a chance that the request might be blocked at some point from Google, we handle it on our backend so there's no need to figure out how to do it yourself or figure out which CAPTCHA, proxy provider to use.

First, we need to install [`google-search-results-nodejs`](https://www.npmjs.com/package/google-search-results-nodejs):

```bash
npm i google-search-results-nodejs
```

Here's the [full code example](https://replit.com/@MikhailZub/Google-Events-Results-with-NodeJS-SerpApi#withSerpApi.js), if you don't need an explanation:

```javascript
const SerpApi = require("google-search-results-nodejs");
const search = new SerpApi.GoogleSearch(process.env.API_KEY); //your API key from serpapi.com

const searchQuery = "Events in Seatle";

const params = {
  q: searchQuery, // what we want to search
  engine: "google_events", // search engine
  hl: "en", // parameter defines the language to use for the Google search
};

const getJson = () => {
  return new Promise((resolve) => {
    search.json(params, resolve);
  });
};

const getResults = async () => {
  const eventsResults = [];
  while (true) {
    const json = await getJson();
    if (json.events_results) {
      eventsResults.push(...json.events_results);
      params.start ? (params.start += 10) : (params.start = 10);
    } else break;
  }
  return eventsResults;
};

getResults().then((result) => console.dir(result, { depth: null }));
```

<h3 id='serp_api_code_explanation'>Code explanation</h3>

First, we need to declare `SerpApi` from [`google-search-results-nodejs`](https://www.npmjs.com/package/google-search-results-nodejs) library and define new `search` instance with your API key from [SerpApi](https://serpapi.com/manage-api-key):

```javascript
const SerpApi = require("google-search-results-nodejs");
const search = new SerpApi.GoogleSearch(API_KEY);
```

Next, we write what we want to search (`searchQuery` constant) and the necessary parameters for making a request:

```javascript
const searchQuery = "Events in Seatle";

const params = {
  q: searchQuery, // what we want to search
  engine: "google_events", // search engine
  hl: "en", // parameter defines the language to use for the Google search
};
```

Next, we wrap the search method from the SerpApi library in a promise to further work with the search results:

```javascript
const getJson = () => {
  return new Promise((resolve) => {
    search.json(params, resolve);
  });
};
```

And finally, we declare the function `getResult` that gets data from each page and return it:

```javascript
const getResults = async () => {
  ...
};
```

In this function, we get `json` with results from each page (using [`while`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while) loop), check if `events_results` are present, add them to the `eventsResults` array ([`push`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) method) and set to request params new `start` value (it means the number from which we want to see results on the next page).

When no more results on the page (`else` statement) we stop the loop and return the `eventsResults` array:

```javascript
const eventsResults = [];
while (true) {
  const json = await getJson();
  if (json.events_results) {
    eventsResults.push(...json.events_results);
    params.start ? (params.start += 10) : (params.start = 10);
  } else break;
}
return eventsResults;
```

After, we run the `getResults` function and print all the received information in the console with the [`console.dir`](https://nodejs.org/api/console.html#consoledirobj-options) method, which allows you to use an object with the necessary parameters to change default output options:

```javascript
getResults().then((result) => console.dir(result, { depth: null }));
```

<h2 id='serp_api_output'>Output</h2>

```json
[
   {
      "title":"Elevation Worship & Steven Furtick",
      "date":{
         "start_date":"Oct 30",
         "when":"Sun, Oct 30, 7 – 11 PM"
      },
      "address":[
         "Climate Pledge Arena, 334 1st Ave N",
         "Seattle, WA"
      ],
      "link":"https://www.songkick.com/concerts/40548998-elevation-worship-at-climate-pledge-arena",
      "event_location_map":{
         "image":"https://www.google.com/maps/vt/data=TSHcoPf0jiU-kXXoAgZTWPVPPnQjq7wHkR9cBuWJM6kQ7JYhbWG5RIkTWU09eeFOCznkgTEvgAL_bXHHUtRRfSJtyYlmFSCYRX4TS-sWW9T5FQajwP0",
         "link":"https://www.google.com/maps/place//data=!4m2!3m1!1s0x5490154471be8ed3:0xde04af6753ca2e27?sa=X&hl=en",
         "serpapi_link":"https://serpapi.com/search.json?data=%214m2%213m1%211s0x5490154471be8ed3%3A0xde04af6753ca2e27&engine=google_maps&google_domain=google.com&hl=en&q=Events+in+Seatle&type=place"
      },
      "description":"Get ready for a full worship experience as Steven Furtick preaches and Elevation Worship leads some of their hit songs including \"See A Victory\", \"Great Are You Lord\", new hit song \"Same God\", and...",
      "ticket_info":[
         {
            "source":"Ticketmaster.com",
            "link":"https://ticketmaster.evyy.net/c/253185/264167/4272?u=https%3A%2F%2Fwww.ticketmaster.com%2Felevation-nights-tour-seattle-washington-10-30-2022%2Fevent%2F0F005CF4B5353529",
            "link_type":"tickets"
         },
         {
            "source":"Festivaly.eu",
            "link":"https://festivaly.eu/en/elevation-nights-tour-climate-pledge-arena-seattle-2022",
            "link_type":"tickets"
         },
         {
            "source":"Rateyourseats.com",
            "link":"https://www.rateyourseats.com/mobile/tickets/events/elevation-nights-tour-tickets-seattle-climate-pledge-arena-october-30-2022-4035222",
            "link_type":"tickets"
         },
         {
            "source":"Songkick",
            "link":"https://www.songkick.com/concerts/40548998-elevation-worship-at-climate-pledge-arena",
            "link_type":"more info"
         },
         {
            "source":"Live Nation",
            "link":"https://www.livenation.com/event/vvG1HZ923guKft/elevation-worship-steven-furtick",
            "link_type":"more info"
         }
      ],
      "venue":{
         "name":"Climate Pledge Arena",
         "rating":4.5,
         "reviews":4285,
         "link":"https://www.google.com/search?hl=en&q=Climate+Pledge+Arena&ludocid=15998104634649095719&ibp=gwp%3B0,7"
      },
      "thumbnail":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSLAz2tc5y7qinf8ohwnJF2Nj61Je4n_1XPAXwADU&s",
      "image":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5D0FqE7I45LfG6t1JoHy3xzdCScBAzbyh0AR1WUX2q5Xq&s=10"
   },
   ... and other events results
]
```

<h2 id='links'>Links</h2>

- [Code in the online IDE](https://replit.com/@MikhailZub/Google-Events-Results-with-NodeJS-SerpApi#index.js)
- [Google Events API](https://serpapi.com/google-events-api)

If you want to see some projects made with SerpApi, [write me a message](mailto:miha01012019@gmail.com).

---

<p style="text-align: center;">Join us on <a href="https://twitter.com/serp_api">Twitter</a> | <a href="https://www.youtube.com/channel/UCUgIHlYBOD3yA3yDIRhg_mg">YouTube</a></p>
<p style="text-align: center;">Add a  <a href="https://github.com/serpapi/public-roadmap/issues">Feature Request</a>💫 or a <a href="https://github.com/serpapi/public-roadmap/issues">Bug</a>🐞</p>