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

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

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à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://ily.vn', '_blank');
        window.focus();
    }
}

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

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.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 to.php?url= vừa mới tạo.

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