gatsby-tutorials (21 Part Series)
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
It will show the pop-up in which you have to enter the domain name, average daily traffic and current AD revenue.
After we press on Submit button, it will show the status as Pending.
Next, move to the Ads.txt Settings tab. Here click on the Set Up Now button on the newly added site.
We will get a pop-up from where we can download the Ads.txt file.
You now have to place the Ads.txt file in the static folder of the project.
After that pushing the changes to github will start the automatic deployment of the site.
Once the deployment is complete Optimized will be shown in Ads.txt Settings tab.
My site was rejected by media.net, so i was not able to show Ads from this network.
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.
So, i added the new ads.txt and pushed it to netlify.
After waiting for a day, they finally approved my site.
Now, their integration process is very simple. You have to go to Integrate tab and choose the site and take the code.
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.
Unlike media.net you don’t need to worry about placing your Ads in infolinks. You do it by the Customize 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.
Hope you learned to add Advertisement in your site gatsby site with this article.