Web paywall

Important

Trước khi bắt đầu, hãy đảm bảo bạn đã cài đặt phiên bản Adapty SDK cần thiết:

  • Paywall Builder hoặc paywall tùy chỉnh: 3.6.1 trở lên (iOS), 3.15 trở lên (Android và cross-platform)
  • Flow & Paywall Builder: 4.0 trở lên (tất cả nền tảng)

Với Adapty, bạn có thể tạo một paywall hoặc flow có nút chuyển hướng người dùng sang trình duyệt để thanh toán. Sau khi hoàn tất mua hàng và quay lại ứng dụng, gói đăng ký sẽ được kích hoạt. Điều này giúp bạn bỏ qua phí của cửa hàng trong khi vẫn theo dõi được thanh toán của người dùng.

Web paywall demo
Tip

App Store chỉ cho phép tùy chọn thanh toán bên ngoài ở Mỹ và Nhật Bản.

Để sử dụng paywall dành riêng cho các thị trường này, hãy nhân bản paywall hiện tại và thiết lập web paywall. Như vậy, bạn sẽ có hai paywall gần như giống nhau: một cho Mỹ và Nhật Bản, một cho tất cả những nơi còn lại.

Cách hoạt động

Web paywall là một URL duy nhất được tạo cho từng in-app paywall của bạn. URL này mở trong trình duyệt để thanh toán và hoạt động với nhiều nhà cung cấp thanh toán khác nhau (Stripe, Paddle và các dịch vụ khác), hỗ trợ cả trang đơn giản với nút Apple Pay lẫn các flow phức tạp hơn với nhiều ưu đãi.

Web paywall overview

Paywall web hoạt động theo các bước sau:

  1. Cấu hình giao diện và cách hoạt động của trang paywall web trong trình chỉnh sửa paywall web.
  2. Liên kết paywall web trong cài đặt paywall.
  3. Trong paywall của ứng dụng, thêm một nút chuyển hướng người dùng đến trình duyệt.
  4. Khi người dùng nhấn vào nút, Adapty SDK tạo một URL duy nhất có chứa ID hồ sơ người dùng Adapty của họ.
  5. Người dùng truy cập trang paywall webthanh toán cho gói đăng ký bằng phương thức thanh toán bên ngoài.
  6. Khi họ quay lại ứng dụng, Adapty SDK kiểm tra các cập nhật hồ sơ để xác nhận gói đăng ký đã được kích hoạt.
  7. Adapty ghi lại giao dịch mua và theo dõi gói đăng ký để phát hiện các thay đổi trạng thái, chẳng hạn như gia hạn hoặc hủy.

ID hồ sơ người dùng trong URL liên kết giao dịch mua trên web với người dùng trong app. Giao dịch mua sẽ được ghi vào hồ sơ người dùng mà app của bạn đang sử dụng, vì vậy bạn không cần gọi Adapty.identify() cho người dùng mua qua web.

Bước 1. Tạo web paywall

  1. Chuẩn bị paywall để làm việc:
    • Để bật thanh toán bên ngoài cho một paywall hiện có, hãy nhân bản nó. Cách này cho phép bạn hiển thị web paywall cho phân khúc mục tiêu và paywall gốc cho tất cả người dùng còn lại.
    • Để bắt đầu từ đầu, hãy tạo một paywall mới.
  2. Trên trang Paywall, chuyển sang tab Web paywall và nhấp Create web paywall. Bạn sẽ được chuyển hướng đến một trang mới.
Tab Web paywall trong cài đặt paywall
  1. Thiết lập web paywall và kết nối phương thức thanh toán.
Tip

Để được hỗ trợ thiết lập trình chỉnh sửa bên ngoài và kết nối nhà cung cấp thanh toán, hãy xem hướng dẫn quickstart.

  1. Quay lại trang Web paywall và dán link paywall vào.
Important

Khi đưa paywall vào môi trường production, hãy đảm bảo bạn dùng đúng link được tạo ra sau khi xuất bản web paywall. Định dạng link là paywalls-....fnlfx.com.

  1. Nhấp Save.
Dán link web paywall và lưu lại

Bước 2. Kích hoạt paywall

Để sử dụng web paywall, bạn cần kích hoạt nó, và cách thực hiện tùy thuộc vào thiết lập của bạn:

  • Nếu bạn đang sử dụng Flow & Paywall Builder, bạn chỉ cần thêm một nút mới sẽ sử dụng liên kết bạn đã cung cấp để theo dõi giao dịch mua và gửi dữ liệu trở lại Adapty.
  • Nếu bạn đang sử dụng SDK, bạn phải thiết lập phương thức openWebPaywall để xử lý web paywall.

Bước 2a. Thêm nút mua hàng trên web

Nếu bạn đang dùng Flow & Paywall Builder, bạn cần thêm một nút paywall web. Nút này sẽ dùng đường link bạn đã cung cấp để theo dõi các giao dịch mua và gửi dữ liệu về cho Adapty.

  1. Mở flow và thêm một nút.

    Nếu bạn đang dùng template hoặc một paywall có sẵn, hãy thêm nút paywall web bên cạnh nút mua hàng hiện tại. Bạn có thể cấu hình nó theo cách tương tự.

  2. Trong bảng Interactions ở bên phải, nhấn Add trigger. Sau đó, gán hành động Purchase cho trigger này.

    on-tap-purchase.webp
  3. Trong cài đặt hành động, chuyển sang tab Web payment. Tại đây, chọn một sản phẩm và — tùy chọn — một ưu đãi để liên kết với nút mua hàng qua web.

  4. Dán link web paywall vào trường Web paywall URL.

  5. Mặc định, web paywall mở trong trình duyệt trong ứng dụng để người dùng không cần rời khỏi app. Nếu bạn muốn mở trong trình duyệt bên ngoài, hãy chọn Open in external browser.

