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

08/07/2018 6 47 5 phút đọc

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ị.

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

Xử lí Cookies

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

function deleteCookie(name) {
    document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
}

function getCookie(name) {
    const nameEQ = encodeURIComponent(name) + "=";
    const cookies = document.cookie.split("; ");
    for (const cookie of cookies) {
        if (cookie.startsWith(nameEQ)) {
            return decodeURIComponent(cookie.substring(nameEQ.length));
        }
    }
    return "";
}

function setCookie(name, value, hours) {
    const expires = new Date(Date.now() + hours * 60 * 60 * 1000).toUTCString();
    document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
}

Popup

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

function popUp() {
    if (!getCookie('initPopup')) {
        setCookie('initPopup', 'InitHTML', 24);
        const popup = window.open('https://inithtml.com/', '_blank');
        if (popup) {
            popup.focus();
        }
    }
}

Với 24 là số tiếng đồng hồ và https://inithtml.com/ là trang đích.

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

function popUpRandom() {
    const randomNumber = Math.random() < 0.5 ? 1 : 2;
    const popups = {
        1: { cookie: 'initPopup', value: 'InitHTML', url: 'https://inithtml.com/#link-1' },
        2: { cookie: 'initPopup2', value: 'InitHTML2', url: 'https://inithtml.com/#link-2' }
    };

    const { cookie, value, url } = popups[randomNumber];

    if (!getCookie(cookie)) {
        setCookie(cookie, value, 24);
        const popup = window.open(url, '_blank');
        if (popup) {
            popup.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);

        const currentUrl = location.href;
        const popup = window.open(currentUrl, '_blank');

        location.href = 'https://inithtml.com/'; // Trang đích

        if (popup) {
            popup.focus();
        }
    }
}

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

$(function () {
    const popupHandler = popUp; // Thay bằng popUpRandom hoặc popUpNewTab nếu muốn

    $('body').one('click', function () {
        popupHandler();
    });
});

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ừ #logo là Logo của trang, .my-banner là các quảng cáo tự gắn và .net-banner là quảng cáo của mạng quảng cáo.

$(function () {
    const excludedSelectors = ['#logo', '.my-banner', '.net-banner'];
    const popupHandler = popUp; // Thay bằng popUpRandom hoặc popUpNewTab nếu muốn

    $('body').one('click', function (e) {
        for (const selector of excludedSelectors) {
            if ($(e.target).closest(selector).length) return;
        }
        popupHandler();
    });
});

Popunder

Lưu ý: Do các cập nhật bảo mật gần đây của các trình duyệt, dạng mở tab / chuyển hướng kiểu này có thể bị chặn hoặc không còn hoạt động đúng.

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

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <meta http-equiv="refresh" content="5;url=<?php echo htmlspecialchars($_GET['url'] ?? '', ENT_QUOTES, 'UTF-8'); ?>">
    <title>Đang chuyển hướng...</title>
    <style>
        body { 
            font-family: sans-serif; 
            text-align: center; 
            margin-top: 20vh; 
        }
    </style>
</head>
<body>
<?php
    $url = $_GET['url'] ?? '';
    if (filter_var($url, FILTER_VALIDATE_URL)) :
?>
    <p>Đang chuyển hướng bạn đến: <a href="<?php echo htmlspecialchars($url, ENT_QUOTES, 'UTF-8'); ?>"><?php echo htmlspecialchars($url, ENT_QUOTES, 'UTF-8'); ?></a></p>
    <p>Nếu không tự động chuyển, <a href="<?php echo htmlspecialchars($url, ENT_QUOTES, 'UTF-8'); ?>">bấm vào đây</a>.</p>
    <script>
        setTimeout(function () {
            try {
                window.resizeTo(screen.width, screen.height);
            } catch (e) {}
        }, 1000);
    </script>
<?php else : ?>
    <p>URL không hợp lệ hoặc thiếu tham số. <button onclick="window.close();">Đóng cửa sổ</button></p>
<?php endif; ?>
</body>
</html>

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

$(function () {
    const popupHandler = popUnder;

    $('body').one('click', function () {
        popupHandler();
    });
});

function popUnder() {
    if (!getCookie('initPopunder')) {
        setCookie('initPopunder', 'InitHTML', 24);

        const popup = window.open(
            'r.php?url=' + encodeURIComponent('https://inithtml.com/'),
            '_blank',
            'toolbar=no,scrollbars=yes,resizable=yes,width=100,height=100,left=' + screen.width + ',top=' + screen.height
        );

        if (popup) {
            window.focus(); // Trả lại focus cho cửa sổ chính
        }
    }
}

Vậy là đã xong rồi, các bạn có thể tải về hoặc xem thử ở liên kết bên dưới nhé.

Xem demo Tải về

Chúc các bạn thành công!

Series: Thủ thuật Front-end

Bài Viết Liên Quan

Bình luận

6 bình luận