How to build a google search trends comparer using Google Trends API

Hire the author: Lakshay G

Introduction

The project is available here. Google provides us with a google trends API to look for what people are searching on Google at the moment. In this tutorial, I will tell you how to use google trends API to build a react app to graphically compare between two keywords being searched on google over the years using google trends API. A lot of the time we search keywords independently but sometimes we search them in conjunction. While the keywords tool visualizations of different keywords, this project will show each keyword’s graph and the graph of cases where the string concatenation of the keywords was searched.

Motivation

A thought came into my mind, what are people all across the globe searching on Google. Then I came to know we can find out what the people are searching on Google using a tool provided by Google itself known as Google Trends. Then I came across this google trends API using which we can also create our application similar to Google Trends and add some unique functionalities to it not offered by Google.

Goal

My goal with this project is to make the readers successfully implement it with the greatest ease and then deploy it online for free.

Glossary

scatter chart: type of plot or mathematical diagram using Cartesian coordinates to display values for typically two variables for a set of data.

trends: a general direction in which something is developing or changing.

Project Requirements

1. Basic programming fundamentals are a must
2. Must have a little bit idea about JavaScript, React.js, Node.js and npm packages

Step by Step Tutorial

Backend

1. In this, we are going to create only one file that will be our server file in which we will define our routes.
2. We will define two routes, the first one is /:keyword1/:keyword2 and the second is /:country. In the first one, the google trends API is going to return the trend data of keyword1, keyword2 and their concatenation that is keyword1 + " " + keyword2 . In the second route, the google trends API will return a list of trending searches based on your location/ country.
3. The server.js file looks like this
   
4. With this the backend is done, let’s move on to the frontend.

Frontend

1. The first step is to create a react-app (use npx create-react-app appname)
2. Now set up redux in the app (follow this short video for help)
3. Now after everything is set, let’s start with the frontend designing and setting up the actions and reducers.
4. First Lets code the App.js file first for the design and this is how it looks
   
   Don’t worry if you didn’t get meaning of the functions used, it will be way easier to understand once the actions and reducers are set
5. Let’s write the actions corresponding to each of the 2 routes at the backend
   
   Note: I am using react-native-localize package to get the country name to give it as a parameter for the second route so that google trends API returns the list of trending searches of that location
6. After writing the actions, now our last task is to write the reducer
   
7. After this is done, import all the actions and the redux state variables in the App.js file (step 4)
8. Now, the client application is ready for deployment (follow this for help) and it will finally look like

Learning Tools and Strategies

1. Don’t write messy code, everything should be well understood. Doing this will automatically help you when it comes to debugging.
2. Do a console.log() at each major step you feel is important, or that you feel may throw some kind of error. This is so that you can get the result of each major code-snippet.

Reflective Analysis

It is a very cool project. At first, I thought Google must be charging for providing this data but it is free anyways There are many other things that you can do with the google trends API, which means the possibilities for the future are vast.

Conclusion

The project gives a detailed idea of how to implement a google trends API. There are many other things that you can do with google trends API. Do play around with this API. The server application and the client application are deployed separately, so I would suggest trying deploying them both together as a single application. Also, this project just graphically compares the search trends, so try adding a button that allows the user to download the comparison report instead of just visually comparing the search trends.

Citations

I used https://www.mltcreative.com/blog/keyword-research-isnt-dead-google-trends-is-keeping-it-that-way/ for the featured image

The project is available here and deployed here. If you want to code along, you can watch this video uploaded by me.

Hire the author: Lakshay G