Alt Text

Welcome to part-21 of the series. I had decided to put Advertisement in my site https://amazinghampi.com/ which i had build in this series. I had newly learned to add Ads to a gatsby powered site and added it in my blog site https://nabendu.blog/. You can learn about it here.

I have the approval for media.net Ads. You can learn more about it here. So, after login to the media.net console, need to click on

media.netmedia.net

It will show the pop-up in which you have to enter the domain name, average daily traffic and current AD revenue.

Add SiteAdd Site

After we press on Submit button, it will show the status as Pending.

PendingPending

Next, move to the Ads.txt Settings tab. Here click on the Set Up Now button on the newly added site.

Ads.txtAds.txt

We will get a pop-up from where we can download the Ads.txt file.

Ads.txtAds.txt

You now have to place the Ads.txt file in the static folder of the project.

static folderstatic folder

After that pushing the changes to github will start the automatic deployment of the site.

Automatic deploymentAutomatic deployment

Once the deployment is complete Optimized will be shown in Ads.txt Settings tab.

Ads.txtAds.txt

My site was rejected by media.net, so i was not able to show Ads from this network.

amazinghami rejectedamazinghami rejected

Now, i though to use other ad network and it is infolink. After logging to there site, i had to give my site name and they also asked to place an ads.txt in the site.

New ads.txtNew ads.txt

So, i added the new ads.txt and pushed it to netlify.

ads.txtads.txt

After waiting for a day, they finally approved my site.

site approvedsite approved

Now, their integration process is very simple. You have to go to Integrate tab and choose the site and take the code.

Integrate tabIntegrate tab

As, from my earlier blog the way to add Ads to a gatsby site is a bit different and here also we need to put the above code in gatsby-ssr.js as below.

gatsby-ssr.jsgatsby-ssr.js

Unlike media.net you don’t need to worry about placing your Ads in infolinks. You do it by the Customize tab.

Customize tabCustomize tab

After this i pushed my code to netlify and it got deployed. Now the Ads are live on https://amazinghampi.com/ . Here you get both floating Ad and also text ads.

Ads on site.Ads on site.

Hope you learned to add Advertisement in your site gatsby site with this article.

This post is also available on DEV.