تشخیص فعال بودن Adblock در مرورگر

ابزارهای adblock به دسته ای از افزونه ها برای مرورگرهای مختلف گفته می شود که توسط کاربران و برای مسدود کردن تبلیغات سایت شما استفاده می شود. طبیعتا اگر شما به عنوان وبمستر تبلیغات را با اندازه مناسب و در صفحات مناسب قرار ندهید، به تجربه کاربری سایت خود ضربه می زنید. از طرفی بسیاری از وبمستران سایت خود را با تبلیغات بیش از حد شلوغ می کنند تا جایی که باعث آزار و اذیت کاربران می شوند.

این مسئله باعث شد عده ای از برنامه نویسان وب به فکر توسعه افزونه هایی به نام ad blocker شوند که امروزه با نام رایج adblock شناخته می شوند. متاسفانه روی دیگر سکه این است که مسدود کردن تبلیغات روی یک سایت باعث ضربه زدن به درآمد مدیران آن سایت می شود. به عبارتی وب سایت هایی که قوانین UX را رعایت نکرده و باعث نصب افزونه های adblock توسط کاربران می شوند، علاوه بر ضربه زدن به درآمد خودشان به دیگر وب سایت ها نیز ضربه می زنند.

همانطور که می دانید هیچ راه حل صد درصدی برای تشخیص تبلیغات نیست و افزونه های adblock نیز نمی توانند صد در صد تبلیغات را مسدود کنند. به همین شکل، ما نیز نمی توانیم وجود تمام افزونه های adblock را تشخیص بدهیم اما روش های وجود دارد که با استفاده از آن ها اکثر این افزونه ها قابل تشخیص هستند.

Ad Blocker ها چطور کار می کنند؟

برای مسدود کردن هر چیزی ابتدا باید متوجه شویم آن چیز چطور کار می کند و افزونه های adblock نیز از این قاعده مستثنی نیستند. این افزونه ها معمولا دو روش برای حذف تبلیغات را دارند:

• روش اول مسدود کردن درخواست شبکه به سورس تبلیغات است.
• روش دوم مخفی کردن تبلیغات نمایش داده شده در صفحه از طریق دستکاری HTML است.

به طور مثال سرویس تبلیغات گوگل، Google Adsense، را در نظر بگیرید. زمانی که شما وب سایتی را باز کنید که از این سرویس استفاده می کند و در عین حال adblock نیز داشته باشید، در بخش console مرورگر خود چنین خطایی را خواهید دید:

یعنی افزونه adblock شما درخواست ارسال شده به سیستم تبلیغات گوگل را مسدود کرده است.

حالت دوم نیز بدین شکل رخ می دهد که افزونه adblock بخش نمایش تبلیغات (مثلا یک div خاص) را هدف گرفته و خصوصیت display آن را روی none می گذارند.

تشخیص مسدود شدن تبلیغات

برای تشخیص حالت بالا (مسدود شدن تبلیغات) می توانیم در هنگام بارگذاری کدهای جاوا اسکریپت از خصوصیت onError استفاده کنیم:

<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="document.dispatchEvent(new CustomEvent('adBlocked'));"></script>

انجام این کار باعث منتشر شدن یک رویداد خاص به نام adblocked در هنگام شکست درخواست بارگذاری فایل adsbygoogle.js می شود. حالا در بخش دیگری از برنامه خود باید به این رویداد گوش کنید تا اگر منتشر شد، صفحه را برای کاربر مسدود کنید یا از او بخواهید adblock خود را غیر فعال کند یا اسکریپت خاص دیگری را برای نمایش تبلیغات اجرا کنید و الی آخر. به ثمال زیر توجه کنید:

document.addEventListener('adBlocked', () => {

    // منطق دلخواه شما برای مدیریت مسدود کننده تبلیغات در اینجا نوشته می شود

    document.querySelector('.adsbygoogle').className = 'ad-fallback';

});

من در مثال بالا فقط کلاس adsbygoogle را به کلاس دیگری به نام ad-fallback تغییر داده ام. حالا می توانیم در بخشی از برنامه چنین کلاسی را تعریف کنیم تا مثلا یک اعلان بزرگ را به کاربر نشان بدهد و از او بخواهد adblock خود را غیر فعال کند.

بیایید به مثال دیگری توجه کنیم. فرض کنید به جای استفاده از تگ های <script> از کدهای جاوا اسکریپت (مثلا یک درخواست fetch) استفاده کرده باشید. در این حالت برای تشخیص وجود adblock می توانید از متد catch استفاده کنید:

fetch('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')

     .catch(() => console.log('Network request failed, adblock is enabled'));

حالا اگر افزونه مورد نظر از انواع افزونه ای بود که استایل بخش تبلیغات را ویرایش می کند چطور؟ در این حالت می توانیم استایل های آن بخش را بررسی کنیم:

if (

  document.querySelector('.adsbygoogle').style.display === 'none' ||

  document.querySelector('.adsbygoogle').style.height === '0px'

) {

    // در این بخش منطق مناسب خودتان را بنویسید.

}

همچنین از روش های دیگر تشخیص adblock ها بدین شکل است که به دنبال تابعی بگردید که از سمت سورس تبلیغات ارسال می شود:

if (typeof __google_ad_urls === 'undefined') {

    // افزونه درخواست شبکه را مسدود کرده است.

}

یا اینکه یک فایل جعلی را به عنوان طعمه ساخته و یک متغیر سراسری را با نامی یکتا در آن تعریف کنید. پس از بارگذاری صفحه بررسی کنید که آیا چنین متغیری وجود دار یا خیر؟ اگر وجود نداشت یعنی افزونه های adblock آن فایل را مسدود کرده اند.

وثاقت این روش ها

استفاده از هر کدام از این روش ها خوبی و بدی های خودش را دارد. استفاده از خصوصیت onerror در تگ های script از دیگر روش ها قابل اعتماد تر است البته به شرطی که سورس تبلیغات شما یا از خودتان باشد یا از شرکتی باشد که سرور هایش دچار مشکل نمی شوند در غیر این صورت این روش نیز به نوبه خودش مشکلاتی را خواهد داشت. مثلا اگر سرور های سورس تبلیغات شما خراب باشند باز هم بخش onError به اشتباه فعال شده و به کاربر می گوید adblock خود را غیر فعال کند در حالی که این موضوع هیچ ارتباطی به adblock ندارد.

بررسی خصوصیات CSS نیز تنها به شرطی مناسب است که مطمئن باشید استایل های آن بخش از سایت خود را با جاوا اسکریپت تغییر ندهید. استفاده از توابع یا متغیر های سراسری نیز وابسته به فایل های خارجی است که از نظر سرعت و ارسال درخواست های متعدد به شبکه مناسب نیست.

سعی کنید از این مقاله به شکلی استفاده کنید که حقوق کاربران را پایمال نکند.

منبع: وب سایت webtip