Display Blog Ads Spots in Random Order

Share this article

To make it fair for everyone who has signed up a jQuery ad on the blog I have wrote a nifty little function to load the ads in a random order
. There is also a shuffle button as a demo for creating a random shuffle on the ad spots manually. This function could be made more customisable but does the job. Try it out for yourself (look at the right sidebar!). jquery-blog-ads

The code

//Function to display ads on the jQuery Blog and shuffle
(function($)
{
   var displayAds = {

       ads: {
           1: {
                title: "jQuery UI Widgets for PC, Mobile and Touch devices",
                href: "http://www.jqwidgets.com",
                img: "jqwidgets.png"
           },
           2: {
                title: "jQuery Chop Slider 2.0 - The most eye catching image slider on the internet!",
                href: "http://www.idangero.us/cs/",
                img: "idangerous.jpg"
           },
           3: {
                title: "Sauce Labs - Online Cross Browser Testing",
                href: "http://www.saucelabs.com/scouthome?utm_source=banner&utm_medium=flat&utm_campaign=all+all+banner+jquery4u",
                img: "sauce-labs.jpg"
           },
           4: {
                title: "Diamond Slider - Ken Burns Effect & Unlimited Transitions",
                href: "http://www.diamond.billykids-lab.net/",
                img: "diamond-slider.jpg"
           },
           5: {
                title: "AJAX Zoom - jQuery Dynamic 2d/360 Degrees Zoom with ipad support.",
                href: "http://www.ajax-zoom.com",
                img: "ajax-zoom.jpg"
           }
       },

       signupAd: {
           title: "Advertise here",
           href: "http://www.jquery4u.com/advertise/"
       },

       shuffleAds: function(arr)
       {
          for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
          return arr;
       },

       load: function()
       {
           $('#shuffle-ads').hide();
           var adContainer = $('#jq4u-sidebar-ads').empty(), adsArray = Array();

           /* construct ads */
           $.each(this.ads, function(i,v)
           {
                adsArray.push('<a rel="nofollow noopener" target="_blank" href="' + v.href + '"><div class="jq4uadbox"><img title="' + v.title + '" alt="' + v.title + '" src="https://www.jquery4u.com/images/ads/' + v.img + '"/></div></a>');
           });

           /* shuffle ads in random order */
           adsArray = this.shuffleAds(adsArray);

           /* output ads */
           $.each(adsArray, function(i,v)
           {
              adContainer.append(v);
           });

           /* add the signup ad */
           adContainer.append('<a href="' + this.signupAd.href + '"><div class="jq4uadvertisebox">' + this.signupAd.title + '</div></a>');

           /* show shuffle button */
           adContainer.append('<a href="#" id="shuffle-ads">Shuffle</a>');
           $('#shuffle-ads').live('click', function(e)
           {
              e.preventDefault();
              displayAds.load();

           });
           $('#shuffle-ads').show();
       }
   }

   $(document).ready(function() {
      displayAds.load();
   });

})(jQuery);

Frequently Asked Questions about Displaying Blog Ads in Random Order

How can I display blog ads in a random order on my website?

Displaying blog ads in a random order can be achieved by using a random function in your website’s code. This function will randomly select an ad from your ad pool each time the page is refreshed. This method ensures that all ads get equal exposure and can help to increase click-through rates. It’s important to note that this method requires some knowledge of coding and may not be suitable for beginners.

What are the benefits of displaying blog ads in a random order?

Displaying blog ads in a random order can have several benefits. Firstly, it ensures that all ads get equal exposure, which can help to increase click-through rates. Secondly, it can make your website appear more dynamic and engaging, as the ads will change each time the page is refreshed. Lastly, it can help to prevent ad fatigue, where users become less responsive to ads they see repeatedly.

Can I use a plugin to display blog ads in a random order?

Yes, there are several plugins available that can help you to display blog ads in a random order. These plugins can be a great option if you’re not comfortable with coding. They offer a user-friendly interface and can be easily configured to suit your needs. However, it’s important to choose a plugin that is well-reviewed and regularly updated to ensure it’s secure and reliable.

How can I track the performance of my blog ads?

Tracking the performance of your blog ads is crucial to understanding which ads are most effective. You can use tools like Google Analytics to track click-through rates, impressions, and conversions. This data can help you to optimize your ad strategy and increase your revenue.

Can I display blog ads in a random order on any blogging platform?

The ability to display blog ads in a random order will depend on the blogging platform you’re using. Some platforms, like WordPress, offer a lot of flexibility and allow you to customize your website’s code or use plugins. Other platforms may not offer this level of customization. It’s important to research your chosen platform’s capabilities before deciding on your ad strategy.

How can I ensure my blog ads are relevant to my audience?

Ensuring your blog ads are relevant to your audience can be achieved by carefully selecting your ad pool. You should aim to include ads that are related to your blog’s content and will be of interest to your readers. This can help to increase click-through rates and conversions.

How can I prevent ad fatigue?

Ad fatigue can be prevented by regularly updating your ad pool and displaying ads in a random order. This ensures that your users are not seeing the same ads repeatedly, which can lead to decreased responsiveness.

Can I control the frequency of each ad?

Controlling the frequency of each ad can be more challenging when displaying ads in a random order. However, some plugins may offer this functionality. It’s important to research your chosen plugin’s capabilities before deciding on your ad strategy.

How can I optimize my blog ads for mobile devices?

Optimizing your blog ads for mobile devices can be achieved by ensuring your ads are responsive. This means they will automatically adjust to fit the screen size of the device they’re being viewed on. This can help to improve user experience and increase click-through rates.

Can I display blog ads in a random order without coding knowledge?

Yes, there are several plugins available that can help you to display blog ads in a random order without any coding knowledge. These plugins offer a user-friendly interface and can be easily configured to suit your needs. However, it’s important to choose a plugin that is well-reviewed and regularly updated to ensure it’s secure and reliable.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQuery
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week