ユーザーが検索エンジンの結果ページをクリックする方法を取得するには？

Question

私は反応プロジェクトを作成し、Google検索エンジンを使用して、ユーザーが自分のページでGoogleで検索できるようにしています。しかし、ユーザーが検索結果ページをクリックする方法を知ることはできません。私のソースコードは以下の通りです。

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>); 
    } 

ユーザは検索ボックスで検索することができ、検索結果はポップアップダイアログに表示されます。ユーザーが検索結果の1つをクリックすると、新しいブラウザータグが開きます。今度は、新しいタブを開くのを防ぎたいのではなく、ユーザーがクリックしてページ内で何かをするのを手に入れたい。たとえば、ユーザーがイメージをクリックした場合、イメージリンクを取得して、このイメージを自分のコンポーネントにレンダリングしたいと考えています。私はどのように反応させることができますか？

Answer 1

まず、Googleカスタム検索コントロールパネルにアクセスしてください。関連する検索エンジンを選択したら、ルックアンドフィールをクリックします。 レイアウトタブが選択されていることを確認し、フルサイズのレイアウト（または、ページ上のどのように正確に表示したいかに応じて他のレイアウトを選択します）を選択します。最後に、&コードを取得をクリックし、それが提供するコードを使用してください。