How to Display Random Affiliate Banner Ads Without Plugin?

How to Display Random Affiliate Banner Ads Without Plugin - Know Online Marketing

Spread the Love :)
  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
    1
    Share

Random Affiliate Banner Ads Without Plugin

In this article, let us show you How to Display Random Affiliate Banner Ads Without Plugin. You may have your website on WordPress, Blogger or any other platform. It will work on any platform. Because we are just going to use a simple jQuery code snippet.

Instead of using a plugin for such operations, we highly recommend you to use codes wherever possible. Because installing plugins will slow down your website speed. Since the plugins will add a bundle of codes to your website’s source code.

The best way for affiliate marketers

If you are an affiliate marketer, this will help you to display affiliate banner ads randomly. You may have registered with more number of affiliate programs and unable to show all the banners.

Users will get bored when you keep showing the same banner ad whenever they are visiting your website or blog. We can’t say every visitor visits your website will have the same interest, thought or plan. So, showing the same banner may lead to reduce the number of conversions.

Related Artcle: 10 Useful Tips to Get Google AdSense Approval Fast

Display Random Affiliate Banner Ads

In this method, users will see different banner ads whenever they refresh the page or navigate between different pages and posts. The random banners can be integrated wherever you need on your blog. It can also be any size.

The same affiliate banner ads will show frequently when you have less number of banners implemented. You will get this method very easily if you have basic knowledge of HTML, CSS, JavaScript and jQuery.

Let’s start how to do this,

Steps to Display Random Affiliate Banner Ads

Step 1

Create an HTML <div> element with the class affads as shown below,

<div class="affads"></div>
<div class="affads"></div>
<div class="affads"></div>

You can duplicate the same element many times as much as you want. For instance, I have created 3 elements. Because, I’m going to use 3 banner ads on my website.

Place the above elements at 3 places wherever you want. For instance,

  1. Top sidebar
  2. In-article
  3. Footer

Also Read: Social Media Marketing Strategies

Step 2

Open the notepad, notepad++ or any other text editor, then copy-paste the below code. Save the file with ‘.js‘ extension. For instance, ‘myaffiliate.js

$imgs = [];
$links = [];
$imgs.push("IMAGE_LINK_1");
$imgs.push("IMAGE_LINK_2");
$imgs.push("IMAGE_LINK_3");

$links.push("AFFILIATE_LINK_1");
$links.push("AFFILIATE_LINK_2");
$links.push("AFFILIATE_LINK_3");

$(document).ready(function() {
    for ($i = 0; $i < $(".affads").length; $i++) {
        $randnum = Math.floor((Math.random() * $imgs.length - 1) + 1);
        $(".affad")[$i].innerHTML = "<center><a href=" + $links[$randnum] + " target=_blank><img src=" + $imgs[$randnum] + "></a></center>";
    }
});
  • IMAGE_LINK: It is the direct link to your banner. You can get the link when you download the banner images from your affiliate dashboard and upload them to your hosting directory or you can get the link directly from their dashboard or from the code snippet they provide.
  • See the image example below,
https://resources.infolinks.com/static/referral-banners/300X250/Creative2-300X250.jpg
  • AFFILIATE_LINK: It is the landing page link where you want to take the users to once they clicked the banner ad. Usually, you can get the link from your affiliate dashboard.
  • See the link example below,
http://www.infolinks.com/join-us?aid=3189202

Here we have shown code for 3 random banner ads. But you can include as many as you want by just duplicating the lines as shown below,

$imgs.push("IMAGE_LINK_1");
$imgs.push("IMAGE_LINK_2");
$imgs.push("IMAGE_LINK_3");
$imgs.push("IMAGE_LINK_4");
$imgs.push("IMAGE_LINK_5");
$imgs.push("IMAGE_LINK_6");

$links.push("AFFILIATE_LINK_1");
$links.push("AFFILIATE_LINK_2");
$links.push("AFFILIATE_LINK_3");
$links.push("AFFILIATE_LINK_4");
$links.push("AFFILIATE_LINK_5");
$links.push("AFFILIATE_LINK_6");

