Gatsby Google Ads Component
add google adsense to your project
Fri, 05 May 2023
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;
