Kullanıcı hesaplarını bağlama (İstemci tarafı JavaScript)

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

Abonelik Bağlantısı'nda, PPID ile okuyucunun Google Hesabı arasında yeni bir ilişki oluşturmanın tek yolu istemci tarafı JavaScript'tir. Yapılandırılmış bir sayfada, okuyucuya aboneliklerini bağlamalarını isteyen bir iletişim kutusu gösterilir. Okuyucu "Google ile devam et" düğmesini tıkladıktan sonra, bağlanacağı bir hesap seçebilir ve işlemi tamamladıktan sonra yapılandırılmış sayfaya geri gönderilebilir.

Abonelik Bağlantısı, okuyucu için üçüncü taraf çerezlerinin veya etkin bir Google oturumunun kullanılmasını gerektirmez. Bu esneklik, bağlantı deneyiminin yalnızca satın alma işleminden sonra değil, okuyucunun deneyiminde herhangi bir zamanda başlatılmasına olanak tanır. Bir okuyucu Google Hesabı'nda oturum açmadıysa akış kapsamında oturum açma fırsatı verilir.

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 dinlemek ve uygun şekilde yönlendirmek için swg.js eventManager'ın nasıl kullanılacağını gösterir.

PPID'nin tek bir yayın için okuyucunun hesabıyla ilişkilendirilmesi, swg.js'daki linkSubscription yöntemi kullanılarak yapılır. Kullanımı, önceki hesap bağlama özelliğine (örnek) benzer ancak yöntem, bir söz verme yerine PPID içeren bir nesneyi kabul eder.

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

Örnek yanıt (arayüz)

Başarıyla bağlanan bir hesaptan gelen geçerli yanıtlar hem bağlantıda kullanılan PPID değerini hem de doğru/yanlış success durumunu içerir.

{
  publisherProvidedId: 6789,
  success: true
}

Birden fazla yayını birleştirme

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

linkSubscriptions işlevine bağımsız değişken olarak bir nesne göndererek abonelik bağlama için birden fazla yayını tek seferde paket halinde satın alabilirsiniz. linkTo özelliği, her nesnenin belirli bir publicationId'u ve bağlanacak ilgili publisherProvidedId'yi (PPID) temsil ettiği bir nesne dizisidir.

const result = await subscriptions.linkSubscriptions({linkTo: [
  { publicationId: 'pubId1', publisherProvidedId: 'ppid1' },
  { publicationId: 'pubId2', publisherProvidedId: 'ppid2' },
  
]});

Örnek yanıtlar (arayüz)

anyFailure (boole) ve anySuccess (boole) alanları, paket aboneliği bağlama denemesinde başarı veya başarısızlık olup olmadığını belirtir. links alanı, her yayın için sonuçların ayrıntılarını içerir.

Tüm yayınlara başarılı bir şekilde bağlanma
{
  "anyFailure": false,
  "anySuccess": true,
  "links": [{
    "publicationId": "CAowqfCKCw",
    "publisherProvidedId": "370720",
    "success": true
  },
  {
    "publicationId": "CAow5rTUCw",
    "publisherProvidedId": "171385",
    "success": true
  }]
}
{
  "anyFailure": true,
  "anySuccess": true,
  "links": [{
    "publicationId": "CAowqfCKCw",
    "publisherProvidedId": "370720",
    "success": false
  },
  {
    "publicationId": "CAow5rTUCw",
    "publisherProvidedId": "171385",
    "success": true
  }]
}

linkSubscription için istemci tarafı örneğini tamamlama

<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 istemci kimliği oluşturma

Abonelik bağlama işlemi için OAuth istemcisi gerekmese de projenizin yetkili alan adlarının izin verilenler listesini oluşturmak için OAuth istemcisi kullanılabilir. Yetkili alanlar, istemci tarafı JavaScript'inizin çağrı yapmasına izin verilen alanların listesidir. Yayınınızda, swg.js ile kullanılmak üzere Yayıncı Merkezi'nde yapılandırılmış bir OAuth istemci kimliği zaten mevcut olabilir.

  • Abonelik Bağlantısı istemci tarafı JavaScript çağrılarınız daha önce doğrulanmış bir alan adından geliyorsa herhangi bir işlem yapmanız gerekmez.
  • JavaScript'iniz yeni bir alan adından çalışıyorsa SwG OAuth istemci kimliği yapılandırma talimatlarını uygulayın.

Test

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

  1. Üretim kullanımı için yetkili kaynaklar, yapılandırılmış OAuth istemcisinden veya Publisher Center'daki yayın ayarlarındaki doğrulanmış alanlar listesinden gelebilir.
  2. Doğrulanamayan bir alan (ör. localhost veya herkese açık olmayan bir sunucu) ile geliştirme veya hazırlık amaçlı kullanım için alan, yapılandırılmış OAuth istemcisinde listelenmelidir.

Hataları 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 Publisher Center'da doğrulanmış bir alandan çalıştırdığınızdan veya kodu, bağlı OAuth istemcisinin yetkili js kaynaklarında bulunan bir barındırıcıda çalıştırdığınızdan emin olun.

Sonraki adım

İstemci tarafı JavaScript entegrasyonunu tamamladığınız için tebrikler. Artık sunucu tarafı entegrasyonuna geçebilirsiniz. Bu, okuyucularınızın haklarıyla ilgili bilgileri senkronize etmek için gerekli bir adımdır. Gerekli sunucu tarafı UpdateReaderEntitlements işlevini uygulayıp kullandığınızda, doğru aboneler için doğru makalelerin öne çıkarılmasını sağlarsınız.