Make sure that you are using the image and landing page links in the same order. For instance, If you are using Infolinks image in the first line instead of IMAGE_LINK_1, you must use the Infolinks landing page URL in the same order instead of AFFILIATE_LINK_1.

You May Like: Poptin Popup Maker

Step 3

Once you saved the file as ‘myaffiliate.js‘, upload the file to your any hosting directory and get the link of the file as shown below,

https://knowonlinemarketing.com/Blog/myaffiliate.js

So that you can access the uploaded file.

Step 4

Once got the ‘myaffiliate.js‘ link, add this link to the acript tag as shown below,

<script src="https://knowonlinemarketing.com/Blog/myaffiliate.js"></script>

Add the above <script> line between your <head> tags. You can add this in 2 ways,

  1. Navigate to Appearance -> Theme Editor -> Theme Header (header.php) and paste the code immterediately after <head> as shown below,
<head>
<script src="https://knowonlinemarketing.com/Blog/myaffiliate.js"></script>
  1. Install a plugin like Header and Footer scripts and add the above <script> in the header section in the plugin.

That’s all! You are done now!

Try refreshing your pages and navigate between your pages and posts to see the random affiliate ads.

You Might Be Interested In: How to find IP with IP Find API?

Live Demo to Display Random Affiliate Banner Ads

Here’s a live demo of the above-shown code. This will help you better understand the logic visually.




Suggested Article 1: Free Digital Marketing Course by Google

Suggested Article 2: eMarketing Institute FREE Certification Courses

Heads up to Display Random Affiliate Banner Ads

  1. We used jQuery to implement the code. So make sure to include the below jQuery CDN within the <head> tag. Ignore if it’s already added.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
  1. If you are facing any error or the method isn’t working. You can use the below alternate JavaScript code. You don’t need to add the jQuery CDN for this code.
var imgs = [];
var links = [];
imgs.push("IMAGE_LINK_1");
imgs.push("IMAGE_LINK_2");
imgs.push("IMAGE_LINK_3");

links.push("AFFILIATE_LINK_1");
links.push("AFFILIATE_LINK_2");
links.push("AFFILIATE_LINK_3");

window.addEventListener('load', function(){
    for (var i = 0; i < $(".affads").length; i++) {
        var randnum = Math.floor((Math.random() * imgs.length - 1) + 1);
        document.getElementsByClassName("affads")[i].innerHTML = "<center><a href=" + links[randnum] + " target=_blank><img src=" + imgs[randnum] + "></a></center>";
    }
});
  1. Whenever you have additional affiliate ads, you can go ahead and add the images and links in the ‘myaffiliate.js‘ file.
  2. The above is just for the 300×250 banner. In the same way, you can adjust the code for all the banners you want.
  3. Still, this can be optimized further. You can show different ads on desktop and mobile.

If you have any queries on adding the code for other sizes or any other questions write to us at ‘admin@knowonlinemarketing.com‘. Or you can comment below so that we can get your queries answered.

Before You Leave: Namecheap Logo Maker

FAQ (Frequently Asked Questions)

How to Display Random Affiliate Banner Ads?

We can display random affiliate banner ads with a small code snippet as shown in this article.

How many affiliare banner ads can be added?

You can add multiple affiliate banner ads.

Is it possible to display random affiliate ads?

Absolutely possible! We can write simple code to show random affiliate banner ads on our website or blog.

Can we display random affiliate ads without a plugin?

Yes! We can display random affiliate banner ads without any plugin. It can be implemented for any of the platforms like WordPress, Blogger, etc.,

Can we add the random affiliate banner ads anywhere on the website?

Yes, of course! We can add the random affiliate banner ads anywhere on the site like header, in-article, sidebar, footer, etc.,

About the author

Kavinkumar Subramani

Kavinkumar Subramani

Digital-Tech Blogger

Kavin is a passionate blogger from Know Online Marketing. He publishes insightful and value-added articles and infographics on online marketing, blogging, WordPress, hosting and domain, web design/development, digital tools, online courses, and more.


Spread the Love :)
  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
    1
    Share

Leave a Reply

Your email address will not be published. Required fields are marked *