How to add Adsense to a website built with GatsbyJS?

Question

I'd like to know where I should add the <script></script> provided by Google Adsense.

They say to add it into the <head></head>, but in Gatsby you have Helmet as <head>.

I tried also to add the script inside an html.js file where it's located a <head> tag with {``} to escape the <script> tag, but it outputs at the top of the website the script content.

TL;DR: What is the optimal way to add Adsense to a website built with GatsbyJS?

I've tried to use the react adsense package but I do not understand how to use it with Gatsby.
I have tried to add the <script> tag to html.js and it doesn't compile.
If you escape it with {``} you get the script as is, on top of the website.

<head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
          {`<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>`}
             {` <script>
                  (adsbygoogle = window.adsbygoogle || []).push({
                    google_ad_client: "ca-pub-1540853335472527",
                    enable_page_level_ads: true
                  });
                </script> 
              `}
        </head>

source: html.js

The website should get detected by the Google crawlers.

The quotation marks are transformed " in browser. Not sure if there's a fix. — Dr. Kevin Wang, May 26 '19 at 13:11

score 17 · Answer 1 · answered Jul 16 '19 at 13:00

17

if you are using services like Netlify to deploy your website, you can use snippet injection functionality to make this work without touching your source code.

settings -> build & deploy -> post processing -> snippet injection -> add snippet

then you can select where you want to add the snippet (script tag). For the Adsense this should be before the </head>. hope it helps. :)

answered Jul 16 '19 at 13:00

Sankha Karunasekara

1,636
18
19

4

Good one! I do not have to worry about ignoring things on Github – jhnferraris Sep 01 '19 at 04:34

score 16 · Accepted Answer · answered Jan 21 '19 at 17:02

Thanks to an answer given on Github, finally the problem is solved:

If you want to add Adsense:

cp .cache/default-html.js src/html.js
Add the script but everything inside should be escaped -> {<some-js-code-here>}
In my situation and as an example:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
             <script>
                  {`
                    (adsbygoogle = window.adsbygoogle || []).push({
                      google_ad_client: "ca-pub-1540853335472527",
                      enable_page_level_ads: true
                    });
                  `}
             </script>

Ultimately if you want to verify that Adsense has been added you can control if the ```` — Joe Doe, Jan 21 '19 at 17:27

score 3 · Answer 3 · answered Apr 28 '21 at 20:25

You can find here a nice tutorial on how to add Google AdSense in Gatsby.

Basically, the suggested way is to implement a Google AdSense Banner using React and including the Google AdSense code in the gatsby-ssr.js file.

gatsby-ssr.js file:

const React = require('react')

const HeadComponents = [
  <script
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX"
    crossOrigin="anonymous"
    async
  />,
]

exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents(HeadComponents)
}

AdSense Banner component:

const Banner: React.FC<BannerProps> = ({
  className,
  style,
  layout,
  format,
  client = 'ca-pub-XXXX',
  slot,
  responsive,
  layoutKey,
}) => {
  useEffect(() => {
    try {
      const adsbygoogle = window.adsbygoogle || []
      adsbygoogle.push({})
    } catch (e) {
      console.error(e)
    }
  }, [])
  return (
    <div className={clx(container, className)}>
      <ins
        className="adsbygoogle"
        style={style}
        data-ad-layout={layout}
        data-ad-format={format}
        data-ad-client={client}
        data-ad-slot={slot}
        data-ad-layout-key={layoutKey}
        data-full-width-responsive={responsive}
      />
    </div>
  )
}

Don't use the gatsby-adsense plugin, it's deprecated.

Full article here.

Just a side note, for **Gatsby V2** (with ES6) you will need to use `export const onRenderBody` instead of `exports.onRenderBody`. — Ander, Oct 19 '21 at 10:59

score 2 · Answer 4 · answered Jan 21 '19 at 16:59

To set up Adsense, place the <script> tag (without template literals {``} just before your closing </body> tag in your html.js, like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body>

Then, to place an ad unit, you can either use a pre-built component like react-adsense on npm, as you mentioned, or build it yourself.

This is a useful article that covers both the setup and the placing of ad units with a component.

Let me know if this works for you or if something isn't clear!

score 0 · Answer 5 · answered Dec 04 '21 at 03:36

0

To add Google Adsence in Gatsby you need these three packages

react-adsense rehype-react gatsby-transformer-remark

and if you want to know how to implement these packages in your site then checkout this tutorial

answered Dec 04 '21 at 03:36

Anshu Meena

169
1
6

How to add Adsense to a website built with GatsbyJS?

5 Answers5

Linked