Fanplayr Docs

Español

English
日本語
Italiano

Español

English
日本語
Italiano

Appearance

Guía de Integración Directa ​

Esta página detalla los pasos necesarios para integrar notificaciones push web utilizando el método preferido de emplear un service worker directamente en su sitio web. Utilizando este método:

  • Deberá crear o actualizar un service worker en la raíz de su sitio web.
  • Las notificaciones enviadas a los usuarios aparecerán como provenientes directamente de su nombre de dominio.

Requisitos ​

  • Debe poder configurar el service worker en el ámbito raíz de su sitio web.
  • El service worker debe cargarse desde el mismo dominio que su sitio web — es decir, no puede cargarse desde una CDN u otra ubicación de terceros.
  • Debe poder incluir el script de notificación push web de Fanplayr dentro del service worker.

Si no puede cumplir con los requisitos de este método, consulte Integración Pop-up para un método alternativo.

Limitaciones ​

Compatibilidad con Navegadores ​

Compatible con navegadores web y sistemas operativos modernos que implementan la Push API.

DispositivoNavegadorCompatibilidad
EscritorioChromev42+
EscritorioEdgev17+
Nota: Edge a menudo oculta las solicitudes de notificación detrás de un pequeño icono de "campana" (🕭) en la barra de URL, lo que dificulta que los usuarios noten la solicitud.
EscritorioFirefoxv44+
EscritorioOperav29+
EscritorioSafariv16+ en macOS Ventura
MóvilChrome Androidv42+
MóvilFirefox para Androidv48+
MóvilOpera para Androidv29+
MóvilSafari en iOSNo compatible

Cuando utilice un widget de Fanplayr para pedir a los usuarios que se suscriban, debe utilizar el filtro de segmentación "Puede Suscribirse a Notificaciones Push Web" para asegurarse de que solo los usuarios que actualmente no tienen una suscripción y tienen un navegador web compatible sean el objetivo del widget.

Experiencia del Usuario ​

  1. Solicitar permiso para enviar notificaciones: A los usuarios que aún no se han suscrito a las notificaciones se les muestra un widget con un mensaje que les incita a suscribirse (por ejemplo, "Manténgase al día con nuestras últimas noticias y ofertas"). Cuando el usuario hace clic en la llamada a la acción principal, el navegador les solicita permiso para enviar notificaciones push.
  2. El usuario concede permiso: Si el usuario acepta recibir notificaciones push, puede hacer clic en "Permitir" o "Sí" en la solicitud del navegador. En este punto, se crea una suscripción y se almacena en la base de datos de Fanplayr, que luego se utiliza para enviar notificaciones.
  3. Fanplayr envía notificaciones push: Su negocio envía notificaciones a los usuarios suscritos a través del servicio de mensajería de Fanplayr. Los usuarios podrán ver estas notificaciones en su dispositivo cada vez que su navegador esté abierto, incluso si no están visitando directamente su sitio web.

Mejores Prácticas ​

Se recomienda encarecidamente utilizar las funciones de Segmentación de Fanplayr para mostrar un widget intermedio que pregunte a los usuarios si están interesados en suscribirse a las notificaciones antes de solicitar el permiso del navegador. Esto es importante por varias razones:

  • Si un usuario bloquea la solicitud de permiso del navegador para habilitar las notificaciones, no podrá solicitar permiso de nuevo a menos que el usuario restablezca explícitamente el permiso en la configuración de su navegador.
  • Muchos navegadores web se están volviendo cada vez más restrictivos y pueden impedir que se muestren las solicitudes de permiso cuando se generan programáticamente sin interacción del usuario — es decir, evite mostrar la solicitud de permiso del navegador inmediatamente cuando un usuario llega a la página; en su lugar, muéstreles una llamada a la acción que, al hacer clic, active la solicitud.

Guía de Integración ​

Debe poder configurar el service worker en el ámbito raíz de su sitio web. Esto se puede lograr de una de dos maneras:

  • Alojar el archivo JavaScript del service worker en la raíz de su sitio web — por ejemplo, si su dominio es mybrand.com y su archivo de service worker se encuentra en https://mybrand.com/service-worker.js, entonces el service worker estará activo en la raíz por defecto.
  • Alternativamente, alojando el archivo JavaScript del service worker en un subdirectorio y asegurándose de que la respuesta del servidor para el archivo contenga una cabecera especial Service-Worker-Allowed: /, permitiendo que el navegador lo active en la raíz del sitio web.

