Code JavaScript côté client

Remarque :Si votre publication utilise d'autres fonctionnalités de S'abonner avec Google, l'utilisation de swg.js côté client suppose qu'une publication a déjà configuré et initialisé la bibliothèque, comme illustré sur le site de développement S'abonner avec Google. L'utilisation de S'abonner avec Google avec l'association d'abonnement est facultative.

Avec l'association d'abonnement, JavaScript côté client est le seul moyen d'associer un PPID et le compte Google d'un lecteur. Sur une page configurée, une boîte de dialogue s'affiche invitant le lecteur à associer son abonnement. Lorsque le lecteur clique sur le bouton "Continuer avec Google", il peut choisir le compte à associer et être ensuite renvoyé vers la page configurée.

L'association du PPID au compte du lecteur s'effectue via la méthode linkSubscription de swg.js. L'utilisation est semblable à l'ancienne fonctionnalité d'association de comptes (exemple), mais au lieu de transmettre une promesse, la méthode accepte un objet contenant le PPID.

Exemples de code

Ces exemples de code côté client montrent comment créer un lien, à quoi ressemble une réponse valide et (éventuellement) comment utiliser l'eventManager swg.js pour écouter les événements d'analyse et les acheminer en conséquence.

Afficher la boîte de dialogue d'association d'abonnement

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

Remarque :N'invitez pas les utilisateurs sans condition. Vous ne devez pas envoyer d'invite aux utilisateurs qui ont déjà associé leur abonnement et vous devez retarder la demande aux utilisateurs qui ont récemment refusé d'associer leur abonnement.

Exemple de réponse

Les réponses valides d'un compte correctement lié contiennent à la fois le PPID utilisé dans l'association et un état success booléen.

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

L'association d'abonnement ne nécessite pas l'utilisation de cookies tiers ni d'une session Google active pour le lecteur. Cette flexibilité permet de lancer l'association à tout moment dans l'expérience d'un lecteur, et pas seulement après un achat. Si un lecteur n'est connecté à aucun compte Google, il aura la possibilité de le faire lors du processus.

Exemple complet côté client

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

Créer un ID client OAuth

Bien qu'aucun client OAuth ne soit nécessaire pour l'association d'abonnement, vous pouvez en utiliser un pour créer la liste d'autorisation des domaines autorisés de votre projet. Les domaines autorisés sont une liste de domaines à partir desquels votre code JavaScript côté client peut passer des appels. Un ID client OAuth est probablement déjà configuré pour votre publication dans le Centre pour les éditeurs. Vous pouvez l'utiliser avec swg.js.

• Si les appels JavaScript côté client de l'association d'abonnement proviennent d'un nom de domaine déjà validé, aucune action n'est requise.
• Si votre code JavaScript s'exécute à partir d'un nouveau nom de domaine, suivez les instructions de configuration de l'ID client OAuth S'abonner avec Google.

Remarque :Créer et utiliser un client OAuth n'est disponible que pour les publications qui lancent l'abonnement après avoir lancé S'abonner avec Google.

Tests

Pour tester l'implémentation côté client de l'association d'abonnement, le code doit être exécuté à partir d'un serveur avec une origine JavaScript autorisée.

1. Pour une utilisation en production, les origines autorisées peuvent provenir du client OAuth configuré ou de la liste de domaines validés dans les paramètres de la publication dans le Centre pour les éditeurs.
2. Dans le cas d'une utilisation en développement ou en préproduction, si le domaine n'est pas vérifiable (localhost ou serveur non public, par exemple), il doit être répertorié dans le client OAuth configuré.

Remarque:L'ajout de domaines à la liste des origines autorisées du client OAuth peut prendre plus de 30 minutes avant qu'ils ne soient disponibles.

Important:Pour effectuer des tests en continu avec le même compte d'abonnement, vous pouvez dissocier manuellement le compte depuis la page Mes comptes de Google.

Résoudre les erreurs

Le problème le plus courant lors du test du code JavaScript côté client est la réception d'une erreur 403 - Not Authorized lorsque vous tentez d'exécuter ce code. Pour résoudre ce problème, assurez-vous que vous exécutez le code JavaScript à partir d'un domaine validé dans le Centre pour les éditeurs ou sur un hôte qui figure dans les origines JavaScript autorisées du client OAuth associé.