Có rất nhiều cách đặt quảng cáo trên các website. Trong đó quảng cáo Pop-up là một kiểu quảng cáo khá hiệu quả, tăng lượng truy cập cho nhà quảng cáo. Bài này chúng ta sẽ cùng tìm hiểu về cách đặt quảng cáo Pop-up hiệu quả mà không làm phiền đến người dùng.
Quảng cáo Pop-up là gì?
Quảng cáo popup là một dạng quảng cáo hiển thị trên màn hình của người dùng dưới dạng cửa sổ popup
(cửa sổ bật lên). Nó thường được sử dụng để quảng bá sản phẩm, dịch vụ hoặc chương trình khuyến mãi mới. Quảng cáo popup có thể hiển thị khi người dùng mới vào website hoặc khi người truy cập vào một trang nào đó trên website.
Nó có thể là một sự phiền toái cho người dùng và có thể gây ra sự giảm trải nghiệm truy cập trang web. Do đó cần phải có chiến lược đặt quảng cáo popup hợp lý.
Tạo quảng cáo Pop-up chỉnh được số lần hiển thị
Ví dụ
Trang rapphim.tv là một ví dụ về quảng cáo popup giới hạn số lần hiển thị. Quảng cáo popup ở trang này hiển thị 3 lần, cách nhau 3 tiếng, có nghĩa là khi người dùng truy cập vào trang này sẽ thấy popup được bật lên 3 lần (mỗi khi refresh trang popup sẽ bật lên). Đến lần refresh trang thứ 4 thì không thấy quảng cáo bật lên nữa, và 3 tiếng sau chu trình này sẽ được lặp lại.
Bằng cách làm này, nhà quảng cáo vẫn có thể phân phối được quảng cáo của mình trong khi trải nghiệm người dùng trên website không bị ảnh hưởng nhiều.
Cách thực hiện
Trước tiên chúng ta tạo một file JavaScript và định nghĩa các phương thức xử lý cookie:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.deleteCookie = function(cookieName) {
document.cookie = cookieName + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
window.getCookie = function(cookieName) {
let name = cookieName + '=';
let ca = document.cookie.split(';');
let caLength = ca.length;
for (let i = 0; i < caLength; i++) {
let c = ca[i].trim();
if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
}
return '';
}
window.setCookie = function(cookieName, cookieValue, expiresMinutes) {
let d = new Date();
d.setTime(d.getTime() + (expiresMinutes * 60 * 1000));
let expires = 'expires=' + d.toGMTString();
document.cookie = cookieName + "=" + cookieValue + "; " + expires + "; path=/";
}
- Hàm
deleteCookiedùng để xóa một cookie đã được lưu trên trình duyệt (định nghĩa sẵn thôi chứ phần này không dùng đến) - Hàm
getCookiedùng để lấy giá trị của một cookie đã được lưu trên trình duyệt. Nó sẽ tìm tên cookie trong chuỗidocument.cookievà trả về giá trị của nó. Nếu không tìm thấy, nó sẽ trả về chuỗi rỗng. - Hàm
setCookiedùng để thiết lập giá trị mới cho một cookie hoặc tạo một cookie mới trên trình duyệt. Nó sẽ thiết lập thời gian hết hạn của cookie dựa trên số phút được truyền vào và thiết lập giá trị và tên cookie trong chuỗidocument.cookie.
Ở file HTML thì mình code như sau. Ở đây mình dùng slim template và modal của Bootstrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div id="samplePopup" class="modal" aria-labelledby="samplePopup" aria-hidden="true"
div class="modal-dialog modal-dialog-centered px-4" style="max-width: fit-content;"
div class="modal-content relative"
a href="https://example.com" target="_blank"
img src="sample_image.png" alt="image"
div class="text-sm italic text-gray-500 text-right" Quảng cáo này hiện 3 lần, cách nhau 3 tiếng.
button type="button" class="absolute -top-12 right-0 text-xl text-white border border-solid border-white p-2 font-bold bg-black" data-bs-dismiss="modal" aria-label="Close"
span Đóng quảng cáo
javascript:
const modalName = 'samplePopup'
const showTime = 3
const duration = 180
window.onload = function () {
let samplePopup = document.getElementById(modalName);
let showedTime = Number(getCookie(modalName));
if (showedTime < showTime) {
$(samplePopup).modal("show");
setCookie(modalName, showedTime + 1, duration);
}
}
const modalNamelà tên của modal, được dùng để lấy đối tượng modal bằng hàmdocument.getElementById()const showTimelà số lần popup xuất hiện trong một khoảng thời gian.const durationlà số phút cách nhau cho tất cả các lần xuất hiện popup
Trong hàm window.onload, sử dụng hàm getCookie(modalName) để lấy giá trị của cookie có tên là modalName, và gán giá trị lấy được vào biến showedTime.
Sau đó, sử dụng điều kiện if để kiểm tra nếu số lần hiển thị modal nhỏ hơn showTime thì sử dụng hàm $(samplePopup).modal("show") để hiển thị modal, và sau đó sử dụng hàm setCookie(modalName, showedTime + 1, duration) để cập nhật lại giá trị cookie với số lần hiển thị tăng lên 1 và thời gian hết hạn là duration (tính bằng phút).
Lưu ý: AdBlocker có thể sẽ block tất cả các element có id hoặc class mang tên ad, adxxxxx, do đó tránh đặt tên id hoặc class cho modal hoặc thẻ div với các từ này.