Siga una de las guías de instrucciones a continuación que mejor se adapte a su escenario:

Si su sitio web YA tiene un service worker

Siga esta sección si su sitio web ya tiene un service worker. Le guiará sobre cómo incluir el script de notificación push web de Fanplayr en su código de service worker existente.

Se asume que su service worker existente cumple con los requisitos descritos al principio de este documento, es decir, que está configurado para ejecutarse en el ámbito raíz de su sitio web.

1. Incluya nuestro script en su service worker existente ​

Añada el siguiente contenido a su archivo JavaScript del service worker para importar el script de Fanplayr para gestionar las notificaciones push web:

javascript
var fanplayrOptions = {
  version: 1,
  // Cuando es `true`, Fanplayr añadirá controladores de eventos "install" y "activate"
  // al Service Worker lo que hará que se instale y active
  // inmediatamente sin esperar a que se carguen las cachés.
  // Establézcalo en `false` si su Service Worker implementa cualquiera de estos eventos.
  immediate: true
};
importScripts(
  'https://static.fanplayr.com/client/sw.js?v=' + fanplayrOptions.version
);

Nota: Considere cuidadosamente si la opción immediate debe habilitarse en función de las necesidades de su sitio web y la lógica existente en su service worker.

2. Incluya el fragmento HTML ​

Incluya el siguiente HTML en todas las páginas de su sitio web. Esto instruye a la biblioteca JavaScript de Segmentación de Fanplayr que su service worker está configurado para usar esta función.

html
<script>
  window.fanplayrServiceWorker = true;
</script>
Si su sitio web NO tiene un service worker

Siga esta sección si su sitio web aún no utiliza un service worker. Le guiará sobre cómo crear uno.

1. Cree y cargue el archivo del service worker ​

Cree un nuevo archivo JavaScript en la raíz de su servidor web llamado service-worker.js, con el contenido que se muestra a continuación:

javascript
importScripts('https://static.fanplayr.com/client/sw.js');

Asegúrese de que su servidor web sirva este archivo con el tipo de contenido correcto de Content-Type: text/javascript.

Ejemplo 1 ​

Su nombre de dominio es mybrand.com y puede cargar el archivo del service worker en la raíz de su sitio web para que sea accesible en https://mybrand.com/service-worker.js.

Ejemplo 2 ​

Su nombre de dominio es mybrand.com, pero no puede cargar el archivo del service worker en la raíz de su sitio web (quizás porque está utilizando un sitio web de comercio electrónico alojado que no permite cargar archivos en la raíz).

En su lugar, carga el archivo en un subdirectorio "assets" para que sea accesible en https://mybrand.com/assets/service-worker.js. También configura su servidor web para incluir la cabecera Service-Worker-Allowed: / en la respuesta del archivo para que los navegadores puedan usarlo como service worker en la raíz de su sitio web.

2. Incluya un fragmento HTML ​

No realice este paso a menos que se le solicite explícitamente.

Incluya el siguiente fragmento HTML en todas las páginas de su sitio web. Este script indica a los navegadores que utilicen el archivo JavaScript que creó en el paso anterior como service worker para su sitio web.

html
<script
  src="https://static.fanplayr.com/client/sw-load.js"
  data-path="/service-worker.js"
></script>

Nota: Si utilizó un nombre de archivo alternativo para el service worker, asegúrese de actualizar el atributo data-path en el script para que coincida.

Si su sitio web NO tiene un service worker Y está utilizando el plugin de Salesforce Commerce Cloud de Fanplayr

Siga esta sección si está utilizando el plugin SFCC de Fanplayr y aún no tiene un service worker en su sitio web. Si ya tiene un service worker, siga las instrucciones en Si su sitio web YA tiene un service worker.

1. Habilite el service worker ​

Navegue a la página de configuración del plugin de Fanplayr y habilite el service worker como se muestra en la captura de pantalla a continuación:

2. Haga que el service worker sea accesible desde la raíz ​

  1. Dentro de SFCC, navegue a Business Manager / Merchant Tools / SEO / Aliases.
  2. Edite la configuración de alias para añadir la siguiente ruta, ajustando según sea necesario para que coincida con su nombre de host.
javascript
{
  "my-store.demandware.net" : [
    {
      "if-site-path": "/serviceWorker.js",
      "pipeline": "Fanplayr-ServiceWorker"
    }
  ]
}

