James Bachini

How to display different banners for mobile

How to display different banners for mobile 1

I had a situation where I wanted to use different ad banners depending on the screen size of the visitor. To display different banners for mobile and desktop traffic.

What I wanted was a dynamic ad block that displayed different ads depending on the width of the browser window so it wouldn’t mess up the mobile responsive version of the website.

The following is a simple piece of Javascript which will display one 300×100 banner if the screen is less than 800px wide (mobiles) and a full 728×90 banner if the screen is more than 800px wide.

<div id="banner-container"></div>
<script>
  var docWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  if (docWidth >= 800) {
    document.getElementById('banner-container').innerHTML = `<a href="https://affiliatelink1.com" ><img src="banner1.jpg"></a>`;
  } else {
    document.getElementById('banner-container').innerHTML = `<a href="https://affiliatelink2.com" ><img src="banner2.jpg"></a>`;
  }
</script>

Notice the use of backticks “, this is ES6 Javascript which makes multi-line addition and variable insertions much easier. Note that this wouldn’t be compatible with really old browsers such as Internet Explorer.

The reason I wanted to change the banners was because for some reason Adsense earnings for a gambling related site I owned were ridiculously low. <£1 eCPM. I’m not sure why, perhaps a bad quality score or just Adsense isn’t effective for the vertical. Anyway I changed the links out to SkyBet Affiliate Hub and Ladbrokes Partners and am expecting 10x the eCPM’s in this niche.

mobile-desktop-banner

Get The Blockchain Sector Newsletter, binge the YouTube channel and connect with me on Twitter

The Blockchain Sector newsletter goes out a few times a month when there is breaking news or interesting developments to discuss. All the content I produce is free, if you’d like to help please share this content on social media.

Thank you.

James Bachini

Disclaimer: Not a financial advisor, not financial advice. The content I create is to document my journey and for educational and entertainment purposes only. It is not under any circumstances investment advice. I am not an investment or trading professional and am learning myself while still making plenty of mistakes along the way. Any code published is experimental and not production ready to be used for financial transactions. Do your own research and do not play with funds you do not want to lose.


Posted

in

by