Criando um prompt personalizado em duas etapas

Obtenha mais inscrições para notificações push da web

Web push é um canal de marketing baseado em permissões. Com o Xtremepush, você pode controlar como o prompt de permissão é exibido. Uma das opções possíveis é usar um prompt em dois passos. Isso se traduziria em exibir primeiro uma mensagem convidando o usuário a optar pelo push web, e só mostrar a segunda etapa após o usuário interagir com a primeira, dando permissão (isso é conhecido como gesto do usuário). O segundo passo seria o verdadeiro prompt do navegador.

Alguns dos motivos para fazer isso:

• Alguns navegadores (como o Safari) exigem um gesto do usuário para mostrar o prompt de permissão. Outros navegadores, como o Firefox , exibem o prompt de permissão com muito mais destaque se você mostrar o prompt após o usuário interagir com seu site.

• Incluir uma troca de valor (como parte deste prompt em duas etapas) pode ajudar você a aumentar suas taxas de opt-in.

Este guia descreve diferentes formas de implementar um prompt em duas etapas.

Pré-requisitos

Essa forma de obter permissão para o web push exige que você configure sua aplicação web no seu projeto Xtremepush e que complete a integração do Xtremepush SDK no seu site.

Para adicionar um prompt personalizado em dois passos, você precisa desligar o prompt automático na página de configurações do Push .

Abaixo você encontrará as diferentes opções para ativar o prompt em duas etapas.

Use um botão no seu site

Se você está adicionando sua própria troca de valor ao editar diretamente seu site, por exemplo, um banner dentro do fluxo regular do seu conteúdo ou ter isso como etapa durante o processo de registro para que você mostre o prompt apenas aos usuários registrados, você pode chamar o seguinte método SDK no handler para o botão apresentado ao usuário:

xtremepush('prompt');

Exemplo de um botão adicionado a um site de comércio eletrônico com uma troca de valor.

Use uma campanha no local

Você pode usar uma campanha onsite, então quando um usuário chegar à página inicial, pode ativar isso onsite em resposta a um evento disparado do seu site. Nesta mensagem, você pode perguntar se eles querem saber mais sobre sua empresa e, se clicarem em "sim" (o que seria tratado como um 'gesto do usuário'), isso acionaria o prompt do sistema através do JavaScript.

Para isso, crie uma campanha no local a partir de Campanhas > Criar Campanha > Single-stage > In-app / Onsite. Selecione mensagem no local e, na aba Conteúdo , selecione a opção Popup , inclua pelo menos um botão e selecione JavaScript como ação padrão, incluindo o seguinte código para solicitar o opt-in:

xtremepush('prompt');

Você precisaria selecionar o evento que acionaria isso no local pela aba Eventos .

JavaScript personalizado

Se você preferir adicionar um site totalmente personalizado com uma troca de valor antes de mostrar o prompt, pode usar o recurso on-site do SDK diretamente no seu site usando JavaScript e chamando o método push prompt quando o usuário clicar no botão "Sim".

Você pode incorporar diretamente o código JavaScript no seu site ou usar uma tag do Google Tag Manager para incluir esse código JavaScript.

Para isso, navegue até o Google Tag Manager, selecione o contêiner apropriado e navegue até Tags no menu lateral esquerdo > Novo.

Depois, na configuração de Tags , selecione Custom HTML e cole o seguinte código:

webpushSwal({
  title: '<span style="font-weight:bold;color:#000;font-family:Arial,Tahoma,Verdana,Helvetica,sans-serif;font-size:14px;">Never Miss Out!</span>',
  html: '<span style="color:#111;font-family:Arial,Tahoma,Verdana,Helvetica,sans-serif;font-size:14px;">Would you like to receive website notifications from xtremepush?</span>',
  allowOutsideClick: false,
  showCancelButton: true,
  reverseButtons: true,
  cancelButtonText: '<span style="font-weight:bold;color:#ccc;">Not now</span>',
  confirmButtonText: '<span style="font-weight:bold;color:#fff;">Yes</span>',
  confirmButtonColor: '#00aeff',
  showCloseButton: true,
  width: 400,
  padding: 7,
}).then(function(result) {
  if (result.value) {
    // User confirmed
    localStorage.setItem('webpush_prompt_dismissed', 1);
    xtremepush('push', 'prompt');
  } else {
    // User dismissed the window
    localStorage.setItem('webpush_prompt_dismissed', 1);
  }
});

Se você já tem o SDK no seu site, pode testar rapidamente esse código a partir do console:

Você pode editar o texto modificando o title HTML params , e o texto e as cores dos botões também podem ser personalizados para se adequar à sua marca.

Lógica adicional deve ser adicionada ao redor dessa mensagem no local para controlar com que frequência o usuário a verá caso não selecione "Sim". Veja um exemplo mais completo abaixo com uma lógica adicional para mostrar o on-site apenas uma vez por sessão e não mostrá-lo se o usuário já tiver aderido, negado permissões, estiver em um navegador que não suporta push ou tiver selecionado "não" no local.

function showPrompt() {
    //addCustom prompt stuff here
    webpushSwal({
        title: '<span style="font-weight:bold;color:#000;font-family:Arial,Tahoma,Verdana,Helvetica,sans-serif;font-size:14px;">Never Miss Out!</span>',
        html: '<span style="color:#111;font-family:Arial,Tahoma,Verdana,Helvetica,sans-serif;font-size:14px;">Would you like to receive website notifications from Xtremepush?</span>',
        allowOutsideClick: false,
        showCancelButton: true,
        reverseButtons: true,
        cancelButtonText: '<span style="font-weight:bold;color:#ccc;">Not now</span>',
        confirmButtonText: '<span style="font-weight:bold;color:#fff;">Yes</span>',
        confirmButtonColor: '#00aeff',
        showCloseButton: true,
        width: 400,
        padding: 7,
    }).then(function(result) {
        if (result.value) {
            // User confirmed
            xtremepush('push', 'prompt');
        }
    });
}

function WebpushPrompt() {
    xtremepush('ready', function() {
        //if our session storage item does not exist, create it
        if (sessionStorage.getItem("sessionStoragePrompt") === null) {
            sessionStorage.setItem("sessionStoragePrompt", 1);
            var permission = xtremepush('push', 'permission');
            // This will exclude people who have already subscribed / denied push notifications
            // This will also exclude browsers with no push notifications support
            if (permission == 'default') {
                showPrompt();
            }
        }
    });
}

WebpushPrompt();

Você pode modificar ainda mais esse código para adicionar comportamentos mais avançados ao redor do prompt, como tentativas após um número específico de visitas se o usuário disser "Não" ao local.