Tạo cửa sổ bật lên. PopUp - cửa sổ bật lên. Tạo và sử dụng cửa sổ bật lên. Mở một cửa sổ bật lên

Cửa sổ bật lên bên ngoài có quảng cáo là những ý tưởng tồi tệ! Tất cả các quản trị viên web lành mạnh sẽ không bao giờ khuyên bạn sử dụng chúng trên trang web của mình. Nhưng nếu Chúng ta đang nói về về cửa sổ bật lên nội bộ - cái này yếu tố hữu ích mang lại Thông tin thêm, cảnh báo, ngăn chặn, đưa ra lựa chọn và nhiều hơn thế nữa.

Chúng ta sẽ tạo ra cái gì?

Trong hướng dẫn này, chúng ta sẽ tạo một cửa sổ bật lên đơn giản và đẹp mắt bằng cách sử dụng jquery. Nó sẽ tương tự như những gì được sử dụng trên Twitter. Đương nhiên, bạn có thể tạo cho nó phong cách bạn thích.

Cửa sổ sẽ có chức năng gì?

  • Chúng tôi muốn nó được căn giữa trên trang web khi nó được hiển thị.
  • Cần có nút “đóng” hoặc nút nào đó tương tự.
  • Khi chúng ta bấm vào bên ngoài khối, cửa sổ bật lên sẽ tự động đóng lại.
  • Khi cửa sổ được hiển thị, trang phải được che trong bóng để người dùng có thể tập trung.

Hãy bắt đầu phát triển

Để triển khai cửa sổ bật lên, chúng tôi sẽ sử dụng CSS và một vài dòng mã jQuery và tất nhiên là HTML. Xin lưu ý rằng để thực hiện ý tưởng của chúng tôi, bạn không cần bất kỳ plugin nào và công cụ bổ sung, mọi thứ đều rất đơn giản và đáng tin cậy!

Nhấp vào đây

