I'll go through the steps, but if you're already using AdSense, feel free to jump ahead via the table of contents.

How to Set Up AdSense Ads

How to Link Your Site During the Application Process

There are three methods, but using ads.txt is the simplest way with Gatsby.js.

1. Select ads.txt from the Google AdSense dashboard and copy the provided code.
2. Create a file named static/ads.txt and paste the code.

Once you've done this, just update your production environment.

You’ll end up pasting a line like the following:

google.com, pub-**********, DIRECT, f08c47fec1234556

Using react-adsense

We’ll use a package to create the AdSense component.

npmjs - react-adsense

npm i react-adsense

src/components/Adsense.js

import AdSense from "react-adsense"
import React from "react"

const Adsense = () => (
  <AdSense.Google
    client="ca-pub-*************"
    slot="12345678901"
    style={{ display: "block", marginBottom: "36px" }}
    format="fluid"
    responsive="true"
    layoutKey="-gw-1+2a-9x+5c"
  />
)

export default Adsense

For the client, input your Publisher ID that starts with ca-pub.

For the slot, input the number assigned to each AdSense ad unit.

You can find it under the existing ad unit name or in the code snippet as data-ad-slot="**********".

Now you can display ads by calling this component.

How to Display Ads Before h2 Tags

For MDX Files

Since I write articles using MDX, I use the @mdx-js/react package.

By using the MDXProvider component, you can replace specific tags.

In this case, we’ll simply turn <h2></h2> into <Adsense/><h2></h2>.

In the template page where your blog MDX is loaded:

src/templates/blog-post.js

import { MDXProvider } from "@mdx-js/react"
import Adsense from "../../components/Adsense"
// ...

const H2 = ({ children }) => {
  return (
    <>
      <Adsense />
      <h2>{children}</h2>
    </>
  )
}

const components = {
  h2: H2,
}

const BlogPostTemplate = ({ data, children }) => {
  return (
    <div>
      <MDXProvider components={components}>{children}</MDXProvider>
    </div>
  )
}
// GraphQL omitted

For MD Files

You can achieve something similar using renderAst.

Gatsby - How to Create and Use Custom Components in Markdown

npm install gatsby-remark-component rehype-react

gatsby.config.js

plugins: [
  // ...
  `gatsby-remark-component`, // Add this
],

The rest is almost the same, but the output differs slightly between MDX and MD.

import RehypeReact from "rehype-react"
import Adsense from "../../components/Adsense"

const H2 = children => {
  return (
    <>
      <Adsense />
      <h2>{children}</h2>
    </>
  )
}

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    h2: H2,
  },
}).Compiler

const BlogPostTemplate = ({ data }) => {
  return <div>{renderAst(data.markdownRemark.htmlAst)}</div>
}

export const query = graphql`
  query PageBySlug($id: String!) {
    markdownRemark(id: { eq: $id }) {
      htmlAst // Add this
      // ...
    }
  }
`

Be sure to include htmlAst in your GraphQL query.

Now you’ve successfully placed an AdSense tag before every h2 tag.

Success!

Hope this helps someone out there.