Prompts de soft push para web

Pré-requisitos

Antes de poder usar esse recurso, você precisará integrar o Web Braze SDK. Você também precisará configurar notificações por push.

Se você estiver integrando a Braze por meio do kit incorporado da mParticle na web, consulte a Etapa 3 na integração de eventos Web da Braze na mParticle para obter instruções sobre como implementar prompts de soft push.

Sobre prompts de soft push

Muitas vezes, é uma boa ideia que os sites implementem um prompt de push “suave”, no qual você “prepara” o usuário e defende o envio de notificações por push antes de solicitar a permissão de push. Isso é útil porque o navegador limita a frequência com que você pode solicitar diretamente ao usuário e, se o usuário negar a permissão, você nunca mais poderá solicitá-la novamente.

Alternativamente, se você quiser incluir um tratamento personalizado especial, em vez de chamar requestPushPermission() diretamente como descrito na integração padrão de push para a web, use nossas mensagens no app disparadas.

Dica

Isso pode ser feito sem a personalização do SDK usando nosso novo push primer sem código.

Configurando prompts de soft push

Nota

Este guia usa exemplos de código do SDK da Braze para Web 4.0.0+. Para fazer upgrade para a versão mais recente do SDK para Web, consulte o Guia de atualização do SDK.

Etapa 1: Crie uma campanha de push primer

Primeiro, você deve criar uma campanha de mensagens no app “Prime for Push” no dashboard da Braze:

1. Crie uma mensagem Modal no app com o texto e o estilo que desejar.
2. Em seguida, defina o comportamento ao clicar como Fechar mensagem. Esse comportamento será personalizado posteriormente.
3. Adicione um par chave-valor à mensagem em que a chave é msg-id e o valor é push-primer.
4. Atribua uma ação-gatilho de evento personalizado (como “prime-for-push”) à mensagem. Você pode criar o evento personalizado manualmente no dashboard, se necessário.

Etapa 2: Remover chamadas

Na sua integração do SDK da Braze, localize e remova todas as chamadas para automaticallyShowInAppMessages() do seu snippet de carregamento.

Etapa 3: Atualizar a integração

Por fim, substitua a chamada removida pelo trecho a seguir. Chame subscribeToInAppMessage() antes de chamar openSession(). Isso garante que seu ouvinte de mensagem no app esteja registrado a tempo de receber a mensagem de push primer.

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);
});

Quando desejar exibir o prompt de soft push para o usuário, faça uma chamada para braze.logCustomEvent com o nome do evento que dispara essa mensagem no app.