Hộp bật lên ( vị trí: tuyệt đối; bán kính đường viền: 5px; nền: #fff; hiển thị: không; hộp-bóng: 1px 1px 5px rgba(0,0,0,0.2); họ phông chữ: Arial, sans-serif ; chỉ mục z: 9999999; cỡ chữ: 14px; .popup-box .close ( vị trí: tuyệt đối; trên cùng: 0px; phải: 0px; họ phông chữ: Arial, Helvetica, sans-serif; độ dày phông chữ: đậm ; con trỏ: con trỏ; màu: #434343; cỡ chữ: 20px; .popup-box .close:hover ( color: #000; ) .popup-box h2 ( đệm: 0; lề: 0; cỡ chữ: 18px; .popup-box .top ( đệm: 20px; ) .popup-box .bottom ( nền: #eee; border-top: 1px Solid #e5e5e5; đệm: 20px; viền-dưới-trái- bán kính: 5px; viền-dưới -bán kính bên phải: 5px; ) #mất điện ( nền: rgba(0,0,0,0.3); vị trí: tuyệt đối; trên cùng: 0; tràn: ẩn; z-index: 999999; left : 0; display: none;

Chúng tôi sẽ xác định một số người khác Kiểu CSS V. Mã JavaScript. Những kiểu này yêu cầu tính toán bổ sung, vì vậy sẽ tốt hơn nếu thực hiện với sử dụng jQuery. Hãy chuyển sang mã javascript.

Mã bật lên cửa sổ jQuery

Để bắt đầu, hãy kết nối tập tin jQuery thư viện. Sau đó, chúng ta khởi tạo jQuery và thêm div #blackout vào phần nội dung của tài liệu. Chúng tôi cũng xác định chiều rộng của cửa sổ bật lên.

$(document).ready(function() ( $("body").append("

"); var boxWidth = 400;

Tiếp theo, chúng ta tạo một hàm căn giữa cửa sổ. Trước đây chúng tôi đặt vị trí tuyệt đối trong CSS, chúng tôi không thể sử dụng lề: 0px auto; chúng ta cần xác định chiều rộng của màn hình, trừ chiều rộng của cửa sổ bật lên khỏi chiều rộng này và chia tất cả chiều rộng này cho 2. Chiều cao sẽ là vị trí cuộn hiện tại, cộng thêm khoảng 150px.

Trước đó một chút, chúng tôi đã tạo div #blackout, mục đích này là để che nội dung trang bằng bóng tối. Bây giờ chúng ta cần đảm bảo rằng khối này sẽ có cùng chiều rộng và chiều cao với màn hình. Điều này cũng được tính toán trong hàm này.

function centerBox() ( /* xác định dữ liệu cần thiết */ var winWidth = $(window).width(); var winHeight = $(document).height(); var ScrollPos = $(window).scrollTop(); / * Tính vị trí */ var disWidth = (winWidth - boxWidth) / 2 var disHeight = ScrollPos + 150; /* Thêm kiểu cho các khối */ $(".popup-box").css(("width" : boxWidth+ "px" , "left" : disWidth+"px", "top" : disHeight+"px")); $("#blackout").css(("width" : winWidth+"px", "height" : winHeight+" px") ; trả về sai ;

Chức năng này phải được chạy 3 lần. Khi người dùng cuộn, khi người dùng thay đổi kích thước cửa sổ, cũng như ban đầu khi tải trang.

$(window).resize(centerBox); $(window).scroll(centerBox); centerBox();

Cuối cùng, chúng ta cần thiết lập các sự kiện nhấp chuột. Khi người dùng nhấp vào khu vực bên ngoài cửa sổ, khu vực đó sẽ đóng lại. Khi người dùng nhấp vào "X", cửa sổ cũng sẽ biến mất. Trong trường hợp nhấp chuột vào bên trong cửa sổ bật lên, sẽ không có gì xảy ra. Các nhận xét đã được thêm vào mã để dễ hiểu hơn.

$("").click(function(e) ( /* Ngăn chặn các hành động mặc định */ e.preventDefault(); e.stopPropagation(); /* Lấy id ( số cuối cùng trong tên lớp liên kết) */ var name = $(this).attr("class"); var id = tên; var ScrollPos = $(window).scrollTop(); /* Hiển thị chính xác cửa sổ bật lên, che bóng, ngăn không cho cuộn */ $("#popup-box-"+id).show(); $("#mất điện").show(); $("html,body").css("tràn", "ẩn"); /* Sửa lỗi trong Firefox */ $("html").scrollTop(scrollPos); )); $("").click(function(e) ( /* Ngăn liên kết hoạt động nếu đó là cửa sổ bật lên của chúng tôi */ e.stopPropagation(); )); $("html").click(function() ( var ScrollPos = $(window).scrollTop(); /* Ẩn cửa sổ khi được nhấp vào bên ngoài khu vực của nó */ $("").hide(); $(" #blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos); )); $(".close").click(function() ( var ScrollPos = $(window).scrollTop(); /* Ẩn bóng và cửa sổ khi người dùng nhấp vào X */ $("").hide() ; $("#blackout").hide(); $("html,body").css("overflow","auto"); $("html").scrollTop(scrollPos)); ));

Về điều này, việc tạo racửa sổ bật lên bậtjQuery hoàn tất! Chúng tôi không cần tải xuống plugin và viết hàm phức tạp, chỉ một vài dòng mã. Bạn có thể tải xuống các nguồn và xem cách nó hoạt động cục bộ trên máy tính của bạn.

Có một thực tế đã biết: hầu hết khách truy cập không mua hàng trong lần truy cập đầu tiên vào trang sản phẩm của cửa hàng trực tuyến hoặc thậm chí không để lại khách hàng tiềm năng - nhưng phần lớn đó lớn đến mức nào?

Theo nghiên cứu của công ty See Why, trường hợp này xảy ra với 99% khách truy cập lần đầu tiên truy cập tài nguyên. Tất nhiên, chúng ta đang nói chủ yếu về các trang web Thương mại điện tử, nhưng câu hỏi vẫn được đặt ra: nếu 99% khách truy cập không mua bất cứ thứ gì trong lần truy cập đầu tiên, thì làm thế nào để khuyến khích họ quay lại?

Tin vui là có số liệu thống kê sau: 75% du khách vẫn sẵn sàng quay lại sau để hoàn tất việc mua hàng.

Cho dù bạn cảm thấy thế nào về cửa sổ bật lên, kỹ thuật tiếp thị này vẫn hiệu quả trong việc thu hút sự chú ý và thu thập dữ liệu liên hệ (tạo khách hàng tiềm năng).

Nói một cách đơn giản, sử dụng cửa sổ bật lên là cách nhanh nhất để đưa khách truy cập quay lại trang đích.

Tại sao?

Điều này liên quan đến một kỹ thuật thuyết phục được gọi là “ngắt theo khuôn mẫu” - khi sự chú ý của bạn, bị ru ngủ bởi một nhịp điệu hoặc trình tự tường thuật cụ thể, đột nhiên bị thu hút mạnh mẽ vào một điều gì đó bất ngờ. Bạn thường gặp phải hiệu ứng này khi xem phim, xem phim hài và thậm chí trong các cuộc đàm phán quan trọng.

Nếu chúng ta nói về nội dung và tiếp thị qua email, “gián đoạn theo mẫu” sẽ hiệu quả nhất khi người đọc đã cam kết giải quyết vấn đề và tiếp tục tương tác (đăng ký nhận bản tin, mua hàng, v.v.).

Một ví dụ từ dịch vụ Made.com. Các nhà tiếp thị cung cấp cho khách truy cập một phiếu mua hàng miễn phí trị giá 10 euro cho một món đồ nhỏ - địa chỉ E-mail. Điều này đã được thực hiện bởi vì:

  1. Mọi người đều thích quà tặng tiền mặt;
  2. 10 euro mỗi thường xuyên liên lạc qua email - giá nhỏ.

Theo ExactTarget, email là kênh tiếp thị được người tiêu dùng ưa thích nhất, với 77% người tiêu dùng chọn email thay vì các kênh tương tác khác với thương hiệu.

Có lẽ rốt cuộc cửa sổ bật lên không quá tệ?

Rất có thể bạn ghét cửa sổ bật lên và bạn có quyền làm như vậy. Tất nhiên, ai lại muốn thấy thứ gì đó như thế này ngay sau khi truy cập trang đích:

Hoặc thế này:

Bạn thậm chí có thể không biết về lĩnh vực hoạt động của công ty, nhưng bạn đã bị che kín trong các cửa sổ bật lên. Các ví dụ trên không thành công: trước hết, khách truy cập muốn tìm hiểu thêm về thương hiệu, sau đó tải xuống “Hướng dẫn miễn phí về tạo lưu lượng truy cập”, “Miễn phí sách điện tử", v.v. Tất nhiên, hầu hết người dùng đều ghét những điều như vậy và phản ứng bằng cách từ chối tương tác thêm với thương hiệu.

Có lẽ bạn nên hạ nhiệt một chút và xem kết quả kiểm tra. Những con số nói lên điều gì? Đây là dữ liệu từ thử nghiệm phân tách của một cửa sổ bật lên và nút “Không, cảm ơn” trên một ưu đãi bật lên.

Chữ Số lượt xem Số lượng email được thu thập Tỷ lệ chuyển đổi
Không, cám ơn. Tôi thích trả giá đầy đủ hơn 165 416 9928 6,0%
Tôi không quan tâm đến điều này 165 625 7961 4,81%
Không, cám ơn 165 021 7616 4,62%
KHÔNG 166 072 7433 4,48%

Ấn tượng? Sau đó, hãy xem kết quả của các công ty sử dụng hiệu quả phương pháp này.

1. Trải nghiệm với cửa sổ bật lên

Trong một ngày thông thường, dịch vụ WP Beginner nhận được khoảng 70-80 người đăng ký mới nhờ Các phương pháp khác nhau thế hệ dẫn đầu. Nhưng cơ sở đăng ký càng lớn thì kinh doanh thành công hơn, vì vậy các nhà tiếp thị của dịch vụ đã quyết định thử nghiệm cửa sổ bật lên.

Thứ đã qua?

Một cửa sổ bật lên đã được phát triển để xuất hiện khi người dùng có ý định rời khỏi trang web. Hiệu quả đạt được nhờ công nghệ theo dõi con trỏ và các phương pháp khác. Cửa sổ trông như thế này:

Kết quả là gì?

Việc sử dụng cửa sổ bật lên trên các trang chính (không phải toàn bộ trang web) đã tăng số lượt đăng ký lên 660%. Nghĩa là, từ 70-80 khách hàng tiềm năng, dịch vụ đã chuyển sang 445-470 khách hàng tiềm năng mỗi ngày - một bước nhảy vọt lên một tầm cao mới về chất lượng.

Trường hợp tiếp theo là từ Backlinko. Sau khi thêm CTA vào trang đích kèm theo lời đề nghị đăng ký nhận bản tin, tỷ lệ chuyển đổi đã giảm xuống 1,73% - một điều cần phải thực hiện khẩn cấp. Các nhà tiếp thị của công ty đã phát triển một cửa sổ bật lên xuất hiện trước mặt những người dùng quyết định rời khỏi trang đích. Đây là những gì nó trông giống như:

Hãy nhớ rằng tỷ lệ chuyển đổi là khoảng 1,7% trước khi sử dụng cửa sổ bật lên? 2 ngày sau khi cửa sổ bật lên ra mắt, số liệu thống kê đã thay đổi. Chỉ trong hai ngày, tỷ lệ chuyển đổi đã tăng từ 1,73% lên 4,83% - hơn 2 lần!

Tất nhiên, trong một thế giới mà một bài kiểm tra hiệu quả có thể tăng tỷ lệ chuyển đổi lên 100, 300%, thậm chí 1300%, kết quả của thử nghiệm này có vẻ khiêm tốn. Tuy nhiên, điều này không hoàn toàn đúng.

Trước hết, với lượng người đăng ký lớn, các nhà tiếp thị có thể tạo nội dung phù hợp với khán giả của mình và thiết lập hệ thống bán kèm. Do đó, khi tính đến doanh số bán thêm và các yếu tố khác, một người liên hệ sẽ mang lại cho dịch vụ mức trung bình là 15 USD.

Nếu cửa sổ bật lên mang lại thêm 15 người đăng ký mỗi ngày thì thu nhập hàng ngày sẽ tăng trung bình lần lượt là 225 USD và thu nhập hàng năm lần lượt là 82.125 USD. Một khoản thu nhập không tồi cho 2 phút kiểm tra cài đặt phải không?

Rõ ràng những người ghét cửa sổ bật lên đã sai. Nhưng còn có các yếu tố khác: tỷ lệ thoát và tác động của cửa sổ bật lên đối với Kinh nghiệm người dùng. Cái này thì sao?

2. Cửa sổ bật lên ảnh hưởng đến trải nghiệm người dùng và tỷ lệ thoát như thế nào?

Một trong những suy nghĩ đầu tiên khi nhắc đến pop-up là số lượng thất bại ngày càng tăng, bởi vì ngày càng có nhiều người rời khỏi trang đích do lỗi của cửa sổ bật lên, điều này hoàn toàn hợp lý. Tuy nhiên, hãy nhớ các ví dụ trên: Các nhà tiếp thị mới bắt đầu sử dụng WP không thấy sự do dự chỉ số này, cũng như Backlinko - số lần thất bại không thay đổi trong cả hai trường hợp.

Dan Zarrella đã đi đến kết luận tương tự sau khi thực hiện một loạt bài kiểm tra cá nhân. trang đích, nhận thấy rằng sự hiện diện của cửa sổ bật lên không ảnh hưởng đến tỷ lệ thoát. Điều duy nhất đã thay đổi là khi loại bỏ cửa sổ bật lên, Dan đã mất 50% khách hàng tiềm năng.

3. Trải nghiệm người dùng thì sao?

Có vẻ như du khách không quan tâm. Các nhà tiếp thị mới bắt đầu sử dụng WP chưa nhận được một lời phàn nàn nào về cửa sổ bật lên từ khách hàng của họ.

Nếu bạn nghĩ về nó, điều này có ý nghĩa. Đúng, thật khó chịu khi thấy những thứ như thế này sau khi truy cập một tài nguyên bằng liên kết từ Facebook:

Nhưng đây không phải là lý do để rời khỏi trang web trong sự tức giận. Bạn thường làm gì trong trường hợp tương tự? Đúng vậy - hãy đóng cửa sổ bật lên và tiếp tục tìm kiếm nội dung mong muốn.

Hơn nữa, việc sử dụng cửa sổ bật lên đúng cách có thể cải thiện trải nghiệm người dùng, theo gương dịch vụ Vero. Nếu bạn truy cập trang chính và không thực hiện bất kỳ hành động nào trong vòng 30 giây, bạn sẽ thấy một hộp ở góc có dòng chữ: “Điều gì đang ngăn cản bạn đăng ký Vero ngay bây giờ?”

4. Làm thế nào để phá hủy khả năng sử dụng của cửa sổ bật lên?

Tuy nhiên, bạn không thể nhúng bất kỳ quảng cáo bật lên nào vào trang đích của mình và hy vọng chuyển đổi cao. Nếu một cửa sổ bật lên không nổi bật trên trang thì ít nhất nó cũng vô dụng.

Bạn chuẩn bị rời khỏi trang đích và sau đó... Bam! Có điều gì đó kỳ lạ đã xảy ra, nút CTA xuất hiện ở đâu giữa trang? Trên thực tế, cửa sổ bật lên này được đặt chồng lên một trang không bị tối, hòa vào nền. Khi bạn không tách cửa sổ bật lên khỏi phần còn lại của trang, điều đó thực sự làm hỏng trải nghiệm người dùng.

Hóa ra, nhiều nhà tiếp thị đã sai lầm về cửa sổ bật lên—hóa ra chúng vẫn hoạt động. Bây giờ bạn sẽ tìm hiểu cách sử dụng cửa sổ bật lên trên trang đích của mình để đạt được hiệu quả tối đa.

5. Tạo cửa sổ bật lên hiệu quả

Trước khi bắt đầu tạo cửa sổ bật lên, hãy xem các loại chính của chúng. Có hai loại cửa sổ bật lên chính:

  1. Cửa sổ lớn (lớp phủ).
  2. Windows bật lên khi cuộn trang.

Lớp phủ

Chúng trông giống như ví dụ trên. Những cửa sổ như vậy che khuất toàn bộ màn hình, làm tối nền. Cửa sổ bật lên vẫn là thành phần duy nhất trên trang được người dùng hiển thị rõ ràng - trong Gần đâyĐã có xu hướng sử dụng các cửa sổ bật lên ở định dạng cụ thể này.

Nhà tiếp thị nổi tiếng Dan Zarella cũng sử dụng lớp phủ làm tối nền, nhưng bản thân cửa sổ nhỏ hơn nhiều so với bình thường:

Windows bật lên khi cuộn trang

Loại cửa sổ bật lên này xuất hiện khi người dùng cuộn trang xuống một giai đoạn nhất định - thường xuyên nhất định dạng nàyđược sử dụng trong blog và nó cực kỳ hiệu quả. Sau khi cuộn nửa trang, bạn sẽ thấy một cái gì đó như thế này:

Tùy thuộc vào phần mềm hoặc plugin bạn sử dụng, bạn có thể thử nghiệm độ sâu cuộn—người dùng cần đi bao xa để xem cửa sổ bật lên. Ngoài ra, bạn có thể đặt giao diện của cửa sổ bật lên dựa trên thời gian người dùng dành cho trang web.

Các yêu cầu tương tự áp dụng cho tiêu đề, văn bản trường và nút trên cửa sổ bật lên cũng như nội dung trên CTA. Xét cho cùng, cửa sổ bật lên là thành phần của lời kêu gọi hành động, mục đích của nó là tăng lượt xem/người đăng ký/khách hàng tiềm năng.

6. Thời điểm tốt nhấtđể hiển thị cửa sổ bật lên

Nếu chúng ta nói về việc thử nghiệm lớp phủ thì dịch vụ SumoMe đã thu thập dữ liệu sau: cho đến nay thời gian tối ưu là 5 giây sau khi khách truy cập tới trang đích.

WhichTestWon đưa ra số liệu thống kê khác nhau. Trong quá trình thử nghiệm, sự xuất hiện của lớp phủ được kiểm tra ở 15, 30 và 45 giây sau khi người dùng hạ cánh và kết quả tối ưu được hiển thị ở tùy chọn đầu tiên: sự xuất hiện của cửa sổ sau 15 giây bằng 11% lựa chọn hiệu quả hơn với 30 giây và ở mức 50% - tùy chọn với 45 giây sau khi hạ cánh.

Nhưng hãy nhớ - không có thời điểm lý tưởng để cửa sổ xuất hiện, vì các xét nghiệm là cần thiết trong từng trường hợp cụ thể. Điều này cũng đúng với câu hỏi về tần suất xuất hiện của cửa sổ bật lên. Nói một cách đơn giản, số liệu thống kê từ nguồn của người khác có thể thúc đẩy bạn thực hiện thử nghiệm của riêng mình, nhưng không nên trở thành đối tượng để bắt chước - thử nghiệm.

Hôm nay chúng ta sẽ nói về cách tạo cửa sổ bật lên của riêng bạn cho trang web của bạn. Hiện nay phương pháp này rất phổ biến, nhưng hầu hết các giải pháp để thực hiện nó đều phải trả phí. Một ví dụ về một cửa sổ không đẹp lắm (nhưng đây chỉ là ví dụ) bên trong một bài viết...

Trong bài đăng này, chúng ta sẽ tìm hiểu cách tạo một cửa sổ bật lên như thế này. Đơn giản, nhanh chóng, hiệu quả và quan trọng nhất là miễn phí!

Bất kỳ cửa sổ bật lên nào về cơ bản đều bao gồm hai phần. Đầu tiên là làm tối nền chung. Thứ hai là chính cửa sổ. Ngược lại, cửa sổ thường được chia thành tiêu đề, văn bản và biểu mẫu đăng ký. Hãy chuẩn bị phần đế cho cửa sổ của chúng ta, có tính đến cấu trúc đã chỉ định.

Chúng ta có:
fs_popup_bg— Làm mờ trang web;
fs_popup- Chính cửa sổ;
fs_popup_head- Tiêu đề cửa sổ;
fs_content— Nội dung của cửa sổ, được chia thành hai phần;

Bây giờ hãy viết các phong cách cần thiết...

Chúng ta hãy xem nhanh các kiểu cửa sổ bật lên của chúng tôi.
#fs_popup_bg- chỉ ra rằng nền của chúng tôi sẽ có màu đen và gần như mờ đục (0,9), sẽ nằm ở bên trái góc trên cùng và chiếm toàn bộ diện tích màn hình. Trong trường hợp này, độ sâu của phần tử, hay đúng hơn là độ cao của nó so với các phần tử khác, sẽ rất lớn (chắc chắn lớn hơn các phần tử khác).
#fs_popup- chỉ ra rằng cửa sổ sẽ ở trên nền một cấp (nếu không chúng ta sẽ không nhìn thấy nó). Kích thước của nó sẽ là 600px x 300px với góc tròn và một khung màu đỏ.
.fs_content_left, .fs_content_right- cho chúng ta biết rằng các khối được nhấn sang trái (cần thiết cho vị trí của chúng trên cùng cấp độ), chúng có thụt lề và phông chữ Arial.

Hãy điền vào cửa sổ của chúng tôi với nội dung:

Trong bài đăng này, chúng ta sẽ tìm hiểu cách tạo một cửa sổ bật lên như thế này. Đơn giản, nhanh chóng, hiệu quả và quan trọng nhất là miễn phí!
Hãy nhanh tay nhập E-Mail của bạn và nhận ngay một loạt thông tin hữu ích!*

Email của bạn:


* - Trường này không hoạt động. Bằng cách nhấp vào nút "Đăng ký", bạn đồng ý với việc sử dụng địa chỉ của mình cho mục đích gửi thư hàng loạt tài liệu quảng cáo. Bạn cũng để lại di sản ô tô, căn hộ và 10% thu nhập của mình cho tác giả của trang web.

Và hãy thêm phong cách của chúng tôi để có màn hình đẹp hơn:

Về cơ bản đó là tất cả. Như có thể thấy từ Ví dụ về JavaScriptđối với cửa sổ bật lên, về cơ bản nó cần thiết trong hai trường hợp:
1) Sự kiện đóng cửa sổ của chúng tôi;
2) Sự kiện click vào nút “Đăng ký”;
Sẽ không có hại gì nếu kiểm tra xem cửa sổ này có được hiển thị trên máy tính này. Làm việc với cookie khá phù hợp cho những mục đích này.

Hộp PopUP là một quảng cáo bật lên được thiết kế để thu hút lưu lượng truy cập web hoặc thu thập địa chỉ email. Những yếu tố như vậy thường là các hình thức quảng cáo trên Internet trên WorldWideWeb. Thông thường, đây là những cửa sổ mới mở trong trình duyệt web để hiển thị quảng cáo. Chúng thường được tạo bằng JavaScript bằng cách sử dụng tập lệnh chéo trang (XSS), đôi khi có tải trọng phụ và sử dụng AdobeFlash.

Một biến thể của PopUP là các quảng cáo bật lên mở trong cửa sổ trình duyệt mới ẩn trong cửa sổ trình duyệt đang hoạt động.

Lịch sử xuất xứ

Quảng cáo bật lên đầu tiên xuất hiện trên Tripod.com vào cuối những năm 1990. Ethan Zuckerman tuyên bố rằng ông đã viết mã để chạy quảng cáo trong từng cửa sổ riêng lẻ để đáp lại những phàn nàn về quảng cáo biểu ngữ. Sau đó, nhà phát triển liên tục xin lỗi về sự bất tiện mà phát minh của mình bắt đầu gây ra.

Opera là trình duyệt lớn đầu tiên có các công cụ chặn cửa sổ bật lên. Trình duyệt Mozilla sau đó đã cải thiện những phát triển này bằng cách bắt đầu chặn cửa sổ PopUP được tạo khi tải trang. Vào đầu những năm 2000, tất cả các trình duyệt web chính ngoại trừ trình duyệt web IE, cho phép người dùng loại bỏ gần như hoàn toàn các quảng cáo bật lên không mong muốn. Năm 2004, Microsoft phát hành Windows XP SP2, bổ sung tính năng chặn cho trình duyệt này.

Số đông trình duyệt hiện đạiđi kèm với các công cụ bảo vệ cửa sổ bật lên. Công cụ của bên thứ ba thường bao gồm các tính năng khác, chẳng hạn như lọc quảng cáo.

Cửa sổ bật lên

Một số loại nội dung có thể tải xuống là hình ảnh, âm nhạc miễn phí và những thứ khác - có thể gây ra cửa sổ bật lên. Ngoài ra, đôi khi chúng trông giống như các trang web bình thường và tên trang web sẽ xuất hiện trên thanh tìm kiếm. Nhiều tài nguyên sử dụng cửa sổ bật lên để hiển thị thông tin mà không làm gián đoạn nội dung hiện đang mở. khoảnh khắc này trang. Ví dụ: nếu bạn điền vào biểu mẫu trên một trang web và cần hướng dẫn bổ sung, cửa sổ PopUP sẽ cung cấp cho bạn thông tin bổ sung mà không làm bạn mất bất kỳ dữ liệu nào đã nhập vào biểu mẫu. Hầu hết các trình chặn quảng cáo bật lên đều cho phép loại tải xuống này.

Nhưng hãy lưu ý rằng một số trình cài đặt web, chẳng hạn như trình cài đặt được McAfee sử dụng, sử dụng cửa sổ bật lên để cài đặt phần mềm. Trên nhiều trình duyệt Internet, nhấn Phím Ctrl Nhấp vào liên kết sẽ bỏ qua bộ lọc.

Trong trường hợp này, việc nhấp vào (thậm chí vô tình) vào một cửa sổ bật lên có thể dẫn đến việc mở các cửa sổ khác.

Bỏ qua trình chặn cửa sổ bật lên

Sự kết hợp biểu ngữ quảng cáo và cửa sổ bật lên là "quảng cáo di chuột" sử dụng DHTML để hiển thị trên màn hình ở đầu nội dung trang. VỚI sử dụng JavaScript quảng cáo có thể được phủ lên đầu trang web trong lớp trong suốt. Quảng cáo này có thể xuất hiện trong hầu hết các trường hợp mà nhà quảng cáo muốn nó xuất hiện. Tập lệnh cửa sổ PopUP như vậy không thể được nhận thấy trước. Ví dụ: một quảng cáo có thể chứa hoạt ảnh AdobeFlash được liên kết với trang web của nhà quảng cáo. Nó cũng có thể trông giống như một cửa sổ thông thường. Vì quảng cáo là một phần của trang web nên không thể chặn quảng cáo bằng trình chặn nhưng có thể ngăn quảng cáo mở bằng cách sử dụng ứng dụng bên thứ ba(như AdBlock và AdblockPlus) hoặc sử dụng biểu định kiểu tùy chỉnh.

PopDưới

Quảng cáo này tương tự như cửa sổ PopUP thông thường nhưng nó xuất hiện ẩn sau cửa sổ trình duyệt chính thay vì xuất hiện ở phía trước. Quảng cáo bật lên trở nên phổ biến và chiếm lĩnh từ khi nào? toàn bộ màn hình máy tính, nhiều người dùng đã học cách đóng chúng ngay lập tức mà không cần nhìn. Đó là lý do tại sao PopUNDER xuất hiện, không cản trở việc người dùng xem nội dung trang web. Chúng thường không bị phát hiện cho đến khi cửa sổ trình duyệt chính được đóng hoặc thu nhỏ. Nghiên cứu đã chỉ ra rằng người dùng phản hồi tốt hơn với những quảng cáo này so với quảng cáo bật lên vì chúng không có vẻ xâm phạm.

Công nghệ quảng cáo phổ biến

TRONG quảng cáo có hai cái rất đơn giản liên quan Hàm JavaScript, được giới thiệu vào năm 1997 với trình duyệt Netscape 2.0B3. Phương pháp này được sử dụng rộng rãi trên Internet. Các nhà xuất bản và nhà quảng cáo web hiện đại sử dụng nó để tạo một cửa sổ phía trước nội dung trang, tải quảng cáo và sau đó gửi nó ra khỏi màn hình.

Hầu hết các trình duyệt hiện đại chỉ cho phép mở cửa sổ bật lên PopUP khi có một số tương tác của người dùng (chẳng hạn như nhấp chuột). Mọi cuộc gọi không tương tác ( gọi lại hẹn giờ, sự kiện tải, v.v.) sẽ dẫn đến chặn cửa sổ mới. Để khắc phục hạn chế này, hầu hết các quảng cáo bật lên đều được kích hoạt bằng cách sử dụng trình xử lý sự kiện chuột được gắn trực tiếp vào tài liệu hoặc nội dung tài liệu. Điều này cho phép bạn nắm bắt tất cả các lần nhấp chuột trên trang mà các trình xử lý sự kiện khác không sử dụng. Ví dụ: khi người dùng chọn văn bản, thao tác nhấp chuột sẽ được phát hiện bởi trình nghe gắn liền với tài liệu. Thao tác này sẽ mở một cửa sổ bật lên bằng mã trên.

Trình tạo cửa sổ PopUP "Khó khăn"

Người dùng các trang web và ứng dụng web khác nhau liên tục gặp phải các cửa sổ bật lên không mong muốn khi sử dụng trình duyệt. Thông thường, cửa sổ PopUP như vậy sẽ bị xóa bằng chức năng “đóng” hoặc “hủy”. Vì đây là phản hồi thông thường của người dùng nên các nhà phát triển bắt đầu sử dụng một số thủ thuật. Vì vậy, khi phát triển tin nhắn quảng cáođang được tạo ra các nút trên màn hình hoặc các điều khiển tương tự như tùy chọn "đóng" hoặc "hủy". Tuy nhiên, khi người dùng chọn một trong các tùy chọn này, nút sẽ thực hiện một hành động không mong muốn hoặc trái phép (ví dụ: mở một cửa sổ bật lên mới hoặc tải một tệp không mong muốn xuống hệ thống của người dùng).

Bởi vì công nghệ thiết kế web cho phép tác giả sử dụng bất kỳ hình thức “giả mạo” nào, nên một số người dùng hoàn toàn từ chối nhấp vào hoặc tương tác với bất kỳ thành phần nào bên trong cửa sổ bật lên.

Chuyển hướng URL

Đôi khi các URL được chuyển hướng đến trang quảng cáo bằng cách sử dụng chức năng chuyển hướng URL nền. Đôi khi chúng mở trong một tab mới và sau đó nội dung của tab nền cũ được thay thế bằng các trang quảng cáo sử dụng chuyển hướng. AdblockPlus, uBlock hoặc NoScript không thể chặn các chuyển hướng bật lên này. Tính năng này ngày càng được các nhà phân phối quảng cáo sử dụng để tìm cách làm cho cửa sổ PopUP hoạt động tích cực nhất.

Làm thế nào để thoát khỏi cửa sổ bật lên

Làm cách nào để loại bỏ quảng cáo trong trình duyệt? Trước hết, hãy kiểm tra các bản cập nhật. Luôn cập nhật trình duyệt của bạn sẽ giúp ích rất nhiều trong việc chống lại cửa sổ bật lên. Hầu hết các trình duyệt được thiết lập để cập nhật tự động, nhưng bạn có thể tắt tính năng này. Quá trình này thường chỉ mất vài phút.

  • Firefox: Nhấp vào nút tên ứng dụng ở góc trên cùng bên trái. Di chuột qua Trợ giúp và chọn Giới thiệu về Firefox. Thao tác này sẽ mở một cửa sổ có thông tin phiên bản trình duyệt. Nếu trình duyệt của bạn không tự động tải xuống và cài đặt.
  • Chrome: Nhấp vào nút menu ở góc trên cùng bên phải. Chọn "Giới thiệu về Chrome" ở dưới cùng, nó sẽ mở ra phần mới và trình duyệt sẽ kiểm tra các bản cập nhật. Nếu có, chúng sẽ được cài đặt tự động.
  • Internet Explorer: Phương pháp cập nhật tùy thuộc vào phiên bản trình duyệt bạn đang sử dụng. Đối với các tùy chọn cũ hơn, bạn sẽ cần phải đăng nhập vào Trung tâm Cập nhật Windows. Đối với Internet Explorer 10 và 11, bạn có thể kích hoạt cập nhật tự động bằng cách nhấp vào biểu tượng Bánh răng và chọn Giới thiệu về Internet Explorer.

Nếu cập nhật không giúp ích

Đôi khi một cửa sổ PopUP cho một trang web và những thứ tương tự phần mềmđược nhúng quá sâu để có thể được gỡ bỏ bằng cách cập nhật. Trong những trường hợp như vậy, cài đặt lại hoặc thay đổi trình duyệt web của bạn có thể giúp giải quyết vấn đề.

Tải xuống lần đầu phiên bản mới nhất trình duyệt bạn muốn sử dụng. Bạn có thể tìm thấy các liên kết tải xuống tại trang chủ mỗi ứng dụng.