If you have a blog or self managed website, it is almost given that you are signed up with one of the ad programs (Google's AdSense, Commission Junction, Affiliate programs with Amazon or similar ones). It is easy to manage the code given by these agencies initially but when you have more blog posts it kind of becomes messy and time consuming. For example if you want to change an ad or agency or have your own responsive ad, it is a pain to update all the previous posts when the site is grown to a decent size.
Here in this article, I will walk you through on how to set-up yourself to manage the ads code in central location for easy updates. We will start with a very easy example and then in subsequent articles, will add details about advanced changes.
Original Code from agency that you have within your blog/website page
Now that we have moved the ad code, we need to host the file in an accessible location. One option is to keep it within website files but I will explain the details about hosting it in Github (source management repository). Even though it sounds little complex, it is very easy and you will thank me later.
Go to github.com and signup for a free account if you don't already have one. You will get a verification email and once you verify it you are set with account creation.
Once verification is finished, create a new repository in Github. You would have some similar to the one below. Make sure to select the option 'Initialize this repository with README file'.
Now upload the file we have created in step 1 by choosing 'Upload files' option. If prompted, click on 'commit files' or 'upload files'. Your repository will look like the second image down below.
The next step is to make this file avaialble so that we can access it from our website or blog. Click on 'Settings' option (top right) and scroll down to 'Git Hub Pages' option. Select the source as 'master branch' and click 'Save'.
You should get a confirmation page as image 2 below. That will be your link. So the file we created can be accessed by this link shown in image 2 below.
3. Test your new code
The code is in the right state and place, so you would want to test it our before moving it to your site. The best tool is 'w3schools' to try it out. Click this w3schools link and copy the following code in there. Remove the exisitng content in body tags and replace it with our code below. Make sure to change the URL in src section as per your actual URL.
It will look similar to below. Then click 'Run'. You should have the ad banner displayed on the right hand side area.
4. Update the blog/website page
Once the code is tested and working, move the same to your website/blog. That's it. You have successfully finished first step.
With this, on your blog page, you will always have this piece of code and any changes can be done directly in github rather than updating your site/blog everytime there is code change for ads.
Continue reading next article: Handling multiple options
If you have any comments or suggestion feel free to post them in comments section below.