Phát hiện chặn quảng cáo

Xin lỗi bạn, mình có đặt quảng cáo để lấy kinh phí duy trì trang, nếu bạn không thấy phiền có thể tắt chức năng chặn quảng cáo và tải lại trang.

Tiếp tục xem
Tải lại

Chặn ads block – Phát hiện chặn quảng cáo bằng Javascript trong WordPress

Xin chào mọi người,
Hôm nay, mình xin được hướng dẫn cả nhà làm một Popup phát hiện chặn quảng cáo bằng Javascript. Hướng dẫn dựa trên mã nguồn WordPress, nên các bạn tự tùy biến với mã nguồn bạn sử dụng nhé.

Phát hiện chặn quảng cáo bằng Javascript

Nói qua một chút về các tiện ích chặn quảng cáo có trên trình duyệt. Mình thấy thì nó khá hữu ích trong một số trường hợp nhất định. Tuy nhiên thì một số người làm nội dung như mình thì không mấy thiện cảm lắm. Vì thực ra, nguồn thu nhập từ quảng cáo không nhiều, nhiều khi còn không đủ để duy trì server, domain. Chính vì vậy, mình cũng hay có thói quen nếu nội dung quảng cáo phù hợp với mình thì mình truy cập ủng hộ. Đợt vừa rồi may mắn được Google duyệt, WordPress thì cũng có plugin cho việc này để tùy biến. Mình thì không muốn cài Plugin quá nhiều, thành thử ra viết luôn 1 cái tích hợp với theme. Các bạn tham khảo nhé.

Nhúng tệp Javascript vào trong mã nguồn

Việc đầu tiên cần làm đó là tạo ra một tệp JS và nhúng nó vào trong mã nguồn của WordPress:

Phần này khá là đơn giản, áp dụng hook wp_enqueue_scripts kết hợp với register script là xong. Kết quả:

Phát hiện chặn quảng cáo bằng Javascript

Viết HTML hiển thị Popup khi bị chặn quảng cáo

Tiếp theo là bạn cần viết một đoạn HTML cho việc hiển thị trên Website cùng với CSS để style lại cho dễ nhìn. Về khu vực thì bạn có thể viết sau thẻ mở <body> hoặc nếu có hook khu vực đó thì gắn nó vào hook và viết trong functions.php của child-theme. Như của mình do có một hook action sau thẻ <body> nên mình gắn vào hook luôn:

Trong code trên mình có để 2 hình ảnh:

 

 

 

Mục đích là khi hover vào nút Tiếp tục xem thì sẽ là mặt buồn, ngược lại là mặt xanh. Chủ yếu là màu mè thêm một chút cho sinh động thôi. Rồi giờ ta thêm một chút CSS cho nó nhé:

Ở css trên mình đã ẩn một số chưa cần hiển thị ngay bằng display: none. Ngoài ra còn có một class là background-filter, class này là một background phía sau để cho nội dung:

Phát hiện chặn quảng cáo bằng Javascript

Xử lý phát hiện chặn quảng cáo bằng Javascript

Bây giờ chúng ra sẽ viết Javascript vào tệp JS vừa tạo lúc nãy nhé:

Trong đoạn code trên mình đã comment rất rõ từng dòng lệnh, chức năng đi kèm rồi nhé. Chú ý nhất là hàm initDetect trong hàm là một hàm setTimeout với số giây đợi là 10s. Mục đích là để khi tiện ích chặn quảng cáo thực thi xong mới quét xem quảng cáo của Google đã bị xóa hay chưa. typeof(window.google_jobrunner) === “undefined” chính là điều kiện để phát hiện ra có bị chặn quảng cáo hay không. Còn lại logic về thao tác xử lý bạn đọc kỹ là sẽ hiểu.

Kết thúc

Vậy là mình đã hoàn thành hướng dẫn Phát hiện chặn quảng cáo bằng Javascript nhúng vào trong theme mã nguồn WordPress rồi nhé. Đáng lý ra mình nên làm video thì các bạn có thể dễ hiểu hơn, rất xin lỗi các bạn về điều này. Trong quá trình viết, nếu có sai sót thì các góp ý giúp mình. Nếu có bấy kỳ câu hỏi gì, đừng ngần ngại để lại bình luận, mình sẽ hỗ trợ ngay khi có thể nhé.

About Đặng Thắng

Chào mọi người, mình là Thắng. Sở thích của mình là lập trình và chia sẻ mọi thứ mình học được cho tất cả mọi người. Rất mong mọi người ủng hộ Blog của mình.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *