[Lab javascript] - Exit-Intent javascript là gì? Vì sao một Website phải sử dụng công nghệ Exit-Intent?

Nội dung bài viết

Video học lập trình mỗi ngày

Bạn đã bao giờ nghe tới cụm từ "Exit-Intent" trong javascript. Nếu như bạn muốn page của mình được nhiều người lưu luyến và có những bất ngờ thú vị cho người dùng thì Exit-Intent là công nghệ đáng học hỏi.

Công nghệ Exit-intent là một công nghệ mà dân SEO hay chú ý tới nhất vì hiệu quả nó mang đến trong kỹ thuật tiếp thị thật là tuyệt với. Gọn nhẹ chủ sử dụng javascript. Trang web sử dụng Exit-intent này giúp website có nhiều người đăng ký, tăng doanh số bán hàng, tăng view cho một page và đặt biệt là các page tin tức. Và trong bài học này tôi muốn giới thiệu cho các bạn công nghệ này hoạt động như thế nào? Và việc tích hợp vào website có khó khăn không?

Công nghệ Exit-Intent là gì? Đó là một công nghệ mà đánh dấu một sự kiện được phát hiện khi người dùng rời khỏi trang website chúng ta.

Ví dụ như thế này, nếu muốn rời đi một page thì mouse của người dùng sẽ move đến button Clode(x) browser. Thì Công nghệ Exit-Intent sẽ có nhiệm vụ phát hiện sự kiện này và phát đi tín hiệu cho LTV biết rằng ai đó đang rời bỏ chúng ta. Chỉ với vài code javascipt, công nghệ đó giúp được bao nhiêu dân tiếp thị có một thủ thuật tuyệt vời.

Demo: Click See Demo Here

Bài viết liên quan: Sự kiện "Lắc" điện thoại trong javascript như thế nào?

Công nghệ này có thể để bất kỳ trang nào hay bất cứ vị trí nào trên page. Ngay khi mouse của người dùng rời bỏ khỏi chế độ xem trang web thì một phương thức sẽ hiện thị, nó rất thân thiện với người dùng. Và kỹ thuật này đã mang lại sự chú ý của người dùng một cách triệt để. Và nhiều bài đã chứng minh sự hiệu quả của chúng.

Khi người dùng rời đi thì sự kiện này mang lại cho bạn nhiều ý tưởng như là thông báo cho họ đăng ký email, cho user thấy voucher, hoặc cung cấp thông tin sản phẩm mới với nhiều khuyến mãi.... Đó là ý tưởng của bạn. Và sau cùng tôi sẽ hướng dẫn làm sao tích hợp vào website của bạn.

Tất nhiên tôi phải sử dụng một thư viện javascript có tên là Ouibounce.

Ouibounce là gì? Mới các bạn xem trên github: https://github.com/carlsednaoui/ouibounce

Thư viện JavaScript Ouibounce là một thư viện JavaScript cho phép bạn phát hiện khi con trỏ chuột rời khỏi chế độ xem và nó cũng đi kèm với sẵn sàng để sử dụng các phương thức.

Điêm qua một vài nổi bật Ouibounce:

- Đôi khi, người dùng trong khi điều hướng trang web di chuyển con trỏ chuột ra ngoài chế độ xem. Ouibounce đủ thông minh để phát hiện điều này và ngăn hiển thị phương thức.

- Chỉ bắn một lần cho mỗi người dùng. Nó có giới hạn thời gian trước khi một phương thức được hiển thị.

Ví dụ: Một người dùng sẽ không bao giờ rời khỏi một trang web trước 2-5 giây do đó nó không bao giờ hiển thị một phương thức trong khoảng cách thời gian này.

Dưới đây là một ví dụ về cách sử dụng Ouibounce

Demo: Click See Demo Here

<!doctype html>
<html>

<head>
    <title>Demo Exit Intent</title>
    <!-- Load Ouibounce from CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/carlsednaoui/ouibounce/master/test/ouibounce.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>
</head>

<body>
    <p>Di chuyển mouse của bạn ra khỏi trang này, xem kết quả bất ngờ :D <p>
      <br><br>
      <a href="https://anonystikc.com">&amp;#8592; Xem source full của bài viết</a>
      <!-- Ouibounce Modal -->
      <div id="ouibounce-modal">
          <div class="underlay"></div>
          <div class="modal">
              <div class="modal-title">
                  <h3>No No stoped pls.</h3>
              </div>
              <div class="modal-body">
                  <p>Thế là mems sẽ quay lại thôi :D </p>
                  <form>
                      <input type="text" placeholder="you@email.com">
                      <input type="submit" value="learn more &amp;raquo;">
                      <p class="form-notice">Có thể customize form </p>
                  </form>
              </div>
              <div class="modal-footer">
                  <p onclick="document.getElementById('ouibounce-modal').style.display = 'none';">Tôi ko thích </p>
              </div>
          </div>
      </div>
      <script>
        var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
            aggressive: true, // set === true nhe cac bạn
        });
      </script>

</body>

</html>

Bài viết liên quan: Sự kiện "Lắc" điện thoại trong javascript như thế nào?