Thủ thuật máy tính
Website vungoctuan.vn là một trang blog chia sẻ các bài viết, bài hướng dẫn liên quan đến các kiến thức chuyên môn về Công nghệ thông tin.

Tự tạo mã quảng cáo Popup/Popunder, có hỗ trợ Cookies

0 1.038
Bài viết này sẽ hướng dẫn các bạn cách tạo mã quảng cáo Popup/Popunder bằng JavaScript cực kì đơn giản mà hiệu quả, có sử dụng Cookies để giãn cách thời gian hiển thị. Pop Up và Pop Under là gì? Pop Up và Pop Under đều là hình thức quảng cáo banner mà khi người dùng truy [...]

Bài viết này sẽ hướng dẫn các bạn cách tạo mã quảng cáo Popup/Popunder bằng JavaScript cực kì đơn giản mà hiệu quả, có sử dụng Cookies để giãn cách thời gian hiển thị.

Mục lục

    Pop Up và Pop Under là gì?

    Pop Up và Pop Under đều là hình thức quảng cáo banner mà khi người dùng truy cập vào một website nào đó sẽ tự động bật ra ngay hoặc được hẹn giờ hiện ra.

    Pop Up :Pop quảng cáo sẽ hiển thị lên đè lên trên website của chúng ta đang truy cập bằng một tab mới hoặc một cửa sổ mới. Với hình ảnh quảng cáo hiển thị ra trước mắt người xem, khi chúng ta click vào Popup này thì nó sẽ mở ra trang quảng cáo.

    Pop Under :Pop quảng cáo sẽ ẩn phía sau website của chúng ta đang truy cập, chúng ta không nhìn thấy nhưng khi Click vào bất cứ vị trí nào trên website thì trình duyệt sẽ tự động mở ra các trang web được quảng cáo.

    Pop Up và Pop Under – Người dùng đánh giá như nào?

    Phải nói rằng nếu đứng trên góc độ người dùng truy cập vào website thì cả 2 hình thức này đều gây “khó chịu” bởi với quảng cáo Pop Up thì một phần website sẽ bị che đi người dùng vào xem website và phải mất công tắt Popup đi hoặc đôi khi dù tắt đi nhưng các quảng cáo vẫn tự động bật lên.

    Còn đối với Pop Under dù bị ẩn đi, nhưng hãy thử tưởng tượng khi bạn vào website, click vào một vị trí bất kỳ thì tự nhiên ở đâu hiện ra vài cái tab các trang quảng cáo làm đơ cả máy của bạn. Liệu bạn có “khó chịu” không?

    Hai loại quảng cáo này tuy mang lại hiệu quả câu “View” cho nhà quảng cáo nhưng lại gây khó chịu cho người dùng. Cho nên, mới đây Google đã quyết định sẽ “xử lý” những webite quảng cáo Pop Up gây bất tiện cho người dùng.

    Chú ý nhé! Google sẽ phạt website quảng cáo Pop Up từ năm 2017

    Xử lí Cookies

    Đầu tiên, các bạn thêm các hàm sau.

    function deleteCookie(name) {
        document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }
    
    function getCookie(cname) {
        var name = cname + '=';
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return '';
    }
    
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 60 * 60 * 1000));
        var expires = 'expires=' + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
    }

    Code hiện Popup

    HàmpopUpđể đặt trang cần hiển thị và thời gian giãn cách.

    function popUp() {
        if (getCookie('initPopup') == '') {
            setCookie('initPopup', 'InitHTML', 24);
            window.open('//ily.vn', '_blank');
            window.focus();
        }
    }

    Với24là sốtiếng đồng hồ//ily.vnlà trang đích.

    Ngẫu nhiên 2 trang đích khác nhau.

    function popUpRandom() {
    var randomNumber = Math.floor(Math.random() * 2) + 1;
    if (randomNumber == 1) {
        if (getCookie('initPopup') == '') {
            setCookie('initPopup', 'InitHTML', 24);
            window.open('//ily.vn/#link-1', '_blank');
            window.focus();
        }
    } else {
    if (getCookie('initPopup2') == '') {
            setCookie('initPopup2', 'InitHTML2', 24);
            window.open('//ily.vn/#link-2', '_blank');
            window.focus();
        }
    }
    }

    Mở trang đích ở tab hiện tại, tab hiện tại nhảy qua tab mới (đang được nhiều người sử dụng).

    function popUpNewTab() {
        if (getCookie('initPopup') == '') {
            setCookie('initPopup', 'InitHTML', 24);
            window.open(location.href, '_blank');
            location.href = '//ily.vn'; // Trang đích
            window.focus();
        }
    }

    Sau cùng, các bạn áp dụng sự kiện để hiển thị.

    $('body').click(function() {
        popUp();
        // Hoặc popUpRandom();
        // Hoặc popUpNewTab();
    });

    Loại trừ một số thành phần không muốn bị nhảy quảng cáo. Ví dụ mình loại trừ#logolà Logo của trang,.my-bannerlà các quảng cáo tự gắn và.net-bannerlà quảng cáo của mạng quảng cáo.

    $('body').click(function(e) {
        if ($(e.target).closest('#logo').length || $(e.target).closest('.my-banner').length || $(e.target).closest('.net-banner').length) return;
        popUp();
    });

    Xem thêm:Cách tùy chỉnh Header Footer và Background WordPress đơn giản

    Code hiện Popunder

    Pop Under :Pop quảng cáo sẽ ẩn phía sau website của chúng ta đang truy cập, chúng ta không nhìn thấy nhưng khi Click vào bất cứ vị trí nào trên website thì trình duyệt sẽ tự động mở ra các trang web được quảng cáo.

    Đầu tiên, các bạn tạo một tập tin chuyển tiếp đặt là to.phpchẳng hạn, nội dung như sau.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="robots" content="noindex">
        <title>Đang chuyển hướng...</title>
    </head>
    <body>
    <?php
        $url = $_GET['url'];
        if (isset($url)) :
    ?>
    <script type="text/javascript">
    setTimeout(function() {
        window.resizeTo(screen.width, screen.height);
        location.href = '<?php echo $url; ?>';
    }, 5000);
    </script> 
    <?php else : ?>
    <script type="text/javascript">
        window.close();
    </script>
    <?php endif; ?>
    </body>
    </html>

    Tiếp đó, tạo hàmpopUnder()để nhảy ra một cửa sổ cực nhỏ ở góc màn hình, chuyển đếnto.php?url=vừa mới tạo.

    function popUnder() {
        if (getCookie('initPopunder') == '') {
            setCookie('initPopunder', 'InitHTML', 24);
            window.open('r.php?url=//ily.vn', '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top='+screen.height+',left='+screen.width+',width=100,height=100');
            window.focus();
        }
    }
    
    $('body').click(function() {
        popUnder();
    });
    

    Vậy là đã xong rồi, chúc bạn thành công.

    5/5 (có 22 bình chọn)

    Tài trợ

    Để lại một bình luận

    Địa chỉ email của bạn sẽ luôn được bảo mật.