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

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=/";
}

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);
        window.open('https://www.inithtml.com/', '_blank');
        window.focus();
    }
}

Với 24 là số tiếng đồng hồ và https://www.inithtml.com/ là 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('https://www.inithtml.com/#link-1', '_blank');
	        window.focus();
	    }
	} else {
		if (getCookie('initPopup2') == '') {
	        setCookie('initPopup2', 'InitHTML2', 24);
	        window.open('https://www.inithtml.com/#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 = 'https://www.inithtml.com/'; // 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ừ #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.

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

Popunder

Đầ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>
<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à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 popUnder() {
    if (getCookie('initPopunder') == '') {
        setCookie('initPopunder', 'InitHTML', 24);
        window.open('r.php?url=https://www.inithtml.com/', '_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, 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