Menu
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?
<script> tag to html.js and it doesn't compile. {``} 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.
872
Inserting the Ad Unit Code Manually. If you'd prefer not to use a plugin, you can choose to insert the ad unit's code manually. You can do this in one of two ways: by pasting the code into a text widget or by pasting the code into your theme's template files.
If you're new to AdSense, one of your first tasks is to connect your site to AdSense. We highly recommend you use Site Kit for WordPress by Google. Site Kit can connect your WordPress site to your AdSense account and place the AdSense code on all your pages for you. So you can show ads automatically across your site.
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<some-js-code-here>}<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>
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. :)
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
