Advertisement

JavaScript Code To Run Different Image Ads on Page Load

Hello friends, It is possible that you may have products to display on your website's advertising area. It is easy to create a single clickable image banner ad code for your affiliate product, but "what if you want to show different image banner every time user loads your website page?"

Run Different Image Ads on Page Load

If you want to show multiple banner images in one advertising spot, what you can do is you can set multiple clickable affiliate image banners instead of showing only one and swap them randomly with the help of JavaScript. By that way, every time your website visitor will see different banner ad.

Why Its Good To Show Different Banner Images?

It is better to show different advertise or affiliate products to your website as it increases the chances of conversion. 

A person visiting your website already sees the banner ad and if he is not interested, he will never click on that banner, no matter how many times he visits your website.

But if you have set multiple product banners, then it is possible that he will be interested on the next or the other next product. This will increase the conversion rate of your affiliate products.

What Below HTML/JavaScript Code Does?

By using this code you can set multiple clickable product images instead of one and those all images appear randomly on a single ad spot whenever user loads that webpage. 

By that way you do not have to fill all areas of your website to show all of your affiliate product ads. You can just show all of them randomly in only one advertising spot.

Example of This Code:
Advertisement

You can see in above example, that whenever you reload this page, the banner image will be different. 

JavaScript Code To Run Personal Image Ads

Code:
<script type="text/javascript">
//store the quotations in arrays
var images = [],
index = 0;

images[0] = "<a href='YOUR_PRODUCT_URL' rel='nofollow' target='_blank'><img src='YOUR_IMAGE_URL' width='300' height='250' alt='Classic Musical Instruments' border='0'/></a>";

images[1] = "<a href='YOUR_PRODUCT_URL' rel='nofollow' target='_blank'><img src='YOUR_IMAGE_URL' width='300' height='250' alt='Drum Pad Classic' border='0'/></a>";

images[2] = "<a href='YOUR_PRODUCT_URL' rel='nofollow' target='_blank'><img src='YOUR_IMAGE_URL' width='300' height='250' alt='QR Code Reader' border='0'/></a>";

images[3] = "<a href='YOUR_PRODUCT_URL' rel='nofollow' target='_blank'><img src='YOUR_IMAGE_URL' width='300' height='250' alt='QR Code Reader' border='0'/></a>";

//add-more-banners-here

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done
</script>

How To Implement This Code?

In above code I have added banner images of only 4 products, but you can add as many as you want. But keep in mind that if you use too many banner images, it will slower down your web page.

To use this code follow the following steps:

Step 1: First you have to replace "YOUR_PRODUCT_URL" with actual URL of your banner image product.

Step 2: After that, you have to replace "YOUR_IMAGE_URL" with actual URL of your corresponding product image.

Step 3: If you want to add more banner images, you have to add following line before "//add-more-banners-here".

images[4] = "<a href='YOUR_PRODUCT_URL' rel='nofollow' target='_blank'><img src='YOUR_IMAGE_URL' width='300' height='250' alt='QR Code Reader' border='0'/></a>";

keep increasing image number as in above example I have increased it to "4".

Conclusion: This code can be used in any website even in blogger website. Hope this will help you to run personal image ads on your website or blog.

Post a Comment

0 Comments