2

現在、私はレスポンシブ Web 開発を行っています。Web サイトは完全にレスポンシブですが、iframe を使用して Web サイトに広告を含めました。一部の広告は、ランチャー広告やサイドキック バナー広告のようなものです。これらの動的広告は、iFrame が原因で期待どおりに機能しません。

例えば、

$(window).resize(function() {
  $('.rad').each(function(index) {
    var role = $(this).find("div").attr('role');
    if($(this).hasClass('fullwidth-ad')){   
      if(($(this).width() >= 234)&&($(this).width() < 486)) {   
        if(role != 'mobile_leaderboard_ad'){
          $(this).find("div").attr('role','mobile_leaderboard_ad');
          $(this).find("div").attr('class','fix-bottom');                               
          $(this).find("iframe").attr('src','/sites/all/libraries/rad/rad.php?r=mobile_lb');
        }
      } 
      else if(($(this).width() >= 486)&&($(this).width() < 610)) {                              
        if(role != 'banner_ad'){    
          $(this).find("div").attr('role','banner_ad');
          $(this).find("div").attr('class','banner_ad');
          $(this).find("iframe").attr('src','/sites/all/libraries/rad/rad.php?r=tablet_lb');
        }
      } 
      else if($(this).width() >= 610) {                             
        if(role != 'leaderboard_ad'){   
          $(this).find("div").attr('role','leaderboard_ad');
          $(this).find("div").attr('class','leaderboard_ad');
          $(this).find("iframe").attr('src','/sites/all/libraries/rad/rad.php?r=desktop_lb');
        }
      }
    }               
  });
});

では、レスポンシブ Web デザインに広告を含めるより良いアイデアはありますか?

4

2 に答える 2

3

レスポンシブ デザインの広告は確かに面倒です。実際、一部の広告ネットワーク (Google AdSense など) では、ページに広告をリロードできないため、レスポンシブ デザインを適切に処理することがまったくできません! IAB はおそらくそれに取り組んでいます。(私の意見では、10 年遅すぎます。技術のビジネス面が追いつくことができれば、それは確かに素晴らしいことです。)

私がお勧めするのは、メディアクエリ CSS を作成して、必要に応じて広告を含む div を表示/非表示にすることです。次に、ページのサイズが変更されたときに実行される JavaScript コードを用意します。このコードは次のようになります。

  1. 広告スロットに関連付けられた要素を取得する
  2. これらの要素が に設定されているかどうかを確認しdisplay: noneます。
  3. まだ広告が含まれていない場合は、これらのスロットに新しい広告を設定します

また、ページのサイズ変更をレート制限することもできます。ページのサイズが変更されるたびにリセットされる 500 ミリ秒程度のタイムアウトを使用します。そうすれば、誰かがブラウザの境界線をドラッグしても、広告が 1000 倍リロードされることはありません。

于 2013-03-11T03:43:37.963 に答える
0

シームレスな iframe が必要です。disqus はこの手法を使用しており、非常に巧妙です。ここにプレゼンテーションがありますhttp://benvinegar.github.com/seamless-talk/#/しかし、スライド33に細心の注意を払いたいと思うでしょうhttp://benvinegar.github.com/seamless-talk/#/ 33

于 2013-03-11T04:13:16.793 に答える