Detect Adblocker in JS

مقدمة#

في عالم تطوير الويب الحديث، أصبح اكتشاف وجود مانع الإعلانات (Adblocker) أمراً ضرورياً للعديد من المواقع. قد تحتاج إلى معرفة ما إذا كان المستخدم يستخدم مانع إعلانات لأسباب مختلفة:

التحقق من الاتصال بالأنظمة الخارجية
تتبع تفاعلات المستخدمين
ضمان عمل وظائف الموقع بشكل صحيح
تقديم تجربة مستخدم بديلة عند اكتشاف مانع الإعلانات

طرق اكتشاف مانع الإعلانات#

1. استخدام JavaScript onError Callback#

هذه الطريقة تعتمد على محاولة تحميل ملف خارجي معروف أنه سيتم حظره بواسطة مانع الإعلانات.

<!-- إضافة السكريبت في الـ head -->
<script
  async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  onerror="handleAdBlockDetection();"
></script>

<!-- إضافة عنصر لعرض الرسالة -->
<div id="adblock-message" class="hidden">
  <div class="alert alert-warning">
    <h4>تم اكتشاف مانع إعلانات!</h4>
    <p>من فضلك قم بتعطيل مانع الإعلانات لضمان عمل جميع ميزات الموقع بشكل صحيح.</p>
  </div>
</div>

// دالة التعامل مع اكتشاف مانع الإعلانات
function handleAdBlockDetection() {
  const message = document.getElementById('adblock-message');
  message.classList.remove('hidden');
  
  // يمكن إضافة المزيد من الإجراءات هنا
  logAdBlockDetection();
  showAlternativeContent();
}

// تسجيل حدث اكتشاف مانع الإعلانات
function logAdBlockDetection() {
  console.log('تم اكتشاف مانع إعلانات');
  // يمكن إرسال البيانات إلى خادم التحليلات
}

2. فحص ملف JavaScript#

طريقة أخرى موثوقة تعتمد على إنشاء ملف JavaScript يحتوي على متغير معين.

<!-- إضافة ملف الفحص -->
<script src="/assets/js/ads.js"></script>

// محتوى ملف ads.js
var canRunAds = true;

// كود الفحص في الملف الرئيسي
function checkForAdBlock() {
  if (window.canRunAds === undefined) {
    const message = document.getElementById('adblock-message');
    message.style.display = 'block';
    
    // إجراءات إضافية
    handleAdBlockPresence();
  }
}

// التحقق بعد تحميل الصفحة
window.addEventListener('load', checkForAdBlock);

3. اكتشاف العناصر المحظورة#

هذه الطريقة تعتمد على إنشاء عنصر وهمي يحتوي على كلمات مفتاحية يستهدفها مانع الإعلانات.

<div
  id="ad-detect"
  class="ads ad adsbox doubleclick ad-placement carbon-ads"
  style="height: 1px; width: 1px; position: absolute; left: -9999px;"
>
</div>

// دالة متكاملة للفحص
function detectAdBlock() {
  const testAd = document.getElementById('ad-detect');
  
  return new Promise((resolve) => {
    window.setTimeout(() => {
      if (testAd.offsetHeight === 0) {
        resolve(true); // تم اكتشاف مانع إعلانات
      } else {
        resolve(false); // لا يوجد مانع إعلانات
      }
      testAd.remove(); // تنظيف العنصر بعد الفحص
    }, 100);
  });
}

// استخدام الدالة
async function checkAdsBlocker() {
  try {
    const isBlocking = await detectAdBlock();
    if (isBlocking) {
      handleAdBlockDetection();
    }
  } catch (error) {
    console.error('خطأ في فحص مانع الإعلانات:', error);
  }
}

أفضل الممارسات والتوصيات#

التحقق المتعدد: استخدم أكثر من طريقة للتحقق لزيادة دقة الاكتشاف.

async function comprehensiveAdBlockCheck() {
  const results = await Promise.all([
    detectAdBlock(),
    checkScriptLoading(),
    checkBaitElement()
  ]);
  
  return results.some(result => result === true);
}

التعامل مع الأخطاء: تأكد من وضع معالجة مناسبة للأخطاء.
تحسين تجربة المستخدم: قدم رسائل واضحة ومفيدة للمستخدم.
الاختبار الشامل: قم باختبار الكود مع:
- متصفحات مختلفة (Chrome, Firefox, Safari, Edge)
- إضافات مختلفة لمنع الإعلانات (uBlock Origin, AdBlock Plus, Ghostery)
- أجهزة وأنظمة تشغيل مختلفة

الخاتمة#

تذكر أن مانعي الإعلانات يتطورون باستمرار، لذا من المهم تحديث طرق الاكتشاف بشكل دوري. كما يجب الموازنة بين حاجة موقعك لاكتشاف مانعي الإعلانات وتقديم تجربة مستخدم جيدة.

Join our whatsapp group here
My Channel here