JavaScript phía máy khách

Ví dụ về hộp thoại yêu cầu người đăng ký liên kết gói thuê bao của họ

Với tính năng Liên kết gói thuê bao, JavaScript phía máy khách là cách duy nhất để tạo mối liên kết mới giữa PPID với Tài khoản Google của người đọc. Trên trang đã định cấu hình, độc giả sẽ nhìn thấy hộp thoại yêu cầu họ liên kết gói thuê bao. Sau khi nhấp vào nút "Tiếp tục với Google", người đọc có thể chọn một tài khoản để liên kết và được chuyển trở lại trang đã định cấu hình sau khi hoàn tất.

Bạn có thể liên kết PPID với tài khoản của độc giả bằng phương thức linkSubscription trong swg.js. Cách sử dụng tương tự như tính năng Liên kết tài khoản trước đây (ví dụ), nhưng thay vì truyền lời hứa, phương thức này sẽ chấp nhận một đối tượng chứa PPID.

Ví dụ về mã

Các ví dụ về mã phía máy khách này minh hoạ cách bắt đầu một đường liên kết, hình thức của phản hồi hợp lệ và cách sử dụng eventManager swg.js (không bắt buộc) để theo dõi các sự kiện phân tích và định tuyến chúng cho phù hợp.

Bắt đầu hộp thoại Liên kết gói thuê bao

const result = await subscriptions.linkSubscription({publisherProvidedId:6789})

Phản hồi mẫu

Phản hồi hợp lệ từ một tài khoản được liên kết thành công chứa cả PPID được sử dụng trong liên kết và trạng thái boolean success.

console.log(result) //{publisherProvidedId: 6789, success: true}

Tính năng Liên kết gói thuê bao không yêu cầu sử dụng cookie của bên thứ ba hoặc một phiên Google đang hoạt động cho trình đọc. Tính năng này cho phép độc giả khởi chạy trải nghiệm liên kết bất cứ lúc nào, chứ không chỉ sau khi mua hàng. Nếu chưa đăng nhập vào Tài khoản Google, độc giả sẽ có cơ hội đăng nhập trong quy trình.

Ví dụ đầy đủ về phía máy khách

<script
  async
  type="application/javascript"
  subscriptions-control="manual"
  src="https://news.google.com/swg/js/v1/swg.js">
</script>

<script>

  function linkSubscription(ppid) {
    self.SWG.push(async (subscriptions) => {
      try {
        const result = await subscriptions.linkSubscription({
          publisherProvidedId: ppid,
        })
        console.log(result)
      } catch(e) {
        console.log(e)
      }
    })
  }

  document.addEventListener('DOMContentLoaded', function () {
    (self.SWG = self.SWG || []).push(subscriptions => {
      subscriptions.init("PUBLICATION_ID");

      //Configure the event manager for analytics integration
      subscriptions.getEventManager().then(manager => {
        manager.registerEventListener((event) => {
            // Add code here to send the event to your analytics
            // sendToAnalytics(event);
          console.log(event);
        });
      });
    });

    document
      .querySelector("SELECTOR")
      .addEventListener('click', function(){
        linkSubscription(PPID)
      })
  });
</script>

Tạo mã ứng dụng OAuth

Mặc dù không bắt buộc phải có ứng dụng OAuth cho cấu hình Liên kết gói thuê bao, nhưng bạn có thể dùng ứng dụng OAuth để tạo danh sách cho phép các miền được uỷ quyền cho dự án. Miền được uỷ quyền là danh sách các miền mà từ đó javascript phía máy khách được phép thực hiện lệnh gọi. Ấn bản của bạn có thể đã có mã ứng dụng khách OAuth được định cấu hình trong Trung tâm xuất bản để dùng với swg.js.

Kiểm thử

Để kiểm thử việc triển khai phía máy khách của cấu hình Liên kết gói thuê bao, mã này phải chạy từ một máy chủ có nguồn gốc JavaScript được uỷ quyền.

  1. Để sử dụng phiên bản phát hành công khai, các nguồn gốc được uỷ quyền có thể đến từ Ứng dụng OAuth đã thiết lập hoặc từ danh sách các miền đã xác minh ở phần cài đặt ấn bản trong Trung tâm xuất bản.
  2. Để sử dụng cho mục đích phát triển hoặc thử nghiệm, với một miền không thể xác minh (ví dụ: localhost hoặc một máy chủ không công khai), miền đó phải được liệt kê trong Ứng dụng OAuth đã định cấu hình.

Khắc phục lỗi

Vấn đề phổ biến nhất khi kiểm thử JavaScript phía máy khách là gặp lỗi 403 - Not Authorized khi tìm cách chạy JavaScript. Để giải quyết vấn đề này, hãy đảm bảo bạn đang chạy JavaScript từ một miền đã xác thực trong Trung tâm xuất bản hoặc đang chạy mã trên một máy chủ lưu trữ có nguồn gốc js được cho phép của ứng dụng OAuth đã liên kết.