Gatsby Google Ads Component

First I want to say sorry for adding ads to the site lol. If you have an ad blocker you should still get through and I won’t hit you with any pop ups. Also I know opera is having trouble loading the site with ads, will be working on that this summer.

This is a simple component to add Gooogle Adsense to certain components on your website. Adsense will inject ads on its on within the components you defined it in. For my site, I only have this component setup in my blog posts

yarn add react-adsense

      <AdSense.Google
        client='your_publishing_id'
        slot='you_slot_id'
        style={{ display: 'block' }}
        format='auto'
        responsive='true'
      />

Here is the code for the entire blog page for this site


import React from "react";
import PropTypes from "prop-types";

import Article from "../Main/Article";
import PostHeader from "./PostHeader";
import Content from "../Main/Content";
import PostFooter from "./PostFooter";
import AdSense from 'react-adsense';

const Post = props => {
  const { post, author, slug, facebook } = props;
  const { title, subTitle, date, body } = post.edges[0].node;
  const { html } = body.childMarkdownRemark;

  return (
    <Article>
      <PostHeader title={title} subTitle={subTitle} date={date} />
      <AdSense.Google
        client=''
        slot=''
        style={{ display: 'block' }}
        format='auto'
        responsive='true'
      />
      <Content html={html} />
      <div style={{ textAlign: "center", margin: "30px 0px" }}>
        <a href="https://www.buymeacoffee.com/" target="_blank" style={{marginRight: 25, marginBottom: 15}}>
          <img
            src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
            alt="Buy Me A Coffee"
            style={{ height: 60, width: 217 }}
          />
        </a>
        <a href="https://www.digitalocean.com/?refcode=&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge" target="_blank"><img src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg" alt="DigitalOcean Referral Badge" /></a>
      </div>
      <AdSense.Google
        client=''
        slot=''
        style={{ display: 'block' }}
        format='auto'
        responsive='true'
      />
      <PostFooter author={author} post={post} slug={slug} facebook={facebook} />
    </Article>
  );
};

Post.propTypes = {
  post: PropTypes.object.isRequired,
  author: PropTypes.object.isRequired,
  slug: PropTypes.string.isRequired,
  facebook: PropTypes.object.isRequired
};

export default Post;