JavaScript sisi klien

Contoh dialog yang meminta pelanggan untuk menautkan langganannya

Dengan Penautan Langganan, JavaScript sisi klien adalah satu-satunya cara untuk membuat pengaitan baru antara PPID dan Akun Google pembaca. Di halaman yang dikonfigurasi, pembaca akan melihat dialog yang meminta mereka untuk menautkan langganan. Setelah pembaca mengklik tombol "Lanjutkan dengan Google", mereka dapat memilih akun yang akan ditautkan, dan dikirim kembali ke halaman yang dikonfigurasi setelah selesai.

Mengaitkan PPID dengan akun pembaca dilakukan menggunakan metode linkSubscription di swg.js. Penggunaannya mirip dengan fitur Penautan Akun sebelumnya (contoh), tetapi metode tersebut menerima objek yang berisi PPID, bukan meneruskan promise.

Contoh Kode

Contoh kode sisi klien ini menggambarkan cara memulai link, seperti apa respons yang valid, dan (opsional) cara menggunakan eventManager swg.js untuk memproses peristiwa analisis dan merutekannya sebagaimana mestinya.

Memulai dialog Penautan Langganan

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

Contoh respons

Respons yang valid dari akun yang berhasil ditautkan berisi PPID yang digunakan di penautan, dan status boolean success.

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

Penautan Langganan tidak memerlukan penggunaan cookie pihak ketiga atau sesi Google aktif untuk pembaca. Hal ini memungkinkan peluncuran ke pengalaman penautan kapan saja sesuai pengalaman pembaca dan bukan hanya setelah pembelian. Jika pembaca tidak login ke Akun Google, mereka akan diberi kesempatan untuk melakukannya sebagai bagian dari alur.

Contoh lengkap Sisi Klien

<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>

Membuat Client ID OAuth

Meskipun klien OAuth tidak diperlukan untuk Penautan Langganan, klien OAuth dapat digunakan untuk menulis daftar domain yang diizinkan untuk project Anda. Domain yang diizinkan adalah daftar domain tempat javascript sisi klien Anda diizinkan untuk melakukan panggilan. Publikasi Anda kemungkinan sudah memiliki Client ID OAuth yang dikonfigurasi di Pusat Penerbit untuk digunakan dengan swg.js.

  • Jika panggilan JavaScript sisi klien Penautan Langganan Anda berasal dari nama domain yang sebelumnya divalidasi, Anda tidak perlu melakukan tindakan apa pun.
  • Jika JavaScript Anda dijalankan dari nama domain baru, ikuti petunjuk konfigurasi Client ID OAuth SwG.

Pengujian

Untuk menguji penerapan sisi klien Penautan Langganan, kode harus dijalankan dari server dengan asal JavaScript yang diotorisasi.

  1. Untuk penggunaan produksi, origin yang diizinkan dapat berasal dari Klien OAuth yang dikonfigurasi, atau dari daftar domain terverifikasi di setelan publikasi dalam Pusat Penerbit.
  2. Untuk penggunaan pengembangan atau staging, dengan domain yang tidak dapat diverifikasi (misalnya localhost atau server non-publik), domain tersebut harus tercantum dalam Klien OAuth yang dikonfigurasi.

Memecahkan Masalah Error

Masalah paling umum saat menguji javascript sisi klien adalah menerima error 403 - Not Authorized saat mencoba menjalankan javascript. Untuk mengatasi hal ini, pastikan Anda menjalankan javascript dari domain yang divalidasi di Pusat Penerbit, atau bahwa Anda menjalankan kode di host yang berada dalam asal js resmi klien OAuth tertaut.