web-payment-action.webp

Bước 2b. Gọi phương thức SDK

Nếu bạn đang làm việc với paywall tự phát triển, bạn cần xử lý web paywall bằng phương thức SDK. Xem hướng dẫn theo từng nền tảng:

Bước 3. Thiết lập placement

Vì App Store chỉ cho phép thanh toán bên ngoài ở Mỹ và Nhật Bản, hãy tạo một phân khúc người dùng riêng cho người dùng iOS ở các thị trường đó và thiết lập placement để nhắm đến các paywall khác nhau cho từng phân khúc. Đối với người dùng Android, không có hạn chế địa lý — hãy tạo một phân khúc Android riêng mà không cần lọc theo quốc gia.

  1. Tạo một phân khúc mới với các thuộc tính sau:
    • Country from store account: United States, Japan
    • Platform: iOS and iPadOS
    • App version: Phiên bản mới nhất sử dụng Adapty SDK.
Segment attributes for web paywall targeting
  1. Tạo một placement mới hoặc chỉnh sửa placement hiện có. Thêm một đối tượng mới với web paywall và phân khúc vừa tạo.
Placement with web paywall audience

Thêm luồng hủy đăng ký

Luồng hủy đăng ký là một trang web mà người dùng mở ra để hủy gói đăng ký của họ. Trước khi việc hủy được xử lý, luồng này có thể đề xuất tạm dừng, chuyển sang gói giảm giá, hoặc cung cấp một khoảng thời gian miễn phí. Bạn xây dựng nó trong cùng một trình chỉnh sửa với web paywall của mình, và ứng dụng của bạn mở nó qua URL. Luồng hủy sẽ hủy gói đăng ký trực tiếp với nhà cung cấp thanh toán của bạn, vì vậy ứng dụng không cần thực hiện lệnh gọi API hủy nào.

Để tạo một cancellation funnel, trong trình chỉnh sửa web paywall, hãy mở tab Cancellation. Các hành động giữ chân người dùng chỉ có sẵn trong cancellation funnel, vì vậy bạn không thể thêm chúng vào funnel phục vụ web paywall của mình. Để biết thêm về funnel, hãy xem hướng dẫn cancellation funnel của FunnelFox.

Tab Cancellation trong trình chỉnh sửa web paywall

Lấy ID hồ sơ FunnelFox của người dùng đăng ký

Một funnel hủy đăng ký xác định người dùng bằng ID hồ sơ FunnelFox của họ. Sau khi mua gói đăng ký trên web, FunnelFox ghi ID đó vào hồ sơ người dùng Adapty dưới dạng thuộc tính tùy chỉnh fnlfx_profile_id, cùng với fnlfx_funnel_id, fnlfx_session_id, vendor_profile_idvendor.

FunnelFox chỉ ghi các thuộc tính này một lần, vào lần mua gói đăng ký web đầu tiên. Các lần mua sau sẽ giữ nguyên các thuộc tính đó. Đối với consumable, FunnelFox chỉ ghi các thuộc tính này khi phần tử checkout có mức độ truy cập tùy chỉnh.

Ứng dụng của bạn đọc fnlfx_profile_id từ customAttributes trong hồ sơ người dùng. Để xem giá trị tương tự trong Adapty, hãy mở Profiles và tìm hồ sơ người dùng đó.

Note

Adapty lưu tối đa 30 custom attribute cho mỗi hồ sơ người dùng. Khi hồ sơ đã đầy, Adapty sẽ bỏ các attribute dư mà không trả về lỗi, và FunnelFox cũng sẽ không gửi lại chúng. Nếu ứng dụng của bạn tự thiết lập các custom attribute riêng, hãy chừa chỗ cho năm attribute của FunnelFox.

Mở funnel từ ứng dụng của bạn

Ứng dụng của bạn tự tạo URL hủy gói. URL này không điền vào trường Web paywall URL — trường đó dành cho paywall bán sản phẩm, và Adapty sẽ thêm adapty_profile_id vào đó, không phải fpid.

Kết hợp URL funnel hủy gói đã xuất bản của bạn với fnlfx_profile_id của người đăng ký:

https://<your-project>.fnlfx.com/cancel?fpid=<fnlfx_profile_id>

Truyền giá trị thuộc tính đúng như đã lưu, không thêm tiền tố. Mở URL khi người dùng nhấn vào nút hủy của bạn.

Người dùng có thể đóng trang tại bất kỳ thời điểm nào, kể cả sau khi flow hủy gói đăng ký. Đừng coi việc họ quay lại app là xác nhận. Hãy fetch hồ sơ người dùng để lấy trạng thái hiện tại. Gói đăng ký đã hủy vẫn giữ nguyên mức độ truy cập cho đến khi hết thời hạn đã thanh toán.