Việc cài đặt Ứng dụng web tiến bộ (PWA) có thể giúp người dùng dễ dàng tìm và sử dụng hơn. Ngay cả khi quảng bá trình duyệt, một số người dùng vẫn không nhận ra rằng họ có thể cài đặt PWA. Vì vậy, việc cung cấp trải nghiệm trong ứng dụng mà bạn có thể dùng để quảng bá và cho phép cài đặt PWA có thể sẽ rất hữu ích.
![Ảnh chụp màn hình nút cài đặt đơn giản trong PWA.](https://web.dev/static/articles/promote-install/image/screenshot-simple-instal-3b0b6b042e079.png?authuser=5&hl=vi)
Bài viết này hoàn toàn không đầy đủ nhưng giới thiệu điểm bắt đầu cho nhiều cách quảng bá việc cài đặt PWA của bạn. Bất kể bạn sử dụng mẫu, hoặc mẫu nào, tất cả đều dẫn đến cùng một mã kích hoạt quy trình cài đặt, được ghi lại trong bài viết Cách cung cấp trải nghiệm cài đặt trong ứng dụng của riêng bạn.
Các phương pháp hay nhất
Có một số phương pháp hay nhất sẽ áp dụng bất kể mẫu quảng cáo nào bạn đang sử dụng trên trang web của mình.
- Đặt chương trình khuyến mãi nằm ngoài luồng hành trình của người dùng. Ví dụ: trong trang đăng nhập PWA, hãy đặt lời kêu gọi hành động bên dưới biểu mẫu đăng nhập và nút gửi. Việc sử dụng các mẫu quảng cáo gây gián đoạn sẽ làm giảm khả năng hữu dụng của PWA và tác động tiêu cực đến các chỉ số tương tác của bạn.
- Bao gồm khả năng loại bỏ hoặc từ chối quảng cáo. Hãy nhớ lựa chọn ưu tiên của người dùng nếu họ làm như vậy và chỉ nhắc lại nếu có thay đổi trong mối quan hệ của người dùng với nội dung của bạn, chẳng hạn như khi họ đã đăng nhập hoặc hoàn tất giao dịch mua hàng.
- Kết hợp các kỹ thuật trong nhiều phần của PWA, nhưng hãy cẩn thận để không gây choáng ngợp hoặc khó chịu cho người dùng bằng hoạt động quảng cáo lượt cài đặt.
- Chỉ hiển thị chương trình khuyến mãi sau khi sự kiện
beforeinstallprompt
kích hoạt.
Quảng cáo trình duyệt tự động
Khi đáp ứng một số tiêu chí nhất định, hầu hết các trình duyệt đều tự động cho người dùng biết rằng Ứng dụng web tiến bộ của bạn có thể cài đặt được. Ví dụ: Chrome dành cho máy tính để bàn hiển thị nút cài đặt trong thanh địa chỉ.
![Ảnh chụp màn hình thanh địa chỉ cho thấy chỉ báo cài đặt.](https://web.dev/static/articles/promote-install/image/screenshot-omnibox-a-vi-4d92411b4427d.png?authuser=5&hl=vi)
![Ảnh chụp màn hình quảng cáo cài đặt do trình duyệt cung cấp.](https://web.dev/static/articles/promote-install/image/screenshot-browser-provi-bd3e42c38ef14.png?authuser=5&hl=vi)
Chrome dành cho Android sẽ hiển thị một thanh thông tin nhỏ cho người dùng, mặc dù bạn có thể ngăn điều này bằng cách gọi preventDefault()
trên sự kiện beforeinstallprompt
.
Nếu bạn không gọi preventDefault()
, biểu ngữ sẽ xuất hiện vào lần đầu tiên người dùng truy cập vào trang web của bạn và đáp ứng tiêu chí về khả năng cài đặt trên Android, rồi hiển thị lại sau khoảng 90 ngày.
Mẫu quảng cáo trên giao diện người dùng
Các mẫu quảng cáo trên giao diện người dùng có thể được dùng cho hầu hết mọi loại PWA và xuất hiện ở những vị trí như điều hướng trang web và biểu ngữ. Tương tự như mọi loại mẫu quảng cáo khác, bạn cần nắm được ngữ cảnh của người dùng để giảm thiểu tình trạng gián đoạn hành trình của người dùng.
Các trang web cân nhắc thời điểm kích hoạt giao diện người dùng của chương trình khuyến mãi sẽ đạt được số lượt cài đặt lớn hơn và tránh can thiệp vào hành trình của những người dùng không quan tâm đến việc cài đặt.
Nút cài đặt đơn giản
Trải nghiệm người dùng đơn giản nhất có thể là bao gồm nút "Cài đặt" hoặc "Tải ứng dụng" tại vị trí thích hợp trong nội dung trên web của bạn. Đảm bảo nút này không chặn chức năng quan trọng khác và ngăn hành trình của người dùng qua ứng dụng.
![Nút cài đặt tuỳ chỉnh..](https://web.dev/static/articles/promote-install/image/custom-install-button-c31a48092e91c.png?authuser=5&hl=vi)
Tiêu đề cố định
Đây là nút cài đặt và nằm trong tiêu đề trang web của bạn. Nội dung tiêu đề khác thường bao gồm thương hiệu trang web, chẳng hạn như biểu trưng và trình đơn ba đường kẻ. Tiêu đề có thể là position:fixed
hoặc không tuỳ thuộc vào chức năng của trang web và nhu cầu của người dùng.
![Nút cài đặt tuỳ chỉnh trong tiêu đề.](https://web.dev/static/articles/promote-install/image/custom-install-button-he-ae67d1ee86ff3.png?authuser=5&hl=vi)
Khi được sử dụng một cách phù hợp, việc quảng bá việc cài đặt PWA từ tiêu đề của trang web là một cách hiệu quả để giúp những khách hàng trung thành nhất dễ dàng quay lại trải nghiệm của bạn. Các pixel trong tiêu đề PWA rất quý giá, vì vậy, hãy đảm bảo lời kêu gọi hành động cài đặt có kích thước phù hợp, có tầm quan trọng cao hơn so với nội dung tiêu đề có thể có khác và không xâm phạm.
![Nút cài đặt tuỳ chỉnh trong tiêu đề](https://web.dev/static/articles/promote-install/image/custom-install-button-he-37ffcc16ba69b.png?authuser=5&hl=vi)
Đảm bảo bạn:
- Không hiện nút cài đặt trừ phi
beforeinstallprompt
đã được kích hoạt. - Đánh giá giá trị của trường hợp sử dụng đã cài đặt đối với người dùng. Hãy cân nhắc nhắm mục tiêu có chọn lọc để chỉ hiển thị chương trình khuyến mãi của bạn cho những người dùng có khả năng được hưởng lợi từ chương trình khuyến mãi đó.
- Sử dụng không gian tiêu đề quý giá một cách hiệu quả. Hãy cân nhắc những lợi ích khác khi cung cấp cho người dùng trong tiêu đề và cân nhắc mức độ ưu tiên của chương trình khuyến mãi cài đặt so với các lựa chọn khác.
Trình đơn điều hướng
![Nút cài đặt tuỳ chỉnh trong trình đơn điều hướng](https://web.dev/static/articles/promote-install/image/custom-install-button-na-58019edc6068c.png?authuser=5&hl=vi)
Trình đơn điều hướng là một nơi tuyệt vời để quảng bá việc cài đặt ứng dụng của bạn vì những người dùng mở trình đơn sẽ báo hiệu mức độ tương tác với trải nghiệm của bạn.
Đảm bảo bạn:
- Tránh làm gián đoạn nội dung điều hướng quan trọng. Đặt chương trình khuyến mãi cài đặt PWA bên dưới các mục khác trong trình đơn.
- Đưa ra nội dung thuyết trình bán hàng ngắn gọn và phù hợp để giải thích lý do người dùng sẽ được hưởng lợi từ việc cài đặt PWA của bạn.
Trang đích
Mục đích của trang đích là để quảng bá các sản phẩm và dịch vụ của bạn. Vì vậy, đây là nơi thích hợp để quảng bá những lợi ích của việc cài đặt PWA.
![Lời nhắc cài đặt tuỳ chỉnh trên một trang đích.](https://web.dev/static/articles/promote-install/image/custom-install-prompt-a-5843b12d5bc42.png?authuser=5&hl=vi)
Trước tiên, hãy giải thích tuyên bố giá trị của trang web, sau đó cho khách truy cập biết họ sẽ nhận được những gì từ việc cài đặt.
Đảm bảo bạn:
- Thu hút những tính năng quan trọng nhất với khách truy cập và nhấn mạnh các từ khoá có thể đã đưa họ đến trang đích của bạn.
- Làm cho quảng cáo cài đặt và lời kêu gọi hành động bắt mắt, nhưng chỉ sau khi bạn đã đưa ra tuyên bố giá trị rõ ràng. Rốt cuộc thì đây là trang đích của bạn.
- Hãy cân nhắc thêm chương trình khuyến mãi cài đặt cho phần ứng dụng mà người dùng dành hầu hết thời gian của họ.
Cài đặt biểu ngữ
Hầu hết người dùng đều gặp phải biểu ngữ cài đặt trong trải nghiệm trên thiết bị di động và quen thuộc với các hoạt động tương tác do biểu ngữ cung cấp. Bạn nên dùng biểu ngữ một cách cẩn thận vì chúng có thể làm gián đoạn người dùng.
![Biểu ngữ tuỳ chỉnh về việc cài đặt ở đầu trang.](https://web.dev/static/articles/promote-install/image/custom-install-banner-to-3aa411a9214c1.png?authuser=5&hl=vi)
Đảm bảo bạn:
- Chờ cho đến khi người dùng thể hiện sự quan tâm đến trang web của bạn trước khi hiển thị biểu ngữ. Nếu người dùng đóng biểu ngữ của bạn, đừng hiện lại biểu ngữ, trừ phi người dùng kích hoạt một sự kiện chuyển đổi cho biết mức độ tương tác cao hơn với nội dung của bạn, chẳng hạn như mua hàng trên trang web thương mại điện tử hoặc đăng ký tài khoản.
- Giải thích ngắn gọn về giá trị của việc cài đặt PWA trong biểu ngữ. Ví dụ: bạn có thể phân biệt quá trình cài đặt PWA với ứng dụng iOS/Android bằng cách đề cập rằng ứng dụng này hầu như không sử dụng bộ nhớ trên thiết bị của người dùng hoặc sẽ cài đặt ngay lập tức mà không cần lệnh chuyển hướng cửa hàng.
Giao diện người dùng tạm thời
Giao diện người dùng tạm thời, chẳng hạn như mẫu thiết kế Thanh thông báo nhanh, thông báo cho người dùng và cho phép họ dễ dàng hoàn tất một thao tác, trong trường hợp này là cài đặt ứng dụng. Khi được sử dụng đúng cách, các loại mẫu giao diện người dùng này sẽ không làm gián đoạn luồng người dùng và thường tự động bị đóng nếu bị người dùng bỏ qua.
![Biểu ngữ tuỳ chỉnh về việc cài đặt dưới dạng thanh thông báo nhanh.](https://web.dev/static/articles/promote-install/image/custom-install-banner-sn-fc0c5df5e9391.png?authuser=5&hl=vi)
Hiển thị thanh thông báo nhanh sau một vài lần tương tác với ứng dụng của bạn. Nếu thanh thông báo nhanh xuất hiện khi tải trang hoặc không đúng ngữ cảnh, thì thanh thông báo nhanh có thể dễ dàng bị bỏ lỡ hoặc dẫn đến tình trạng quá tải về nhận thức. Khi điều này xảy ra, người dùng sẽ chỉ cần đóng mọi thứ họ nhìn thấy. Xin lưu ý rằng người dùng mới truy cập vào trang web của bạn có thể chưa sẵn sàng cài đặt PWA của bạn. Do đó, bạn nên đợi cho đến khi người dùng nhận được tín hiệu rõ ràng về mối quan tâm trước khi sử dụng mẫu này (ví dụ: lượt truy cập lặp lại, lượt đăng nhập của người dùng hoặc sự kiện chuyển đổi tương tự).
![Biểu ngữ tuỳ chỉnh về việc cài đặt dưới dạng thanh thông báo nhanh.](https://web.dev/static/articles/promote-install/image/custom-install-banner-sn-b294fb32a9249.png?authuser=5&hl=vi)
Đảm bảo bạn:
- Hiển thị thanh thông báo nhanh trong khoảng từ 4 đến 7 giây để người dùng có đủ thời gian xem và bày tỏ cảm xúc với thanh thông báo nhanh mà không gây cản trở.
- Tránh hiển thị giao diện này trên giao diện người dùng tạm thời khác như biểu ngữ, v.v.
- Hãy chờ cho đến khi bạn nhận được tín hiệu rõ ràng về mối quan tâm của người dùng trước khi sử dụng mẫu này, ví dụ: lượt truy cập lặp lại, lượt đăng nhập của người dùng hoặc sự kiện chuyển đổi tương tự.
Sau khi chuyển đổi
Ngay sau một sự kiện chuyển đổi của người dùng (ví dụ: sau khi mua hàng trên một trang web thương mại điện tử), bạn nên áp dụng cơ hội tốt để quảng bá việc cài đặt PWA của bạn. Người dùng rõ ràng đang tương tác với nội dung của bạn và một lượt chuyển đổi thường báo hiệu rằng người dùng sẽ tương tác lại với các dịch vụ của bạn.
![Quảng cáo cài đặt sau khi chuyển đổi.](https://web.dev/static/articles/promote-install/image/an-install-promotion-con-effd5a7b38e75.png?authuser=5&hl=vi)
Hành trình đặt phòng hoặc thanh toán
Hiển thị chương trình khuyến mãi cài đặt trong hoặc sau một hành trình theo tuần tự, chẳng hạn như sau quy trình đặt phòng hoặc thanh toán. Nếu hiển thị chương trình khuyến mãi sau khi người dùng đã hoàn tất hành trình, thì bạn thường có thể làm cho chương trình khuyến mãi đó nổi bật hơn khi hành trình đã hoàn tất.
![Chương trình khuyến mãi cài đặt sau hành trình của người dùng.](https://web.dev/static/articles/promote-install/image/an-install-promotion-a-u-2e0b33d2ff618.png?authuser=5&hl=vi)
Đảm bảo bạn:
- Đưa ra lời kêu gọi hành động phù hợp. Những người dùng nào sẽ được hưởng lợi khi cài đặt ứng dụng của bạn và tại sao? Việc này có liên quan đến hành trình của họ không?
- Nếu thương hiệu của bạn có các ưu đãi độc đáo cho người dùng ứng dụng đã cài đặt, hãy đề cập đến các ưu đãi đó.
- Tránh áp dụng chương trình khuyến mãi cho các bước tiếp theo trong hành trình của bạn, nếu không, bạn có thể gây ảnh hưởng tiêu cực đến tỷ lệ hoàn thành hành trình. Trong ví dụ về thương mại điện tử ở trên, hãy lưu ý cách lời kêu gọi hành động thanh toán chính nằm phía trên chương trình khuyến mãi cài đặt ứng dụng.
Quy trình đăng ký, đăng nhập hoặc đăng xuất
Chương trình khuyến mãi này là một trường hợp đặc biệt của mẫu quảng cáo hành trình, trong đó thẻ khuyến mãi có thể nổi bật hơn.
![Nút cài đặt tuỳ chỉnh trên trang đăng ký.](https://web.dev/static/articles/promote-install/image/a-custom-install-button-401ffb4e23752.png?authuser=5&hl=vi)
Các trang này thường chỉ hiển thị cho những người dùng tương tác đã được thiết lập tuyên bố giá trị cho PWA của bạn. Thường thì không có nhiều nội dung hữu ích khác để đặt trên những trang này. Do đó, việc thực hiện một lời kêu gọi hành động lớn hơn sẽ ít gây gián đoạn hơn, miễn là lời kêu gọi hành động đó không gây cản trở.
Đảm bảo bạn:
- Tránh làm gián đoạn hành trình của người dùng trong biểu mẫu đăng ký. Nếu đó là một quy trình gồm nhiều bước, bạn có thể đợi cho đến khi người dùng hoàn tất hành trình.
- Quảng bá các tính năng phù hợp nhất với người dùng đã đăng ký.
- Hãy cân nhắc thêm một chương trình khuyến mãi cài đặt bổ sung trong các khu vực đã đăng nhập trong ứng dụng của bạn.
Mẫu quảng cáo cùng dòng
Kỹ thuật quảng cáo cùng dòng lồng ghép quảng cáo với nội dung trang web. Điều này thường tinh tế hơn so với việc quảng bá trong giao diện người dùng, vốn có một số sự đánh đổi. Bạn muốn quảng cáo của mình đủ nổi bật để những người dùng quan tâm có thể nhận thấy, nhưng không làm giảm chất lượng trải nghiệm người dùng.
Trong nguồn cấp dữ liệu
Một quảng cáo cài đặt trong nguồn cấp dữ liệu xuất hiện giữa các bài viết tin tức hoặc các danh sách thẻ thông tin khác trong PWA của bạn.
![Quảng cáo cài đặt trong nguồn cấp nội dung.](https://web.dev/static/articles/promote-install/image/an-install-promotion-with-06735d525d2b5.png?authuser=5&hl=vi)
Mục tiêu của bạn là hướng dẫn người dùng cách truy cập nội dung mà họ thích thuận tiện hơn. Tập trung vào việc quảng bá các tính năng và chức năng hữu ích cho người dùng của bạn.
Đảm bảo bạn:
- Giới hạn tần suất xuất hiện của chương trình khuyến mãi để tránh gây khó chịu cho người dùng.
- Cho phép người dùng loại bỏ chương trình khuyến mãi.
- Ghi nhớ lựa chọn đóng của người dùng.