• امروز،

محتوای رایگان به شرط تبلیغات!

ارسال شده در وبلاگ‌نویسی - توسط محسن در دوشنبه، ۲۷ام مرداد ۱۳۹۳ با ۴ دیدگاه

برای بسیاری از وبلاگ‌نویس‌هایی که محتوای خود را به رایگان برای عموم منتشر می‌کنند، تبلیغات نقش کلیدی در کسب هزینه‌های مورد نیاز برای ادامه کارشان ایفاء می‌کند.
اما متأسفانه بعضی از برنامه نویسان به این مسئله کم توجهی می‌کنند و سعی بر تولید نرم‌افزارها و یا افزونه‌هایی دارند که تبلیغات را بطور کلی در وبسایت‌ها حذف می‌کند! استفاده یا تولید این محصولات برای حذف تبلیغات هم می‌تواند کار درستی باشد و هم نادرست.

Ad-blocker

آیا استفاده از برنامه‌های AdBlocker کار درستی است؟
این موضوع از دو دیدگاه مورد بررسی قرار می‌گیرد؛
اول از دید مدیر سایت که تبلیغات را برای ادامه کار خود ضروری می‌داند و باید منبعی برای کسب درآمد در وبسایت خود داشته باشد. مسلماً چنین شخصی در قبال زحماتی که برای انتشار و جمع‌آوری مطالب برای وبسایت خود می‌کشد توقع دارد تبلیغات برای بازدید کنندگان به نمایش درآید تا از این طریق سودی بابت هزینه میزبانی و یا حقوق نویسندگان سایت خود داشته باشد.
بسیاری از سایت‌های بزرگی که محتوای رایگان ارائه می‌دهند مانند دانشنامه ویکی‌پدیا به همین مقدار راضی نیستند که محتوایی ناخالص و همراه با تبلیغات ارائه دهند. اما این مسئله نمی‌تواند برای همه وبلاگ‌نویسان یکسان باشد.
دیدگاه دوم از دید یک کاربر و خواننده وب است که سعی در مدیریت ترافیک و پهنای باند خود دارد و علاقه‌ای به مشاهده تبلیغات و یا بازشدن صفحات مزاحم در مرورگر خود ندارد لذا سعی در مسدود کردن آن‌ها می‌نماید.

نرم‌افزارها، ترفندها و افزونه‌های بسیاری برای مسدود کردن تبلیغات وجود دارد ولی آیا روشی مؤثر برای غیرفعال کردن آن‌ها (AdBlockerها) برای وبمستر وجود دارد یا خیر؟؟

شناسایی AdBlocker توسط JQuery
وبسمتر یا وبلاگ‌نویس این حق را دارد که محتوای خود را برای کاربرانی ارائه دهد که تبلیغات وبسایتش را مسدود نمی‌کنند. در ادامه شما را با کدهایی آشنا خواهیم کرد با بکارگیری آن در وبسایت یا وبلاگ خود قادر خواهید بود Adblocker ها را شناسایی کرده و مسدود نمایید؛

شروع کار
در ابتدا باید بفهمیم که یک AdBlocker چگونه کار می‌کند و از چه الگوریتمی برای شناسایی و حذف تبلیغات استفاده می‌کند؛
برای اینکار ما یک تگ div با کلاس ads ساختیم که داخل این تگ یک عکس قرار داده‌ایم. ولی اگر از افزونه‌های AdBlocker استفاده می‌کنید هیچگاه نمی‌توانید محتوای این تگ را در وبسایت ببینید، چرا مثلاً تگ div با کلاس ads یک تبلیغ محسوب می‌شود!

<div class="ads">
     <img src="images/ads.jpg" height="250" width="300" alt="">
</div>

در مرورگر کروم می‌توانید خطای بارگذاری عکس را در کنسول مرورگر مشاهده نمایید

add-blocked2

علاوه بر آن افزونه نصب شده برای مسدود کردن تبلیغات، یک تگ display:none به تصاویر اضافه می‌کند

display-none

خوب، حالا ما می‌دانیم که AdBlocker چگونه مانع نمایش تبلیغات در سایت می‌شود و حالا قادر خواهیم بود با چند خط کد اسکریپت ساده پیغامی را هنگامی که AdBlocker فعال می‌شود برای کاربر نمایان کنیم.

کد اسکریپت
چند روش برای اینکار وجود دارد، می‌توانیم با یک کد JQuery ساده چک کنیم که به تصاویر تبلیغاتی سایتمان تگ display:none اضافه شده است یا خیر. با همین کد ساده می‌توانیم پیغامی برای کاربر نمایان کنیم؛

function appendMessage() {
    var div = $('<div>').attr('id', 'message').text('Ad block is active');
    var add = $('body').append(div);
}

کد بالا یک تگ div با پیغام “AdBlocker is active” برای کاربر نمایان می‌کند.

یک روش دیگر استفاده از کد JavaScript می‌باشد، به اینصورت که ما با کد تعریف می‌کنیم که اگر تصویری با تگ display:none یافت شد، تابع appendMessage() اجرا شود.

setTimeout(function(){  
    if($('img').css('display') == "none") {  
    appendMessage();  
    }  
}, 500);

setTimeout در کد بالا به افزونه اجازه اجرا شدن می‌دهد تا بتوانیم به این وسیله آن را شناسایی کرده و پیغام خود را بجای آن در سایت نمایش دهیم. این کد بعد از اعمال display:none عمل خواهد کرد.

کد کامل:

$(document).ready(function() {  
    function appendMessage(argument) {  
        var div = $('<div>').attr('id', 'message').text('Ad block is installed and active. Please support us by disabling it.');  
        var add = $('body').append(div);  
    }  
    setTimeout(function(){  
        if($("img").css('display') == "none") {  
            appendMessage();  
        }  
    }, 500);  
});
نمایش ۴ دیدگاه
نظر بدهید!

  1. hesam گفت:

    عالییییییییییییییییییییییی
    خوب بود

  2. نیما گفت:

    خییییییییییییییییییییییییییییییییییلی ممنون مرسی واقعا بدردم خورد مخصوصا تحلیل مربوط به کد

  3. فوق العاده بود این مطلب
    لایک محسن جان



نظر بدهید