Skip to content

Extensão do navegador

Este artigo descreve como usar o Braze Web SDK em suas extensões de navegador (Google Chrome, Firefox).

Integre o Braze Web SDK em sua extensão de navegador para coletar análises de dados e exibir mensagens personalizadas para os usuários. Isso inclui as extensões do Google Chrome e os complementos do Firefox.

O que é suportado

Em geral, como as extensões são HTML e JavaScript, você pode usar a Braze para o seguinte:

  • Análise de dados: Capture eventos personalizados, atributos e até mesmo identifique usuários recorrentes com a sua extensão. Use essas características de perfil para potencializar o envio de mensagens entre canais.
  • Mensagens no app: Dispare mensagens no app quando os usuários realizarem uma ação em sua extensão, usando nosso envio de mensagens HTML nativo ou personalizado.
  • Cartões de conteúdo: Adicione um feed de cartões nativos à sua extensão para integração ou conteúdo promocional.
  • Web push: Envie notificações oportunas mesmo quando sua página da Web não estiver aberta no momento.

O que não é suportado

  • Os trabalhadores de serviço não são suportados pelo Braze Web SDK, no entanto, isso está no planejamento para consideração futura.

Tipos de extensão

O Braze pode ser incluído nas seguintes áreas de sua extensão:

Permissões

O manifest.json não requer permissões adicionais como um arquivo de localização empacotado com sua extensão ao integrar o SDK da Braze (braze.min.js).

No entanto, se você usar o Google Tag Manager, ou fizer referência ao SDK da Braze a partir de um URL externo, ou tiver definido uma Política de segurança de conteúdo rigorosa para sua extensão, será necessário ajustar a configuração content_security_policy no manifest.json para permitir fontes de script remotas.

Primeiros passos

Para integrar o Braze Web SDK, primeiro você precisará baixar uma cópia da biblioteca JavaScript mais recente. Isso pode ser feito usando o NPM ou baixando-o diretamente da CDN do Braze.

Como alternativa, se você preferir usar o Google Tag Manager ou usar uma cópia hospedada externamente do Braze SDK, lembre-se de que o carregamento de recursos externos exigirá que você ajuste a configuração content_security_policy em seu site manifest.json.

Depois de baixar, copie o arquivo braze.min.js em algum lugar do diretório de sua extensão.

Para adicionar a Braze a uma extensão pop-up, faça referência ao arquivo JavaScript local em seu site popup.html, como faria em um site normal. Se estiver usando o Google Tag Manager, poderá adicionar a Braze usando nossos modelos do Google Tag Manager.

1
2
3
4
5
6
7
8

<html>
    <title>popup.html</title>
    <!-- Add the Braze library -->
    <script src="/relative/path/to/braze.min.js"></script>
    <script>
    // Initialize Braze here
    </script>
</html>

Script em segundo plano (somente Manifesto v2)

Para usar a Braze no script em segundo plano de sua extensão, adicione a biblioteca Braze ao manifest.json no vetor background.scripts. Isso tornará a variável global braze disponível em seu contexto de script em segundo plano.

1
2
3
4
5
6
7
8
9

{
    "manifest_version": 2,
    "background": {
        "scripts": [
            "relative/path/to/braze.min.js",
            "background.js"
        ],
    }
}

Página de opções

Se você usar uma página de opções (por meio das propriedades do manifesto options ou options_ui ), poderá incluir o Braze da mesma forma que faria nas instruções dopopup.html .

Inicialização

Depois que o SDK for incluído, você poderá inicializar a biblioteca como de costume.

Como não há suporte para cookies em extensões de navegador, você pode desativar os cookies, configurando no inicialização como noCookies: true.

1
2
3
4
5

braze.initialize("YOUR-API-KEY-HERE", {
    baseUrl: "YOUR-API-ENDPOINT",
    enableLogging: true,
    noCookies: true
});

Para saber mais sobre nossas opções de inicialização suportadas, visite a referência do Web SDK.

Push

As caixas de diálogo pop-up de extensão não permitem push prompts (elas não têm a barra de URL na navegação). Portanto, para registrar e solicitar permissão push na caixa de diálogo pop-up de uma extensão, será necessário usar uma solução alternativa de domínio, conforme descrito em Alternar domínio push.
Github   Editar esta página no GitHub
New Stuff!