Bildquelle: USGS on Unsplash (modified)

Using Google Adsense with GatsbyJS

By Max Dietrich | Geospatial specialist, Web-Developer.

In general there are two possibilies to use GoogleAdsense on your GatsbyJS website:

  • Auto Ads and
  • custom display blocks.

Depending on whether you choose to include Adsense ads on certain spots or whether you will leave this job to the Google AI, you can choose one/and or the other.

Auto Ads

With Auto Ads, the optimal positions foran advertising banner are determined using a Google Ai and a display ad With Auto Ads, the optimal positions for an advertising banner are determined using a Google AI and a display ad is automatically switched there. All you have to do is place the following AdSense code in html.js.

<script data-ad-client="ca-pub-0037698828864449" async src=""></script>

On I use Auto ads and I'm honestly surprised how well it works. Ads are displayed in a text every few paragraphs and are responsive.

Number of ads

You also have the option of increasing or decreasing the number of displays in the settings. Unfortunately, however, you cannot specify a specific number.

Number of displays

Display formats You can also influence the ad formats. Basically there are:

  • In-page ads (displayed in the main part of the page)
  • Content recommendations (tool for content promotion)
  • Anchor texts (mobile ads on the edge of the screen)
  • Vignette (mobile full screen display, at page transitions)

I have only deactivated anchor texts, because I personally find them very annoying and don't want to ask anyone else.

Display formats

n addition, you can also completely exclude individual pages from advertisements.

If you want to use Auto ads on your GatsbyJS page, you can do it super easily with the plugin gatsby-plugin-google-adsense.


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


yarn add gatsby-plugin-google-adsense

modify gatsby-config.js

// In your gatsby-config.js file
plugins: [
      resolve: `gatsby-plugin-google-adsense`,
      options: {
        publisherId: `ca-pub-xxxxxxxxxx`

The remaining settings can then be adjusted on Adsense.

Ad units

In addition to auto ads, there is also the "classic" option of inserting individual ad units at specific positions. With the React Component react-adsense you can insert Google AdSense and Baidu ads in any place.

npm install --save react-adsense


yarn add react-adsense

In order for the components to be rendered, you still need the AdSense script code. You can either insert this manually in the `` html.js '' file or, if you want to combine individual ad units with Auto ads, you can also use the plug-in already mentioned to insert the script.

When auto ads and individual ad units are combined, the individual ad units always have a higher "priority". This means that all ad units that are inserted manually are usually also rendered and, if the text / ads ratio permits, additional ads from Auto ads are automatically inserted.

If the script has been integrated and react-adsense has been installed, you can use

import React from 'react';
import AdSense from 'react-adsense';

// ads with no set-up

// ads with custom format
  style={{ width: 500, height: 300, float: 'left' }}

// responsive and native ads
  style={{ display: 'block' }}

// auto full width responsive ads
  style={{ display: 'block' }}

to insert components for the ad units.

The respective client id


and the ad slot


must always be specified.

The rest is optional.

Optional props:


More Articles:

Hosting NextJS on a private server using PM2 and Github webhooks as CI/CD

This article shows you how can host your Next.js site on a server with a CI/CD pipeline via PM2 and Github Webhooks.

Syntax Highlighting with Prism and Next.js

Prism is a compact, expandable syntax highlighter that was developed with modern web standards in mind.

How to create a Mailchimp newsletter sign-up-form for your Gatsby Site

Managing your own newsletter is crucial for creating a sustainable online-business. With E-Mails you can build a relationsship with your audience and engage with them so they will drive some nice traffic to your new post or whatever you just have published and want to promote.

I am Max Dietrich.

I am currently working as Geodata-Manager at RIWA.
I love to experiment with web-applications which i am documenting on this site.

Recent Articles

    Good Links

    • All Articles
    • Site Stats
    • About this site
    • Disclaimer & Imprint


    You can connect with me on:
    Copyright © 2021 Max Dietrich. All Rights Reserved.
    Made with ❤️ by MXD.