หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

การแนะนำ

Javascript เพื่อตรวจจับการมีอยู่ของพฤติกรรมที่เกี่ยวข้องกับการบล็อกโฆษณาระหว่างการแสดงหน้าเว็บ

การดำเนินการ

JavaScript (adblockDetector.js) ได้รับการทดสอบเพื่อตรวจจับพฤติกรรมที่เกี่ยวข้องกับการบล็อกโฆษณาในเว็บเบราว์เซอร์ต่อไปนี้:

  • กูเกิลโครม
  • มอซซิลา ไฟร์ฟอกซ์
  • อินเทอร์เน็ตเอ็กซ์พลอเรอร์ (8+)
  • ซาฟารี

สคริปต์ทำเช่นนี้โดยการสร้างชุด DIV ที่มีแนวโน้มว่าจะถูกซ่อนโดยเครื่องมือบล็อกโฆษณาบนเบราว์เซอร์

กลยุทธ์เพิ่มเติมที่ยังไม่รวมอยู่ในสคริปต์นี้:

  • URL เหยื่อ อนุญาตให้ตรวจจับการบล็อกโฆษณาบนเครือข่าย
  • การปรับเปลี่ยนเหยื่อแบบไดนามิก อัปเดตแอตทริบิวต์ DIV และ URL ตามรายการบล็อกที่มีอยู่ (Easylist และอื่นๆ) เพื่อให้การตรวจจับมีประสิทธิภาพมากขึ้น

การติดตั้ง

ดาวน์โหลดสคริปต์การตรวจจับที่ต้องการและเพิ่มลงในเว็บไซต์ของคุณ มีหลายวิธีในการรวม JavaScript ลงใน HTML

ชื่อสคริปต์ คำอธิบาย
adblockDetector.js สคริปต์การตรวจจับ Adblocker ที่ไม่มีโมดูล Google Analytics
adblockDetectorWithGA.js สคริปต์การตรวจจับ Adblocker พร้อมโมดูล Google Analytics

ด้วย AdBlockDetectionWithGA.js คุณจะถูกขอให้ระบุรหัสติดตาม GA ของคุณในสคริปต์ที่บรรทัดที่ 82 เมื่อคุณอ้างอิงสคริปต์นี้ มันจะติดตามเหตุการณ์บางอย่างที่เกี่ยวข้องกับ AdBlock บนเบราว์เซอร์ของผู้ใช้ คุณสามารถดูรายละเอียดได้ในแผงควบคุมของ Google Analytics ต่อไปนี้เป็นวิธีตรวจสอบว่าผู้ใช้ใช้ adblock ใด ๆ หรือไม่

การตั้งค่า Google Analytics

ประการแรก เราขอแนะนำให้คุณสร้างรหัสติดตาม GA อื่น เพื่อไม่ให้รบกวนการเปิดดูหน้าเว็บของคุณ ทำตามขั้นตอนด้านล่างสำหรับ GA เกี่ยวกับการใช้ Adblock

  • ลงชื่อเข้าใช้บัญชี Google Analytics ของคุณ -> ไปที่เว็บไซต์ของคุณ -> ไปที่แท็บ “การรายงาน” -> คลิก “โปรแกรมสำรวจผู้ใช้” ใต้ผู้ชม
  • คลิกที่ “เพิ่มกลุ่มใหม่” -> “กลุ่มใหม่” -> ตั้งชื่อกลุ่ม (เช่น: 'ตรวจพบ Adblock') -> คลิกที่ “เงื่อนไข” ใต้ส่วนขั้นสูง
  • คลิกที่เซสชันและเลือกผู้ใช้ (คุณสามารถสร้างเซสชันอื่นสำหรับเซสชันได้เช่นกัน)
  • คลิกที่เมนูแบบเลื่อนลงอันแรก -> คลิกที่ "พฤติกรรม" -> เลือก "ป้ายกำกับเหตุการณ์"
  • คลิกที่กล่องข้อความ: พิมพ์ป้ายกำกับเหตุการณ์ตามด้านล่าง
  • ป้ายกำกับเหตุการณ์- “div ซ่อน” – สิ่งนี้จะมอบผู้ใช้ทั้งหมดที่เปิดใช้งาน/ค้นพบบล็อกโฆษณา ตอนนี้กลุ่มผู้ใช้หนึ่งของคุณที่ใช้บล็อกโฆษณาพร้อมแล้ว
  • ทำซ้ำขั้นตอนข้างต้นทั้งหมดด้วยป้ายกำกับเหตุการณ์ด้านล่างสำหรับผู้ใช้ที่ไม่ได้ใช้บล็อกโฆษณา
  • ป้ายกำกับเหตุการณ์- “div มองเห็นได้” – สิ่งนี้จะทำให้ผู้ใช้ทั้งหมดที่บล็อกโฆษณาถูกปิดใช้งาน/ไม่พบ

น่าเสียดายที่เรายังไม่ทราบวิธีใส่ลงในแดชบอร์ด ดังนั้น ครั้งต่อไปเมื่อคุณไปที่ GA คุณสามารถไปที่ User Explorer -> คลิกเพิ่มกลุ่มใหม่ และคุณจะพบกลุ่มที่คุณสร้างไว้ก่อนหน้านี้ (เช่น กลุ่มหนึ่งสำหรับผู้ใช้ที่ตรวจพบ adblock และอีกกลุ่มหนึ่งสำหรับผู้ใช้บล็อกโฆษณาที่ตรวจไม่พบ) คุณสามารถเลือกและคลิกนำไปใช้เพื่อดูข้อมูลที่รายงาน

