Отображение различных баннеров на мобильных и десктопных устройствах

💡 Несмотря на то что наши баннеры не подстраиваются под тип устройства, вы можете легко настроить показ различных размеров рекламы в зависимости от устройства. Этот простой CSS-трюк покажет вам, как это сделать.

Во-первых, вам нужно добавить CSS в <head> страницы:

<style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>

В этом коде указывается, что если класс элемента является .mobileShow, он должен отображаться только на мобильных устройствах, а .mobileHide должен быть доступен только для десктопных устройств.

Затем просто добавьте элементы <div> и ваш рекламный код Adsterra в тело страницы:

<div class="mobileShow"> Your code snippet for mobile </div>

<div class="mobileHide"> Code snippet for desktop only </div>

Например, вы можете переключаться между 728 x 90 и 320 x 50 баннерами.

Вот как выглядит обычная HTML-страница:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <title>Hello World!</title>

    <meta name="robots" content="index,follow" />
    <meta property="og:title" content="Hello World!" />
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />


    <style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>
  </head>
  <body>
    <!-- the wrapper and content divs set margins and positioning -->
    <div class="wrapper">
      <div class="content" role="main">
        <!-- this is the start of content for our page -->
        <h1 class="title">Hello World!</h1>

      </div>
     <div class="mobileShow">
<script type="text/javascript">
	atOptions = {
		'key' : '0303d891ce479628509ef2972f7239d6',
		'format' : 'iframe',
		'height' : 300,
		'width' : 160,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/0303d891ce479628509ef2972f7239d6/invoke.js"></scr' + 'ipt>');
</script> </div> 
      <div class="mobileHide"> <script type="text/javascript">
	atOptions = {
		'key' : 'd6744e6de34f83085d99817829bdfc87',
		'format' : 'iframe',
		'height' : 90,
		'width' : 728,
		'params' : {}
	};
	document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://wizardunstablecommissioner.com/d6744e6de34f83085d99817829bdfc87/invoke.js"></scr' + 'ipt>');
</script></div>
    </div>

  </body>
</html>

https://mobile-desktop-adsterra.glitch.me/

WordPress

Этот приём работает и на вашем WordPress сайте. Во-первых, вам нужно будет добавить классы CSS в файл CSS:

Перейдите в раздел Appearance и выберите Theme Editor
Найдите "Stylesheet" слева
Прокрутите до нижней части файла и вставьте:

.mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { d

4. Нажмите Update file

Затем просто добавьте элементы <div> и коды Adsterra в тело любой страницы:

<script type="text/javascript">
your adsterra code for mobile
 </div> 
<div class="mobileHide"> <script type="text/javascript">
your adsterra code for desktop
</div>

Вот пример из header.php файла:

Blogger

Ваш Blogger веб-сайт также позволяет использовать этот приём. Как и в случае с WordPress, сначала добавьте CSS:

Перейдите к Theme из меню слева
Нажмите на выпадающий список рядом с пунктом Customize и выберите Edit HTML
Вставьте CSS в <head>:

<style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>

4. Нажмите Save в правом верхнем углу.

Теперь вы можете использовать оба класса в любом месте. Например, для отображения различных баннеров в заголовке:

Перейдите в раздел Layout из меню слева
Нажмите "Add a Gadget", выберите "HTML/JavaScript" из списка
Вставьте следующий код вместе с рекламным кодом:

<div class="mobileShow">
<script type="text/javascript">
your adsterra code for mobile
 </div> 
<div class="mobileHide"> <script type="text/javascript">
your adsterra code for desktop
</div>

4. Нажмите Save в правом верхнем углу

Проверьте, работает ли всё как нужно

Chrome Dev Tools позволяет проверить, как выглядит ваш сайт на разных устройствах.

Откройте свой веб-сайт, щелкните правой кнопкой мыши в любом месте страницы и выберите "Просмотреть код"; откроется панель инструментов Chrome Dev Tools
Нажмите Toggle Device Toolbar в правом верхнем углу панели
Выберите мобильное устройство из выпадающего списка