Migración de Suscriptores Existentes ​

Si ha utilizado previamente otro servicio para notificaciones push web en su sitio web, es posible que pueda migrar algunas de las suscripciones recientes creadas para sus usuarios, siempre que:

  1. Pueda proporcionar a Fanplayr una exportación de los detalles de las suscripciones de usuario activas del otro servicio. Como mínimo, debe incluir los siguientes detalles para cada suscripción de usuario:
    • Endpoint de suscripción (ejemplo a continuación)
    • Clave p256dh de suscripción (ejemplo a continuación)
    • Clave de autenticación de suscripción (ejemplo a continuación)
  2. Pueda proporcionar a Fanplayr el par de claves VAPID pública y privada de push web que se utilizaron para generar las suscripciones (ejemplo a continuación)
bash
# Ejemplo de clave VAPID pública:
BCK1IQyb-o7-uqWBMgGM0UMZ_kRh2evq3c0Yz2ZQsjH0mz1rxbq3j5i7mOlT7bljgq5lHBmPuvFmZ1jtNQV4

# Ejemplo de clave VAPID privada:
XG5k9uNkfqbc9rW0_fsJmbSZfVYUKsEdtc7PeB2vU6s

# Ejemplo de endpoint de suscripción (uno por usuario):
https://fcm.googleapis.com/fcm/send/e9urHUUzfsc:APA91bEqiCiCLbxYiyoP0iuqxUwzzVOkMLic6CHgb7A0J4u75ME6EOFng_ts1b1-wJoIwaeSecH5ucvaxZ-9o08VaI4DwXpNPfmcvOPoXMZVLYJ9VXFCffakDDQVKU3xDAEO-wDq-Vrt

# Ejemplo de clave p256dh de suscripción (uno por usuario):
BJWvtiOEpgYCMFYHM8_hHo8bxm294DyFzOgpOubsRc21MVfl4z6BklEGzYVvYu3JVO7AjrghxCAcA5BPDlacT9s

# Ejemplo de clave de autenticación de suscripción (uno por usuario):
OEBqFrdGvONmWXP-BDN4Qg

Limitaciones de la Migración ​

  1. Es importante entender que Fanplayr solo podrá migrar una parte de las suscripciones de un servicio utilizado anteriormente debido a que algunas suscripciones se han vuelto naturalmente inactivas o han caducado mientras tanto.
  2. También es importante entender que las opciones para enviar notificaciones a suscripciones migradas pueden ser limitadas hasta que el usuario regrese al sitio web después de que la Segmentación de Fanplayr haya sido integrada en su sitio.
    • Esto se debe a que Fanplayr no tendrá ningún conocimiento del usuario solo a partir de su suscripción migrada y requeriría que el usuario regrese al sitio web con su suscripción para asociar internamente el conocimiento de Fanplayr del usuario con la suscripción.
    • Mientras tanto, aún debería ser posible enviar notificaciones push dirigidas a todos los suscriptores sin filtros.

Solución de Problemas ​

No se detecta el service worker ​

Si está utilizando el script sw-load.js de Fanplayr, debe asegurarse de que se incluya en su página web antes del código de seguimiento de Fanplayr.

No se puede cargar el archivo JavaScript del service worker en la raíz ​

Si no puede cargar el archivo JavaScript del service worker en la raíz de su servidor, es posible que pueda continuar si puede cargarlo en otro lugar con cabeceras específicas.

  1. Asegúrese de que su servidor entregue el archivo del service worker con las siguientes cabeceras:
    1. Content-Type: text/javascript
    2. Service-Worker-Allowed: /
  2. Si está registrando manualmente el service worker (no utilizando nuestro script sw-load.js), entonces necesitará actualizar su código para forzar que el worker se cargue en el ámbito raíz. Por ejemplo:
html
<script>
  if ('serviceWorker' in navigator) {
    // Nota: Reemplace PATH_TO_SERVICE_WORKER con la ruta correcta en su servidor.
    navigator.serviceWorker
      .register('/PATH_TO_SERVICE_WORKER/serviceWorker.js', {
        // Forzar la carga del service worker en el ámbito raíz.
        scope: '/'
      })
      .then(function () {
        window.fanplayrServiceWorker = true;
      });
  }
</script>

Copyright © 2011-present Fanplayr Inc