Avisos de push suave para Web

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Web Braze. También tendrás que configurar las notificaciones push.

Si estás integrando Braze a través del kit integrado de mParticle en la web, consulta el paso 3 en la integración de eventos web de Braze en mParticle para obtener instrucciones sobre cómo implementar avisos de push suave.

Acerca de los avisos de push suave

A menudo es buena idea que los sitios implementen un aviso de push “suave” en el que “prepares” al usuario y le expliques por qué quieres enviarle notificaciones push antes de solicitar el permiso de push. Esto es útil porque el navegador limita la frecuencia con la que puedes solicitar permiso directamente al usuario, y si el usuario deniega el permiso, no puedes volver a pedírselo.

Como alternativa, si deseas incluir un manejo personalizado especial, en lugar de llamar a requestPushPermission() directamente como se describe en la integración de push web estándar, utiliza nuestros mensajes dentro de la aplicación desencadenados.

Consejo

Esto se puede hacer sin personalización del SDK utilizando nuestro nuevo push primer sin código.

Configuración de avisos de push suave

Nota

Esta guía utiliza ejemplos de código del SDK Web de Braze 4.0.0+. Para actualizar a la última versión del SDK Web, consulta la Guía de actualización del SDK.

Paso 1: Crear una Campaign de preparación para push

Primero, debes crear una Campaign de mensajería dentro de la aplicación de “Preparación para push” en el panel de Braze:

1. Crea un mensaje dentro de la aplicación de tipo Modal con el texto y el estilo que desees.
2. A continuación, establece el comportamiento de clic en Cerrar mensaje. Este comportamiento se personalizará más adelante.
3. Añade un par clave-valor al mensaje donde la clave sea msg-id y el valor sea push-primer.
4. Asigna una acción desencadenante de evento personalizado (como “prime-for-push”) al mensaje. Puedes crear el evento personalizado manualmente desde el panel si es necesario.

Paso 2: Eliminar llamadas

En tu integración de SDK de Braze, busca y elimina cualquier llamada a automaticallyShowInAppMessages() dentro de tu fragmento de código de carga.

Paso 3: Actualizar la integración

Por último, sustituye la llamada eliminada por el siguiente fragmento de código. Llama a subscribeToInAppMessage() antes de llamar a openSession(). Esto asegura que tu listener de mensajes dentro de la aplicación esté registrado a tiempo para recibir el mensaje de preparación para push.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import * as braze from "@braze/web-sdk";
// Be sure to remove any calls to braze.automaticallyShowInAppMessages()
braze.subscribeToInAppMessage(function(inAppMessage) {
  // check if message is not a control variant
  if (inAppMessage instanceof braze.inAppMessage) {
    // access the key-value pairs, defined as `extras`
    const keyValuePairs = inAppMessage.extras || {};
    // check the value of our key `msg-id` defined in the Braze dashboard
    if (keyValuePairs["msg-id"] === "push-primer") {
      // We don't want to display the soft push prompt to users on browsers
      // that don't support push, or if the user has already granted/blocked permission
      if (
        braze.isPushSupported() === false ||
        braze.isPushPermissionGranted() ||
        braze.isPushBlocked()
      ) {
        // do not call `showInAppMessage`
        return;
      }

      // user is eligible to receive the native prompt
      // register a click handler on one of the two buttons
      if (inAppMessage.buttons[0]) {
        // Prompt the user when the first button is clicked
        inAppMessage.buttons[0].subscribeToClickedEvent(function() {
          braze.requestPushPermission(
            function() {
              // success!
            },
            function() {
              // user declined
            }
          );
        });
      }
    }
  }

  // show the in-app message now
  braze.showInAppMessage(inAppMessage);
});

Cuando quieras mostrar el aviso de push suave al usuario, llama a braze.logCustomEvent con el nombre de evento que desencadene este mensaje dentro de la aplicación.