Tạo quảng cáo popup giống rapphim.tv có thể chỉnh số lần hiển thị và thời gian

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

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.

tao-quang-cao-popup

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:

        Copy
      jswindow.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 deleteCookie dù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 getCookie dù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ỗi document.cookie và 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 setCookie dù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ỗi document.cookie.

Ở file HTML thì mình code như sau. Ở đây mình dùng slim template và modal của Bootstrap

        Copy
      slim  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 modalName là tên của modal, được dùng để lấy đối tượng modal bằng hàm document.getElementById()
const showTime là số lần popup xuất hiện trong một khoảng thời gian.
const duration là 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.