Prompts de soft push para web

Pré-requisitos

Antes de poder usar esse recurso, você precisará integrar o Braze Web 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

Geralmente é uma boa ideia que sites implementem um prompt “soft” de push, onde você “prepara” o usuário e apresenta seus argumentos para enviar 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 permissão diretamente ao usuário e, se o usuário negar a permissão, você não poderá perguntar novamente.

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

Dica

Isso pode ser feito sem 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: Criar uma campanha de preparação para push

Primeiro, você deve criar uma campanha de mensagens no app “Preparação para Push” no dashboard da Braze:

1. Crie uma mensagem no app do tipo Modal 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, onde 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 pelo dashboard, se necessário.

Etapa 2: Remover chamadas

Na integração do SDK da Braze, encontre e remova quaisquer chamadas a automaticallyShowInAppMessages() do seu snippet de carregamento.

Etapa 3: Atualizar a integração

Por fim, substitua a chamada removida pelo snippet a seguir. Chame subscribeToInAppMessage() antes de chamar openSession(). Isso garante que o listener de mensagens no app seja registrado a tempo de receber a mensagem de preparação 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);
});

Quando quiser exibir o prompt de soft push para o usuário, chame braze.logCustomEvent com o nome do evento que dispara essa mensagem no app.