Cómo vincular cuentas de usuario (JavaScript del cliente)

Ejemplo del diálogo que le solicita al suscriptor que vincule su suscripción

Con la Vinculación de suscripciones, el código JavaScript del cliente es la única forma de crear una nueva asociación entre un PPID y la Cuenta de Google de un lector. En una página configurada, se le presenta un diálogo al lector en el que se le pide que vincule su suscripción. Luego de que el lector hace clic en el botón "Continuar con Google", puede elegir una cuenta para vincular y, una vez que completa el proceso, regresa a la página configurada.

La Vinculación de suscripciones no requiere el uso de cookies de terceros o de una sesión de Google activa para el lector. Esta flexibilidad permite iniciar la experiencia de vinculación en cualquier momento de la experiencia del lector, y no solo después de una compra. Si un lector no accedió con una Cuenta de Google, se le ofrece hacerlo como parte del flujo.

Ejemplos de código

Estos ejemplos de código del cliente muestran cómo iniciar un vínculo, cómo se ve una respuesta válida y (opcionalmente) cómo usar el eventManager de swg.js para escuchar los eventos de estadísticas y enrutarlos según corresponda.

La asociación del PPID con la cuenta del lector para una sola publicación se realiza a través del método linkSubscription en swg.js. El uso es similar a la función anterior de Vinculación de cuentas (ejemplo), pero, en lugar de pasar una promesa, el método acepta un objeto que contiene el PPID.

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

Respuesta de muestra (interfaz)

Las respuestas válidas de una cuenta vinculada contienen el PPID utilizado en el vínculo y el estado success booleano.

{
  publisherProvidedId: 6789,
  success: true
}

Agrupa varias publicaciones

Ejemplo del diálogo que le solicita al suscriptor que vincule varias suscripciones con publicaciones

Puedes agrupar varias publicaciones para la vinculación de suscripciones a la vez pasando un objeto como argumento a la función linkSubscriptions. La propiedad linkTo es un array de objetos, en el que cada objeto representa un publicationId específico y su publisherProvidedId (PPID) correspondiente para vincular.

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

Respuestas de muestra (interfaz)

Los campos anyFailure (booleano) y anySuccess (booleano) indican si hubo algún error o éxito en el intento de vinculación de la suscripción al paquete. El campo links contiene detalles de los resultados de cada una de las publicaciones.

Se vincularon correctamente todas las publicaciones
{
  "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
  }]
}

Ejemplo completo del cliente para linkSubscription

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

Crea un ID de cliente de OAuth

Si bien un cliente de OAuth no es necesario para la Vinculación de suscripciones, se lo puede usar para crear la lista de entidades permitidas de dominios autorizados para tu proyecto. Los dominios autorizados son una lista de dominios desde los que tu código JavaScript del cliente puede realizar llamadas. Es probable que tu publicación ya tenga configurado un ID de cliente de OAuth en el Publisher Center para usarlo con swg.js.

Pruebas

Para probar la implementación de la Vinculación de suscripciones del cliente, el código debe ejecutarse desde un servidor con un origen de JavaScript autorizado.

  1. Para la producción, los orígenes autorizados pueden provenir de un cliente de OAuth configurado o de una lista de dominios verificados en la configuración de la publicación dentro del Centro para editores.
  2. Para el desarrollo o la etapa de pruebas, con un dominio sin verificar (p. ej., localhost o un servidor que no sea público), el dominio debe estar incluido en el cliente de OAuth configurado.

Solucionar errores

El problema más común al momento de probar el código JavaScript del cliente es recibir el error 403 - Not Authorized al intentar ejecutarlo. Para resolver eso, asegúrate de estar ejecutando el código JavaScript desde un dominio validado en Publisher Center, o bien de estar ejecutando el código en un host que esté en los orígenes js autorizados del cliente de OAuth vinculado.

Paso siguiente

Felicitaciones por completar la integración de JavaScript del cliente. Ahora puedes continuar con la integración del servidor. Este paso es obligatorio para sincronizar los derechos de tus lectores. Cuando implementes y uses la función UpdateReaderEntitlements obligatoria del servidor, asegúrate de que estén destacados los artículos correctos para los suscriptores correspondientes.