Hộp thông báo Phát hiện AdBlock khi sử dụng tiện ích chặn quảng cáo trên website

Adblock Detect Notify Box

Đã có khá nhiều thủ thuật thủ thuật thú vị liên quan đến AdBlock mà Iris Tips đã chia sẻ đến bạn. Sau đây là một thủ thuật khác liên quan đến việc phát hiện người dùng sử dụng Adblock khi lướt qua website của bạn, tiện ích này sẽ hiển thị một bảng thông báo và yêu cầu phải tắt Adblock với hướng dẫn cụ thể cách tắt tiện ích để tiếp tục lướt web trên site.

Cách thực hiện

1Rất đơn giản bạn hãy vào Chủ đề >> Chỉnh sửa HTML và dán đoạn code sau vào trước thẻ </body>

<div id="wrapfabber" style="position:absolute;bottom:0;right:0;"><div class="adBanner" style="background-color:transparent;height:1px;width:1px;"></div></div>
<script type="text/javascript">
var showImageAdBlocker = 0;
function cancelAdBlocker() {
    document.getElementById("wrapperBlocker").remove();
}
function showImage() {
    if (showImageAdBlocker == 0) {
        document.getElementById("imageGuide").style.display = 'block';
        document.getElementById("wrapperBlockerStep1").style.display = 'none';
        document.getElementById("wrapperBlockerStep2").style.display = 'block';
        showImageAdBlocker = 1;
    } else {
        window.location.reload();
    }
}
document.addEventListener('DOMContentLoaded', function() {
    if(document.getElementById("wrapfabber").clientHeight <= 0){
        // dataLayer.push({ "event": "misc", "pageType": "adblocker" });
        var body = document.body;
        var wrapperNoFlash = '<div id="wrapperBlocker" style="width:100%;height:100%;position: absolute;top: 0;font-family: Lato,sans-serif;overflow:auto;">\
            <div style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;z-index: 999;opacity: 0.8;"></div>\
            <div id="wrapperBlockerStep1" style="-webkit-box-sizing: border-box;box-sizing: border-box;width: 650px;margin: 0 auto;text-align: center;z-index: 9999;background-color: #fff;padding: 30px;position: relative;margin-top: 78px;margin-bottom: 78px;border-radius: 10px;color: #000;padding-bottom: 40px;overflow:auto;">\
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkpChXROB7W8Z0AYyh1F-E3IDoexOAszLBUgF-AsC-2394ayTBfo2B1alQkc0UtNvIRX72WOJxJlkNbffMKP8ACg6vrYkm9msQrwLgImV2Zp2eaMjUCBObN80NYeHqXeMpBw4SoNwMUe90/s320/eye_iris-tips.png" />\
                <h2 style="margin:0;padding:0;line-height: 50px;">Phát hiện AdBlocker</h2>\
                <p style="margin:0;font-size: 16px;line-height: 35px;">Chào bạn! Chúng tôi phát hiện rằng bạn đang sử dụng trình chặn quảng cáo.</p>\
                <p style="margin:0;font-size: 16px;line-height: 35px;">Iris Tips vẫn đang từng ngày chia sẻ các thủ thuật hoàn toàn miễn phí đến bạn.</p>\
                <p style="margin:0;font-size: 16px;line-height: 35px;margin-bottom: 35px;">Thích Iris Tips? Vui lòng cho Iris Tips vào whilelist trong trình chặn quảng cáo nhé ^_^</p>\
                <span ga-on="click" ga-event-action="click" ga-event-category="adblocker" ga-event-label="step1Cancel" onclick="cancelAdBlocker();" style="display:none;cursor: pointer;text-transform: uppercase;padding: 13px;color: #000;margin-right: 20px;" href="javascript:void(0)">Cancel</span>\
                <span ga-on="click" ga-event-action="click" ga-event-category="adblocker" ga-event-label="step1Yes" onclick="showImage()" style="cursor: pointer;text-transform: uppercase;padding: 13px;color: #000;background: #00fff2;border-radius: 4px;margin-left: 20px;" href="javascript:void(0)">Ok, mình sẽ whitelist Iris Tips</span>\
            </div>\
            <div id="wrapperBlockerStep2" style="display:none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 650px;margin: 0 auto;z-index: 9999;background-color: #fff;padding: 30px;position: relative;margin-top: 78px;margin-bottom: 78px;border-radius: 10px;color: #000;padding-bottom: 40px;overflow:auto;height:500px">\
                <h2 style="margin:0;padding:0;line-height: 50px;text-align: center;">Whitelist bằng cách nào?</h2>\
                <p style="margin:0;font-size: 16px;line-height: 35px;margin-bottom: 5px;">Click vào icon của trình chặn quảng cáo AdBlock trên thanh menu.</p>\
                <p style="margin:0;font-size: 16px;line-height: 25px;">Đối với AdBlock: Chọn \'<b>Don\'t run on pages on this domain</b>\' để vô hiệu hóa Ad-Blocker trên Iris Tips</p>\
                <p style="margin:0;font-size: 16px;line-height: 25px;">Đối với Adblock Plus: Click chọn \'<b>Enabled on this site</b>\' để vô hiệu hóa Ad-Blocker trên Iris Tips</p>\
                <p style="margin:0;font-size: 16px;line-height: 35px;margin-bottom: 35px;margin-top: 5px;">Xong rồi đấy. Sau khi bạn đã whitelist Iris Tips, click vào nút \'Done\' nhé!</p>\
                <img id="imageGuide" style="margin: 0 auto;margin-bottom: 35px;margin-top: -15px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIyYFUQ3W50fmvlQumC5ULmPSLXw_nFlL59w6OqUCrE9xlQv8J4yOnnN6ao5FMjjK7IsSeup57Y3BNKLRoXrfpAC18gMFJEjKZsNHUnk9tajfdSLAfmQ700UMzxmg5_6_KUMIlOEorPmQH/s320/qc_iris-tips.png" />\
                <div style="text-align: center;"><span ga-on="click" ga-event-action="click" ga-event-category="adblocker" ga-event-label="step2Yes" onclick="showImage()" style="cursor: pointer;text-transform: uppercase;padding: 13px;color: #000;background: #00fff2;border-radius: 4px;margin-left: 20px;" href="javascript:void(0)">Done! ^_^</span></div>\
            </div>\
        </div>';
body.insertAdjacentHTML('beforeend', wrapperNoFlash);
document.body.style.overflow="hidden";
    }
});
</script>

Bật/Tắt AdBlock để xem trên Trang DEMO nhé

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by pixlr/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm