Google Adsense is one of the best ways to monetize your blog. Google AdSense is an advertising platform by Google, where publishers can make money by displaying ads on their websites. You just have to add a code to your website and the rest of the work is handled by Google Adsense itself.

If you are struggling to get Google Adsense approved for your website, check this article on how you can get Adsense approved in a month.

If you have ever tried adding Google Adsense to your Gatsby site, then you may have realized there are not many tutorials on adding Adsense to your Gatsby site.

In this post, I will talk about the best and easiest way to add Adsense ads to your Gatsby website.

Google Adsense provides Auto Ads which automatically display ads on different sections of your website by adding just a simple snippet of code in your head section of the website.

Auto ads are responsive and you can change the Ad formats and Number of ads from your Adsense dashboard. So I guess Auto Ads are the best ways to display AdSense with respect to user experience and profitability.

There are many tutorials that show to add Google Adsense by creating or editing your html.js file. In this tutorial, I will show how you can add Adsense auto ads by installing a simple Gatsby plugin.

Adsense Auto ads can be easily implemented on a Gatsby static website with gatsby-plugin-google-adsense plugin.

First, install the plugin to your Gatsby site with the following command on your terminal on the root folder of your site.

npm install --save gatsby-plugin-google-adsense

or

yarn add gatsby-plugin-google-adsense

Then, you need to modify gatsby-config.js file to add your plugin with the publisher ID. Add the following code to the code.

plugins: [
{
resolve: `gatsby-plugin-google-adsense`,
options: {
publisherId: `ca-pub-xxxxxxxxxx`
},
},
]

Replace xxxxxxxx with your publisher ID.

You can adjust the Ad formats and Number of Ads from your Adsense dashboard. To adjust these settings, go to Ads and click on the pencil icon on the site you want to adjust these settings for. On the right side, you can adjust the Ad Load and Ad Formats.

Google Adsense Customizations

I hope this article will help you set up Adsense ads on your Gatsby blog or website. In case of any queries make sure to comment down below.

Buy Me a Coffee at ko-fi.com

About the author

A computer enginnering student from Nepal who loves to use and share free tools and resources for developers