GatsbyJS - Add Google AdSense

Make use of GatsbyJS SSR APIs to integrate Google Adsense

Abhith Rajan
Abhith RajanJanuary 05, 2020 · 2 min read · Last Updated:

One of the major strengths of Gatsby is its evolving plugins catalog. And there are a couple of plugins found for Google AdSense integration but don’t seem to be maintained for so long. But peeking into the source code of the one pave the path to do the same without any plugins.

All you have to do is, update your gatsby-ssr.js with the below code (if there is no gatsby-ssr.js file on your project directory then create one at the root).

import React from "react";

export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
  const pluginOptions = {
    googleAdClientId: `ca-pub-XXXXXXXXXXXXXX`, //TODO: Replace with your client-Id
    head: true, // Set to false if you prefer to have your adsense script loaded at the end of body instead of head.

  if (process.env.NODE_ENV !== `production`) {
    return null;
  if (pluginOptions.googleAdClientId === undefined) {
    return null;
  const setComponents = pluginOptions.head
    ? setHeadComponents
    : setPostBodyComponents;
  return setComponents([
        __html: `
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "${pluginOptions.googleAdClientId}",
            enable_page_level_ads: true

onRenderBody is a Gatsby SSR API, called after every page Gatsby server renders while building HTML so you can set head and body components to be rendered in your html.js.

👉 SSR APIs | GatsbyJS

Build the project (gatsby build) and see whether the AdSense snippet is present in the build output HTML.

You can also refer the same used in my repo itself.

👉 abhith/ Personal website running on Gatsby

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Abhith Rajan

Written byAbhith Rajan
Abhith Rajan is a software engineer by day and a full-stack developer by night. He's coding for almost a decade now. He codes 🧑‍💻, write ✍️, learn 📖 and advocate 👍.

Is this page helpful?

Related ArticlesView All

Related VideosView All

GatsbyJS & Analytics: How to Add Google Analytics 4.0 To a Gatsby Site Using Gtag