İstemci tarafı JavaScript

Aboneden aboneliğini bağlamasını isteyen iletişim kutusu örneği

Abonelik Bağlama özelliğiyle PPID ile okuyucunun Google Hesabı arasında yeni bir ilişkilendirme oluşturmanın tek yolu istemci tarafında JavaScript'tir. Yapılandırılmış bir sayfada okuyucuya, aboneliğini bağlamasını isteyen bir iletişim kutusu gösterilir. Okuyucu "Google ile Devam Et" düğmesini tıkladıktan sonra bağlanılacak hesabı seçebilir ve işlem tamamlandığında yapılandırılan sayfaya geri gönderilebilir.

PPID, okuyucunun hesabıyla ilişkilendirilmiştir. Bu işlem, swg.js içindeki linkSubscription yöntemi kullanılarak yapılır. Kullanım, önceki Hesap Bağlama özelliğine (örnek) benzer ancak yöntem bir söz iletmek yerine PPID'yi içeren bir nesneyi kabul eder.

Kod Örnekleri

Bu istemci tarafı kod örnekleri; bağlantının nasıl başlatılacağını, geçerli bir yanıtın nasıl göründüğünü ve (isteğe bağlı olarak) analiz etkinliklerini dinleyip bunları uygun şekilde yönlendirmek için swg.js eventManager'ın nasıl kullanılacağını gösterir.

Abonelik Bağlama iletişim kutusunu başlatın

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

Örnek yanıt

Başarıyla bağlanmış bir hesaptan alınan geçerli yanıtlar, hem bağlantıda kullanılan PPID özelliğini hem de boole success durumunu içerir.

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

Abonelik bağlama, okuyucu için üçüncü taraf çerezlerinin veya etkin bir Google oturumunun kullanılmasını gerektirmez. Bu sayede, bağlantı deneyimini satın alma işleminden hemen sonra değil, okuyucunun deneyimi sırasında istediğiniz zaman başlatabilirsiniz. Okuyucular bir Google Hesabı'na giriş yapmamışsa akışın bir parçası olarak bunu yapmalarına fırsat tanırlar.

Eksiksiz İstemci Tarafı örneği

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

OAuth İstemci Kimliği oluşturun

Abonelik bağlama işlemi için OAuth istemcisi gerekli olmasa da projenizde yetkili alanların izin verilenler listesini yazmak için OAuth istemcisi kullanılabilir. Yetkilendirilen alanlar, istemci taraflı JavaScript'inizin çağrı yapmasına izin verilen alan adlarının listesidir. Yayınınız, swg.js ile kullanılmak üzere Yayıncı Merkezi'nde yapılandırılmış bir OAuth istemci kimliğine sahip olabilir.

Test

Abonelik Bağlama'nın istemci tarafı uygulamasını test etmek için kodun yetkili JavaScript kaynağına sahip bir sunucudan çalıştırılması gerekir.

  1. Üretim kullanımı için yetkili kaynaklar, yapılandırılmış OAuth İstemcisinden veya Yayıncı Merkezi'ndeki yayın ayarlarında bulunan doğrulanmış alan adları listesinden gelebilir.
  2. Alan, doğrulanamayan bir alanla (ör. localhost veya herkese açık olmayan bir sunucu) geliştirme veya hazırlık amaçlı kullanım için yapılandırılmış OAuth istemcisinde listelenmelidir.

Hata Giderme

İstemci tarafı JavaScript'i test ederken en sık karşılaşılan sorun, javascript'i çalıştırmaya çalışırken 403 - Not Authorized hatası alınmasıdır. Bu sorunu çözmek için JavaScript'i Yayıncı Merkezi'ndeki doğrulanmış bir alandan veya bağlı OAuth istemcisinin yetkilendirilmiş js kaynaklarında bulunan bir ana makinede çalıştırdığınızdan emin olun.