VietNetwork.Vn

Bạn có muốn thêm thông báo tab trình duyệt cho trang web của mình không?

Thêm thông báo tab trình duyệt có thể là một cách tuyệt vời để thu hút lại sự chú ý của người dùng, có thể làm giảm tỷ lệ từ bỏ giỏ hàng, đồng thời tăng doanh thu và doanh thu.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm thông báo tab trình duyệt trong WordPress.

1. Thông báo tab trình duyệt là gì?

Thông báo tab trình duyệt là khi bạn thay đổi điều gì đó trên tab cho trang web của mình khi người dùng đang tập trung vào một trang web khác trong trình duyệt của họ.

Bằng cách thêm tính năng thông báo tab trình duyệt trên trang web WordPress của bạn, bạn có thể thu hút sự chú ý của người dùng ngay khi họ mở một tab khác để rời khỏi trang của bạn.

Ví dụ: bạn có thể thay đổi biểu tượng yêu thích của trang web, tạo hoạt ảnh cho trang web, viết thông báo tùy chỉnh hoặc chỉ flash tab.

Nếu bạn có cửa hàng trực tuyến, thông báo tab trình duyệt thực sự có thể giúp ích cho bạn. Những thông báo này sẽ mang lại những khách hàng bị phân tâm, giảm tỷ lệ bỏ qua giỏ hàng và tăng mức độ tương tác của khách hàng.

Sử dụng tính năng này, bạn có thể thông báo cho khách hàng của mình về việc từ bỏ giỏ hàng hoặc thậm chí giảm giá nếu họ quay lại chú ý đến trang web của bạn.

Dưới đây là một ví dụ về thông báo tab trình duyệt.


Như đã nói, chúng tôi sẽ chỉ cho bạn cách thêm ba loại thông báo trình duyệt khác nhau vào WordPress.

• Cài đặt WPCode để thêm thông báo tab trình duyệt
• Loại 1. Hiển thị các bản cập nhật mới dưới dạng thông báo tab trình duyệt
• Loại 2. Thay đổi Favicon làm Thông báo tab trình duyệt
• Loại 3. Thay đổi Tiêu đề Trang web dưới dạng Thông báo Tab Trình duyệt

2. Cài đặt WPCode để thêm thông báo tab trình duyệt

Bạn có thể dễ dàng thêm thông báo tab trình duyệt trên trang web của mình bằng cách thêm mã tùy chỉnh trong WordPress. Thông thường, bạn phải chỉnh sửa tệp tin functions.php của chủ đề, nhưng điều đó có thể làm hỏng trang web của bạn dù chỉ với một lỗi nhỏ.

Đó là lý do tại sao chúng tôi khuyên bạn nên sử dụng WPCode, plugin đoạn mã phổ biến và an toàn nhất, được hơn 1 triệu trang web sử dụng.

Trước tiên, bạn sẽ cần cài đặt và kích hoạt plugin WPCode miễn phí. Để biết thêm chi tiết, bạn có thể xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Khi bạn đã kích hoạt plugin, chỉ cần truy cập Code Snippets » All Snippets trong bảng quản trị WordPress của bạn.


Chỉ cần nhấp vào nút 'Thêm mới', nút này sẽ đưa bạn đến trang 'Thêm đoạn mã'.

Bây giờ, hãy di chuột qua tùy chọn 'Add Your Custom Code (New Snippet)' và nhấp vào nút 'Use Snippet' bên dưới nó.


Sau đó, plugin sẽ đưa bạn đến trang 'Tạo đoạn mã tùy chỉnh'.

Cho dù bạn sử dụng loại thông báo tab trình duyệt nào, bạn sẽ nhập mã bên dưới bằng cách sử dụng trang này.


3. Loại 1. Hiển thị các bản cập nhật mới dưới dạng thông báo tab trình duyệt

Nếu bạn sử dụng mã bên dưới, người dùng của bạn sẽ được thông báo về bất kỳ bản cập nhật mới nào đang được đăng trên trang web của bạn. Một số sẽ xuất hiện trong tab để cho họ biết họ còn thiếu bao nhiêu mục mới.

Ví dụ: nếu bạn có một cửa hàng trực tuyến và bạn vừa thêm một số sản phẩm mới vào kho, người dùng sẽ thấy thông báo tab trình duyệt dưới dạng một số cho biết có bao nhiêu sản phẩm mới đã được thêm vào.

Bạn có thể thấy điều này trong hình dưới đây:


Khi bạn đang ở trên trang 'Tạo đoạn mã tùy chỉnh', bạn cần đặt tên cho đoạn mã của mình. Bạn có thể chọn bất cứ thứ gì giúp bạn xác định mã. Điều này chỉ dành cho bạn.

Tiếp theo, bạn sẽ chọn 'Loại mã' từ trình đơn thả xuống ở bên phải. Đây là mã JavaScript, vì vậy chỉ cần nhấp vào tùy chọn 'Đoạn mã JavaScript'.


Sau đó, tất cả những gì bạn phải làm là sao chép và dán đoạn mã sau vào khu vực 'Xem trước mã'.
   
let count = 0;
const title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

Khi bạn đã dán mã, hãy cuộn xuống phần 'Chèn'. Bạn sẽ tìm thấy hai tùy chọn: 'Chèn tự động' và 'Mã ngắn'.

Chỉ cần chọn tùy chọn 'Chèn tự động' và mã của bạn sẽ được tự động chèn và thực thi trên trang web của bạn.

Bạn có thể sử dụng phương pháp 'Mã ngắn' nếu bạn chỉ muốn hiển thị các cập nhật mới trên các trang cụ thể nơi bạn thêm mã ngắn.


Khi bạn đã chọn tùy chọn của mình, hãy quay lại đầu trang.

Nhấp vào nút chuyển từ 'Không hoạt động' sang 'Hoạt động' ở góc trên cùng bên phải, sau đó chỉ cần nhấp vào nút 'Lưu đoạn mã'.


Sau khi hoàn tất, đoạn mã tùy chỉnh của bạn sẽ được thêm vào trang web của bạn và bắt đầu hoạt động.

4. Loại 2. Thay đổi Favicon làm Thông báo tab trình duyệt

Với phương pháp này, bạn sẽ hiển thị một biểu tượng yêu thích khác trên tab trình duyệt của trang web khi người dùng điều hướng sang một tab khác.

Favicon là một hình ảnh nhỏ mà bạn nhìn thấy trên trình duyệt web. Hầu hết các doanh nghiệp sẽ sử dụng phiên bản logo nhỏ hơn của họ.


Bây giờ, để thay đổi biểu tượng yêu thích trên tab trình duyệt của bạn, chúng tôi sẽ sử dụng plugin WPCode.

Trước tiên, hãy truy cập Đoạn mã »Tất cả Đoạn mã trong bảng quản trị WordPress của bạn và sau đó nhấp vào nút 'Thêm mới'.

Tiếp theo, chỉ cần di chuột qua tùy chọn 'Add Your Custom Code (New Snippet)' và nhấp vào nút 'Use Snippet' bên dưới nó

Thao tác này sẽ đưa bạn đến trang 'Tạo đoạn mã tùy chỉnh'. Bạn có thể bắt đầu bằng cách nhập tiêu đề cho đoạn mã của mình.

Giờ chỉ cần chọn 'Loại mã' từ trình đơn thả xuống ở bên phải. Đối với đoạn mã này, bạn cần chọn tùy chọn 'Đoạn mã HTML'.


Khi bạn đã hoàn thành việc đó, chỉ cần sao chép và dán đoạn mã sau vào 'Xem trước mã.'
   
<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>
 
<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';
 
function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() {
        clearInterval( update );
    }, 3100);
}
Sau khi bạn đã dán mã, chỉ cần xóa các liên kết favicon ví dụ khỏi mã và thay thế chúng bằng hình ảnh của riêng bạn.


Hãy nhớ rằng, những hình ảnh bạn chọn làm biểu tượng yêu thích phải được tải lên thư viện phương tiện của trang web WordPress của bạn.

Nếu không, mã sẽ không hoạt động và biểu tượng yêu thích của bạn sẽ hiển thị như bình thường.


Khi bạn đã dán các liên kết vào biểu tượng yêu thích mới của mình, hãy cuộn xuống phần 'Chèn'. Tại đây, bạn sẽ tìm thấy hai tùy chọn: 'Chèn tự động' và 'Mã ngắn'.

Bạn có thể chọn tùy chọn 'Chèn Tự động' nếu bạn muốn tự động nhúng mã vào mỗi trang.


Để chỉ thay đổi biểu tượng yêu thích trên các trang cụ thể, hãy chọn tùy chọn 'Mã ngắn' và dán tùy chọn đó vào bất kỳ khu vực nào hỗ trợ mã ngắn, chẳng hạn như tiện ích thanh bên hoặc ở cuối trình chỉnh sửa nội dung.

