gatsby-plugin-google-adsense

Add Google Adsense to your Gatsby site.

Install

npm install @isamrish/gatsby-plugin-google-adsense

or

yarn add @isamrish/gatsby-plugin-google-adsense

Usage in Gatsby website

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@isamrish/gatsby-plugin-google-adsense`,
      options: {
        googleAdClientId: "YOUR_GOOGLE_ADSENSE_TRACKING_ID",
        head: false // Optional
      }
    }
  ]
};

Options

googleAdClientId

Here you place your Google Adsense tracking id.

head

Here you can define where to place the tracking script. With head:true it will placed in the header, with head:false it will placed in the body. Default is false.

Google adsense recommends to put script in head tag.

Example of Adsense component

// In your adsense component
import React from "react";

export default function AdSense() {
  React.useEffect(() => {
    if (process.env.NODE_ENV !== "development") {
      if (window) {
        try {
          (window.adsbygoogle = window.adsbygoogle || []).push({});
        } catch (error) {
          console.log(error, "adsenese error");
        }
      }
    }
  }, []);

  return (
    <ins
      className="adsbygoogle"
      data-ad-client="ca-pub-XXXXXX"
      data-ad-slot="XXXXXXX"
      style={{
        display: "block"
      }}
      data-ad-format="auto"
      data-full-width-responsive="true"
    ></ins>
  );
}