Alt Text

Welcome to part-6 of the series. As, you might know from earlier part that i am upgrading by personal blog site https://nabendu.blog/

One of the main task remaining from last post was to add advertisements to the site.

I should tell it’s a great pain to add advertisements to a Gatsby site as all the html files are generated on build. And most advertisement networks provide you javascript scripts to put in the head and the body tag.

In part-5 i had applied for google adsense account, but as my content is on three sites(even though i had canonical links to my primary domain https://nabendu.blog/ from dev and medium) it was rejected.

After searching the internet i found this useful article containing the details of other popular ad networks.

I applied for Media.net, InfoLinks and RevenueHits and got approval from all of them. I also applied for Carbon Ads, which is nowadays very popular with developers but didn’t got the approval yet.

I decided to add Media.net ads to my site as they serve ads from yahoo network. Once you login to media.net dashboard, you need to add a file Ads.txt in your site root directory.

Ads.txtAds.txt

Now for a gatsby site it is to be placed inside the static folder.

Static folderStatic folder

After deploying to netlify you can click on the refresh button and it will show optimized.

OptimizedOptimized

Next, goto Ad Units tab and you will see all the Ads.

Ad UnitsAd Units

I had a bit problem with the provided defaults Ads as they were not showing on desktop due to layout of my website. So, i created my own Ads. One thing to keep in mind is that you should also have these two checkbox selected while creating a ad.

Responsive AdsResponsive Ads

Now, when you go inside any Ad unit you will get two scripts to be placed in the head and body tag of your website.

Head and BodyHead and Body

Now, i was not able to figure out where to put these scripts in my gatsby site. The tech support of media.net and stackoverflow also were of not able to help me as Gatsby is quite new. But i got awesome help from folks at gatsby and came to know about there spectrum chat. I posted in the General forum and a person Jeremy helped me through the complete process. Thanks Jeremy Albright for your help.

Gatsby HelpGatsby Help

I got pointed to a great article to insert scripts provided by anyone in the head and body tag of the site. You need to update the gatsby-ssr.js file in the root directory.

gatsby-ssr.jsgatsby-ssr.js

Now, you have to had setHeadComponents, setPostBodyComponents and setPreBodyComponents in the onRenderBody function. Now the head tag script will come in setHeadComponents, but need to be updated to have dangerouslySetInnerHTML.

Similarly, the body tag script will come in setPreBodyComponents with dangerouslySetInnerHTML . Also, notice that i had put an inline style style={{textAlign: 'center'}} to centre the Ad. I had done this because my Ads were not properly showing on desktop.

gatsby-ssr.jsgatsby-ssr.js

After this commit the changes and deploy in netlify and you will get ads shown in all page and blogs before it.

AdsAds

I had also put a different Ad unit in the setPostBodyComponents which will be shown after every page and blog. Now there were already some scripts in my setPostBodyComponents, so i put the div provided by media.net after it. Also, the head script was same so i didn’t had to put anything again in the setHeadComponents

After AdsAfter Ads

After this commit the changes and deploy in netlify and you will get ads shown in all page and blogs after it.

After AdsAfter Ads

I did one more update to my site as you might have noticed from above screenshot. I added Subscription component in my sidebar. Earlier my subscription component was been shown after each of my blogs.

In my subscribe.js i am expecting a props now, which will decide whether to show the headings or not.

subscribe.jssubscribe.js

Also, one of the other changes was to make the background transparent in subscribe.module.scss

subscribe.module.scsssubscribe.module.scss

Next, it’s time to update it first in post.js and pass the new props as true.

post.jspost.js

It will show the updated Subscribe component without any background color after every post.

Subscribe buttonSubscribe button

Next to show the Subscribe component in the Sidebar, i had updated the Social.js file. I had included it in the file, followed by adding a React fragment and added it with passing the props heading as false.

Social.jsSocial.js

And it is showing the mini Subscribe component in the Sidebar. Please do subscribe to my weekly newsletter, which will contain the updates on my posts.

You can find the code till this at my github repo here.

Hope to see you in this series again, when i make some more changes to my blog site.

This post is also available on DEV.