Clientseitiges JavaScript

Beispiel für ein Dialogfeld, in dem der Abonnent aufgefordert wird, sein Abo zu verknüpfen

Bei der Aboverknüpfung ist clientseitiges JavaScript die einzige Möglichkeit, eine neue Verknüpfung zwischen einer PPID und dem Google-Konto eines Lesers herzustellen. Auf einer konfigurierten Seite wird dem Leser ein Dialogfeld angezeigt, in dem er aufgefordert wird, sein Abo zu verknüpfen. Wenn der Leser auf die Schaltfläche „Weiter mit Google“ klickt, kann er ein zu verknüpfendes Konto auswählen und nach Abschluss des Vorgangs zur konfigurierten Seite zurückgeleitet werden.

Die Verknüpfung der PPID mit dem Konto des Lesers erfolgt über die linkSubscription-Methode in swg.js. Die Verwendung ähnelt der vorherigen Kontoverknüpfungsfunktion (Beispiel). Statt ein Promise zu übergeben, akzeptiert die Methode jedoch ein Objekt, das die PPID enthält.

Codebeispiele

Diese clientseitigen Codebeispiele veranschaulichen, wie eine Verknüpfung initiiert wird, wie eine gültige Antwort aussieht und (optional) wie der swg.js eventManager verwendet wird, um Analyseereignisse zu überwachen und entsprechend weiterzuleiten.

Dialogfeld „Aboverknüpfung initiieren“

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

Beispielantwort

Gültige Antworten von einem erfolgreich verknüpften Konto enthalten sowohl das bei der Verknüpfung verwendete PPID als auch einen booleschen success-Status.

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

Für die Aboverknüpfung sind keine Drittanbieter-Cookies oder eine aktive Google-Sitzung des Lesers erforderlich. So kannst du die Verknüpfung jederzeit flexibel vornehmen, nicht nur nach dem Kauf. Wenn ein Leser nicht in einem Google-Konto angemeldet ist, kann er dies während des Ablaufs nachholen.

Vollständiges clientseitiges Beispiel

<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-Client-ID erstellen

Für die Aboverknüpfung ist kein OAuth-Client erforderlich. Er kann jedoch verwendet werden, um die Zulassungsliste mit autorisierten Domains für dein Projekt zu erstellen. Autorisierte Domains sind eine Liste von Domains, über die dein clientseitiges JavaScript Aufrufe ausführen darf. Deine Publikation hat wahrscheinlich bereits eine OAuth-Client-ID, die im Publisher Center für die Verwendung mit swg.js konfiguriert wurde.

Testen

Wenn du die clientseitige Implementierung der Aboverknüpfung testen möchtest, muss der Code auf einem Server mit einer autorisierten JavaScript-Quelle ausgeführt werden.

  1. In Produktionsumgebungen können autorisierte Quellen vom konfigurierten OAuth-Client oder aus der Liste der bestätigten Domains in den Publikationseinstellungen im Publisher Center stammen.
  2. Bei Entwicklungs- oder Staging-Zwecken mit einer Domain, die nicht bestätigt werden kann (z.B. einem lokalen Host oder einem nicht öffentlichen Server), muss die Domain im konfigurierten OAuth-Client aufgelistet werden.

Fehler beheben

Das häufigste Problem beim Testen von clientseitigem JavaScript besteht darin, dass beim Ausführen des JavaScript-Codes der Fehler 403 - Not Authorized zurückgegeben wird. Um dieses Problem zu beheben, müssen Sie JavaScript über eine bestätigte Domain im Publisher Center oder den Code auf einem Host ausführen, der sich in den autorisierten JS-Quellen des verknüpften OAuth-Clients befindet.