มันควรมีลักษณะเหมือนภาพด้านล่าง

แบบอินไลน์

นี่เป็นวิธีการรวมที่แนะนำ ฟังก์ชันที่มีอยู่ในสคริปต์การตรวจจับที่เลือกควรรวมไว้ใน HTML ของเฟรมหลักโดยตรง

ซึ่งทำได้โดยการล้อมเนื้อหาของโค้ดที่เลือกไว้ในแท็กสคริปต์ใน HTML ที่ส่งมา

ไฟล์สคริปต์ภายนอก

คุณสามารถโฮสต์โค้ดที่เลือกบนเว็บเซิร์ฟเวอร์ของคุณเป็นไฟล์อิสระ และอ้างอิงไฟล์นี้จาก HTML ที่ส่งมา

หากคุณใช้ไฟล์สคริปต์ภายนอก ตัวบล็อคโฆษณาสามารถบล็อกไฟล์นั้นได้ การใช้ชื่ออื่นสำหรับไฟล์จะลดโอกาสที่ไฟล์จะถูกบล็อกโดยตัวกรองทั่วไป

วิธีการอื่น ๆ

สามารถรวมฟังก์ชันจากโค้ดที่เลือกเข้ากับไลบรารีสคริปต์ที่มีอยู่ ซึ่งโฮสต์เป็นไฟล์สคริปต์ภายนอกได้ การทำเช่นนี้อาจส่งผลให้ฟังก์ชันการทำงานของไซต์ลดลงสำหรับผู้เยี่ยมชมที่ใช้ตัวบล็อกโฆษณาที่พยายามหลีกเลี่ยงการตรวจพบ หากตัวบล็อกโฆษณาบล็อกไฟล์สคริปต์ภายนอกทั้งหมด

การกำหนดค่า

@ธงเสา

ตัวเลือก พิมพ์ คำอธิบาย
แก้ปัญหา บูลีน บ่งชี้ว่าควรพิมพ์เอาต์พุตการดีบักเพิ่มเติมไปยังคอนโซล
พบ สตริง (@function) ฟังก์ชั่นที่จะเริ่มทำงานหากตรวจพบ adblock
ไม่พบ สตริง (@function) ฟังก์ชั่นที่จะเริ่มทำงานหากตรวจไม่พบ adblock โปรดทราบว่าการดำเนินการนี้จะเริ่มทำงานทุกครั้งที่ตรวจไม่พบ adblock และควรให้ข้อมูลอินพุตสำหรับการดำเนินการหลังจากตรวจพบ "เสร็จสมบูรณ์" เท่านั้น
สมบูรณ์ สตริง (@function) ฟังก์ชั่นเริ่มทำงานเมื่อการทดสอบเสร็จสิ้น

ผลการทดสอบ (บูลีน) รวมเป็นพารามิเตอร์สำหรับตัวอย่างการโทรกลับ: 

 window . adblockDetector . init (
        {
          found : function ( ) { ... } ,
          notFound : function ( ) { ... }
        }
      ) ;

การใช้งาน

เพิ่มโค้ดด้านล่างในหน้า HTML 

 < script src = "./adblockDetector.js" > < / script >
	< script >
	// Configure the adblock detector
	( function ( ) {
		var enabledEl = document . getElementById ( 'adb-enabled' ) ;
		var disabledEl = document . getElementById ( 'adb-not-enabled' ) ;
		function adBlockDetected ( ) {
			enabledEl . style . display = 'block' ;
			disabledEl . style . display = 'none' ;
		}
		function adBlockNotDetected ( ) {
			disabledEl . style . display = 'block' ;
			enabledEl . style . display = 'none' ;
		}
		
		if ( typeof window . adblockDetector === 'undefined' ) {
			adBlockDetected ( ) ;
		} else {
			window . adblockDetector . init (
				{
					debug : true ,
					found : function ( ) {
						adBlockDetected ( ) ;
					} ,
					notFound : function ( ) {
						adBlockNotDetected ( ) ;
					}
				}
			) ;
		}
	} ( ) ) ;
	< / script >

เพิ่มโค้ดด้านล่างในเนื้อหาของหน้า HTML 

 < div class =" center " >
< h5 class =" bg-success " id =" adb-not-enabled " style =" display: none; " > AdBlock is disabled </ h5 >
< h5 class =" bg-danger " id =" adb-enabled " style =" display: none; " > AdBlock is enabled </ h5 >
</ div >

มีส่วนร่วม

ส้อมมัน! สร้างสาขาฟีเจอร์ของคุณ: git checkout -b my-new-feature ยอมรับการเปลี่ยนแปลงของคุณ: git commit -am 'เพิ่มฟีเจอร์บางอย่าง' พุชไปที่สาขา: git push origin my-new-feature ส่งคำขอดึง

คำถามที่พบบ่อย

  • สคริปต์จะไม่ทำงานในเครื่อง หน้าเว็บควรได้รับบริการจากเซิร์ฟเวอร์ผ่าน http
  • ปัจจุบัน “baits” หรือ “honey pods” ที่ใช้ใน Javascript มีฮาร์ดโค้ดอยู่ที่ #218 หากคุณต้องการอัปเดตไฟล์ด้วยเหยื่อใหม่ ให้อัพเดตบรรทัดที่ #218
  • ใช้ไฟล์ตัวอย่าง test.html ค้นหาในที่เก็บ โฮสต์ไฟล์บนเซิร์ฟเวอร์ HTTP เช่น เซิร์ฟเวอร์ apache และขอไฟล์ในเบราว์เซอร์ผ่าน http พร้อมเปิด/ปิด adblocker
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด