How do we Show Different Ads Based on the User's Device? Dynamical Ad Unit Inserting

Danil Persky
Danil PerskyHead of Customer Support
Updated: 25 September 2023
How do we Show Different Ads Based on the User's Device?  Dynamical Ad Unit Inserting

You can use this guide if you have two ad units of different sizes and want to show a particular banner based on your visitors' screen.

💡 Note that the range for desktop screens is 1920-429, and for mobile screens is 428-0. Let's say that we want to implement two ad units: one for desktop devices (size 728x90) and another for mobile devices (size 300x250).

  1. Firstly, you need to create ad units. If you haven't done it yet, you may follow the steps in our
    Helpdesk article

❗ If you show only one of the ad units on mobile devices, you need to change the Screen type to "Mobile" in ad unit settings. To do so, go to the ad unit page ⇒ click "Edit," ⇒ change the Screen type.

  1. After that, you need to insert into your HTML the "div" block with the class "banner-iframe-selector" that contains ad units:
<div class="banner-iframe-selector">
    <div class="banner-iframe" data-src="" data-max-width="467"></div>
    <div class="banner-iframe" data-src=""></div>
  1. Finally, you should insert the script that will show the ad based on the user's screen size:
    document.addEventListener('DOMContentLoaded', () => {
        const addIframe = (src, width, height, aa) => {
            const iframe = Object.assign(document.createElement('iframe'), {
                src, width, height, frameBorder: 0
            iframe.setAttribute('data-aa', aa);
            return iframe;

        const updateBanner = () => {
            const bannerDivs = document.querySelectorAll('.banner-iframe-selector .banner-iframe');
            bannerDivs.forEach(div => = 'none');

            for (const div of bannerDivs) {
                const maxWidth = parseInt(div.getAttribute('data-max-width'));
                const src = div.getAttribute('data-src');
                const aaMatch = src?.match(/\/(\d+)\?/), sizeMatch = src?.match(/size=(\d+)x(\d+)/);

                if (aaMatch && sizeMatch && (window.innerWidth <= maxWidth || !maxWidth)) {
                    const [_, aa] = aaMatch, [__, width, height] = sizeMatch;
                    div.innerHTML = '';
                    div.appendChild(addIframe(src, width, height, aa));
           = 'block';

        window.addEventListener('resize', updateBanner);

  1. Done! Now, you can check it using different devices!!
Background image
Background image
Discover value
of crypto ads
Boost your crypto project or earn
bitcoin on your traffic
Become a partner
Also read related articles
Background image

Get more paying customers

  • CPD, CPA and Revenue sharing models
  • Global audience coverage
  • Payments using various cryptocurrencies
Become an advertiser

Earn crypto on your website

  • Simple HTML code embeddable in any website
  • We don't collect your users' personal data
  • Transparent payouts and live statistics
Become a publisher