How to get what users click on the search engine result page?

Question

I am creating a react project and using google search engine to allow users to search on google in my page. But I don't know how to get what users click on the search results page. Below is my source code:

componentDidMount() {
    const myCallback = function() {
      if (document.readyState === 'complete') {
        google.search.cse.element.render(
          {
            div: 'root',
            tag: 'search',
          });
      } else {
        google.setOnLoadCallback(() => {
          google.search.cse.element.render(
            {
              div: 'root',
              tag: 'search',
            });
        }, true);
      }
    };

    window.__gcse = {
      parsetags: 'explicit',
      callback: myCallback,
    };

    (function() {
      const cx = '015923670062127816633:npuitytcpqy';
      const gcse = document.createElement('script');
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = `https://cse.google.com/cse.js?cx=${cx}&searchType=image`;
      // gcse.src = `https://www.googleapis.com/customsearch/v1?key=YOUR_API_KEY&cx=${cs}&q=flower&searchType=image&fileType=jpg&imgSize=small&alt=json`;
      const s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    }());
    console.log(window.__gcse);
  }

  render() {
    return (<div className="content">
      <div className="gcse-searchbox" resultsUrl="http://www.google.com" newWindow="true" queryParameterName="search" />
    </div>);
  }

Users can search on the search box and it will show the search results in a popup dialog. It will open a new browser tag if users click one of the search results. Now I want to prevent opening a new tab, instead get what users clicked and do something in my page. For example, if users click an image, I'd like to get the image link and render this image on my component. How can I implement it through react?

Answer 1

First, visit the Google Custom Search Control Panel. After selecting the relevant search engine, click on Look and feel. Make sure the Layout tab is selected, and choose the Full-width layout (or perhaps one of the others depending on how exactly you want it to look on your page). Finally, click on Save & Get Code and use the code it provides.