Gatsby: How do you add Google Adsense?

[omrllm]

I've searched for a solution and I have found https://www.npmjs.com/package/react-adsense.

But I don't know how to use it, and being at the beginning I haven't got a slot id which from what I see is required.

How do you add Adsense to a gatsby website?
What is the equivalent of the tag?

[haxzie-xx]

The mentioned library should work fine as it does in React applications. Slot ID is the ID of AD unit you have created on your Adsense Dashboard.

You need to manually create ad unit, specifying the style and type in Ad Unit option under Ads in the dashboard.

[coreyward]

@omrllm I'm going to go ahead and close this since it's not actually related to an issue with Gatsby. If you need additional help you might want to try StackOverflow.

[omrllm]

I think this is more of an issue with Gatsby:

I have followed your guide on getting an html.js file.
When I add the script given me by Adsense, it doesn't compile.

I add the <script></script> before the </head> tag inside the html.js and I get

There was an error requiring "src/html.js"

 Error: Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /home/foldername/src/html.js: Unexpected token, expected "}" (19:20)

  17 | <script>
  18 |   (adsbygoogle = window.adsbygoogle || []).push({
> 19 |     google_ad_client: "ca-pub-1540853335472527",
     |                     ^
  20 |     enable_page_level_ads: true
  21 |   });
  22 | </script>

etc.

Here is my repo.

[stephanschubert]

@omrllm It's not Gatsby—you're mixing JSX with regular HTML. Escape the <script> tag's content with {' ... '}.

[omrllm]

So, it was a noob error.

Thank you very much!

[omrllm]

Edit: Escaping the <script> tag with {``} outputs the inserted script at the top of the website as is:

[omrllm]

I tried to escape every <script></script> too with {``} but again with the same result.

[stephanschubert]

I meant:

<script>{`<some-js-code-here>`}</script>

[idesignpixels]

If anybody is interested I wrote a blog post on this here

[tonystaark]

@idesignpixels You sure it works? I tried following your tutorial but it does not render any ads, just a thick blue line that is rendered by the Adsense tag

[idesignpixels]

@tonystaark It might be to do with adsense not being fully setup, feel free to message me a link to site/code via the contact form on the website and I can take a peek.

[tonystaark]

@idesignpixels I have dropped you a request through the contact form. Also you can refer to my github repo for the blog codes. Let me know thanks.

[muhzulzidan]

does anyone know how to make gatsby fast while using ads ?