Introdução ao Shopify

Como implementar o SDK para Web da Braze via Shopify ScriptTag

Shopify ScriptTag é um código JavaScript remoto carregado nas páginas da sua loja ou na página de status do pedido do checkout. Quando uma página da loja é carregada, o Shopify verificará se há tags de script que precisam ser carregadas na página do site.

Caso queira começar a usar a Braze em pouco tempo, você tem a opção de permitir que a Braze carregue um script predefinido do SDK para Web da Braze diretamente no site da sua loja da Shopify.

Como funciona com a integração do Shopify

Quando seu site Shopify for carregado, o Shopify verificará se há tags de script que precisam ser carregadas na página. Durante o processo, os scripts do Braze Web SDK serão carregados nas páginas da sua loja ou na página de status do pedido do checkout.

Também adicionaremos scripts predefinidos se você tiver selecionado eventos de produto visualizado, produto clicado e carrinho abandonado que exigem Shopify ScriptTag ou envio de mensagens no app como um canal.

Como ativar

Para ativar automaticamente os scripts do Braze Web SDK como parte da sua integração, selecione os eventos suportados do Shopify ScriptTag ou ative o envio de mensagens no app como um canal durante sua configuração de integração do Shopify.

Do criador de configuração da Shopify, os eventos denotados com asterisco (*) são suportados pelo SDK da Web. Se você selecionar esses eventos ou incluir envio de mensagens no navegador, a Braze adicionará a implementação do Web SDK via Shopify ScriptTag à sua loja Shopify como parte da sua configuração.

Formulários de captura de e-mail do Shopify e reconciliação de usuários

Os formulários de captura obtêm informações identificáveis do cliente no início do ciclo de vida do cliente para envio de mensagens e engajamento.

O SDK para Web rastreia o comportamento no site da Shopify e de usuários anônimos usando o device_id. A integração do ScriptTag do Braze Shopify atribui e-mails de formulários de captura de e-mail do Shopify, como uma inscrição em boletim informativo, ao device_id do usuário.

Formulários típicos de captura de e-mail incluem:

• Formulário de captura de e-mail
• Formulário de inscrição para newsletter

Existem duas maneiras de reconciliar o e-mail do usuário e device_id:

• Usando o script automatizado de captura de e-mail da Braze
• Chamar os métodos setEmail ou setPhoneNumber

Capturando inscrições por e-mail ou telefone

Com a Braze, você pode usar nossos formulários de inscrição para e-mail e SMS e WhatsApp para extrair benefícios do SDK para Web e das mensagens no app.

Se estiver usando um e-mail ou número de telefone capturado pela Shopify, ou um formulário de captura de terceiros, você pode configurar diretamente no usuário que é rastreado pelo SDK para Web da Braze. Por exemplo, se você obtiver o endereço de e-mail do cliente, poderá defini-lo no perfil do usuário assim:

1
braze.getUser().setEmail(<email address>);

Para obter detalhes sobre como definir esses valores, consulte estes recursos de Javascript:

• Configuração do e-mail do usuário
• Definindo o número de telefone do usuário

Você também pode definir o estado de inscrição dos usuários à medida que coleta seu e-mail ou número de telefone, assim:

1
braze.getUser().setEmailNotificationSubscriptionType(braze.User.NotificationSubscriptionTypes.SUBSCRIBED);

Para obter detalhes sobre como definir esses valores, consulte estes recursos de Javascript:

• Definindo o tipo de inscrição de notificação por e-mail do usuário
• Como adicionar o usuário a um grupo de inscrições

Exemplo de implementação de formulário de captura de terceiros

1. Em theme.liquid, copie o seguinte snippet no head tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  const emailInputPoller = setInterval(()=>{
    if (document.getElementById('{FORM_ID}')) {
      document.getElementById('{FORM_ID}').addEventListener("submit",
        function() {  
          var email = document.getElementById('{INPUT_EMAIL_ID}').value
          braze.getUser().setEmail(email)
        }
      );
    }
    clearInterval(emailInputPoller)
  }, 2000)
</script>

2. Chamamos setInterval para que o script seja carregado primeiro 3. Substitua {FORM_ID} pelo ID do elemento do formulário que você deseja capturar (como “ContactFooter”.) 4. Substitua {INPUT_EMAIL_ID} pelo ID do elemento do campo de entrada de e-mail dentro do formulário 5. Quando o formulário for enviado, o script chamará setEmail com o valor do campo de entrada de e-mail 6. Depois que o script carrega, chamamos clearInterval para que ele carregue apenas uma vez

O que esperar após a implementação

Inicialização do SDK para Web da Braze

O SDK da Web será inicializado ao iniciar a sessão. Braze precisará coletar o device_id para rastreamento de dados de usuários anônimos, pois outros identificadores como o ID de cliente do Shopify, e-mail ou número de telefone podem não estar prontamente disponíveis para visitantes convidados da sua loja Shopify.

O device_id também será usado para reconciliar dados de usuários com o perfil de usuário anônimo à medida que um cliente fornece mais informações identificáveis (como um endereço de e-mail ou número de telefone) após o processo de checkout.

Versão do SDK para Web da Braze

A versão atual do SDK para Web da Braze via integração Shopify ScriptTag é v4.2.

Usuários ativos mensais (MAU)

O SDK da Web rastreia sessões de seus clientes e convidados do Shopify. Como resultado, isso será considerado como MAU no seu relatório de dashboard do Braze e em suas alocações de MAU. É importante notar que usuários anônimos também contarão para o seu MAU. Para dispositivos móveis, usuários anônimos são dependentes do dispositivo. Para usuários da Web, os usuários anônimos dependem do cache do navegador.