Sau đó, chỉ cần đi tới đầu trang và chuyển nút chuyển từ 'Không hoạt động' sang 'Hoạt động' ở góc trên cùng bên phải, rồi nhấp vào nút 'Lưu đoạn mã'.

Sau đó, biểu tượng yêu thích của bạn sẽ bắt đầu thay đổi dưới dạng thông báo tab trình duyệt.

5. Loại 3. Thay đổi Tiêu đề Trang web dưới dạng Thông báo Tab Trình duyệt

Nếu bạn muốn thay đổi tiêu đề trang web để thu hút lại sự chú ý của khách truy cập, thì bạn có thể sử dụng phương pháp này.

Bằng cách sử dụng đoạn mã này, tiêu đề trang web của bạn sẽ thay đổi để hiển thị thông báo bắt mắt khi người dùng chuyển sang tab khác trong trình duyệt.


Chúng tôi sẽ sử dụng plugin WPCode để thay đổi tiêu đề trang web của bạn dưới dạng thông báo tab trình duyệt.

Để truy cập trang 'Tạo đoạn mã tùy chỉnh', hãy truy cập Đoạn mã »Tất cả đoạn mã và chỉ cần nhấp vào nút 'Thêm mới'.

Sau đó, chỉ cần chọn tùy chọn 'Thêm mã tùy chỉnh của bạn' như minh họa trong các ví dụ ở trên.

Bây giờ bạn đang ở trang 'Tạo đoạn mã tùy chỉnh', hãy bắt đầu bằng cách nhập tiêu đề cho đoạn mã của bạn.

Tiếp theo, bạn sẽ phải chọn 'Loại mã' từ trình đơn thả xuống ở bên phải. Vì đây là mã JavaScript, chỉ cần nhấp vào tùy chọn 'Đoạn mã JavaScript'.


Sau đó, cuộn xuống tùy chọn 'Vị trí' và nhấp vào menu thả xuống bên cạnh.

Từ trình đơn thả xuống, chỉ cần nhấp vào tùy chọn 'Site Wide Footer'.


Sau đó, tất cả những gì bạn phải làm là sao chép và dán đoạn mã sau vào 'Xem trước mã'.
   
function changeTitleOnBlur() {
    var timer     = null;
    var title     = document.title;
    var altTitle  = 'Return to this page!';
    window.onblur = function() {
        timer = window.setInterval( function() {
            document.title = altTitle === document.title ? title : altTitle;
        }, 1500 );
    }
    window.onfocus = function() {
        document.title = title;
        clearInterval(timer);
    }
}
 
changeTitleOnBlur();
Khi bạn đã dán mã, bây giờ bạn có thể chỉnh sửa mã và chỉ cần viết bất kỳ thông báo nào bạn muốn hiển thị trên tab trình duyệt của mình trong mã.

Để viết tin nhắn bạn muốn, chỉ cần đi đến var altTitle = 'Return to this page!'; dòng và xóa văn bản giữ chỗ bằng tin nhắn cho thông báo tab trình duyệt của bạn.


Tiếp theo, cuộn xuống phần 'Chèn', tại đây bạn sẽ tìm thấy hai phương thức chèn: 'Chèn Tự động' và 'Mã ngắn'.

Nếu bạn nhấp vào tùy chọn 'Chèn tự động', thông báo tab trình duyệt của bạn sẽ hoạt động trên mọi trang. Tuy nhiên, nếu bạn chỉ muốn thông báo bắt mắt của mình trên các trang cụ thể, bạn có thể chọn tùy chọn 'Mã ngắn'.


Ví dụ: bạn có thể chỉ muốn thêm mã này trên trang 'Thêm vào giỏ hàng' để mã có thể giảm tỷ lệ bỏ qua giỏ hàng trên trang web của bạn.

Nếu đúng như vậy, bạn có thể chọn tùy chọn Shortcode.

Tất cả những gì còn lại sau đó là đi đến đầu trang và chuyển nút chuyển từ 'Không hoạt động' sang 'Hoạt động', sau đó nhấp vào nút 'Lưu đoạn mã'.


Đó là nó! Bây giờ, thông báo tab trình duyệt của bạn sẽ cảnh báo những người dùng rời khỏi trang web của bạn.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm thông báo tab trình duyệt trong WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm thông báo đẩy web vào trang web WordPress của bạn và xem các lựa chọn hàng đầu của chúng tôi về các plugin WordPress phải có để phát triển trang web của bạn.