Configuração da integração padrão da Shopify

Esta página orienta você sobre como integrar a Braze à Shopify usando nossa integração padrão para usuários com uma loja on-line da Shopify. Se você usa um site headless da Shopify ou está procurando implementar soluções mais personalizadas, consulte a configuração de integração personalizada da Shopify.

Etapa 1: Conecte sua loja Shopify

1. Na Braze, acesse Integrações com Parceiros > Parceiros de Tecnologia e pesquise por “Shopify”.
2. Na página de parceiro do Shopify, selecione Begin setup para iniciar o processo de integração.
   
   
   
   
3. Na loja de apps do Shopify, instale o aplicativo da Braze.
   
   

Nota

Se sua conta do Shopify estiver associada a mais de uma loja, você pode mudar a loja na qual está conectado selecionando o ícone da loja no cabeçalho e selecionando Switch stores.

4. Após instalar o app da Braze, você será redirecionado para a Braze para confirmar o espaço de trabalho que deseja conectar ao Shopify. Uma loja Shopify pode se conectar a apenas um espaço de trabalho. Se precisar trocar, selecione o espaço de trabalho correto.
   
   

5. Selecione Begin setup.
   
   

Etapa 2: Ativar os SDKs web da Braze

Para lojas online do Shopify, você pode selecionar a configuração padrão para implementar automaticamente o SDK web da Braze e o SDK JavaScript.

Depois de selecionar o caminho de integração com configuração padrão, você deve escolher quando a Braze inicializa e carrega os SDKs entre as seguintes opções:

• Ao visitar o site, como no início da sessão
  • Rastreia tanto usuários identificados quanto anônimos
• Ao se inscrever na conta, como no login da conta
  • Rastreia apenas usuários identificados
  • Começa a rastrear dados quando os visitantes do site se inscrevem ou fazem login em suas contas

Nota

Novos clientes recebem as versões mais recentes do SDK web da Braze e do SDK JavaScript durante a configuração. Clientes existentes podem visualizar a versão atual do SDK nas configurações de integração, receber notificações quando uma versão mais recente estiver disponível e realizar upgrades por conta própria a partir das configurações de integração.

Etapa 3: Configure seus dados do Shopify

Configuração padrão de dados

Importante

Para esta integração, o alias de usuário deve usar o seguinte formato para que a Braze possa associar os webhooks ao perfil de usuário correto:

• alias_label: shopify_cart_${cartToken}
• alias_name: shopify_cart_token

Selecione os dados do Shopify que você deseja rastrear.

Os eventos a seguir são ativados por padrão na integração padrão.

Para saber mais sobre os dados rastreados pela integração, consulte Recursos de dados do Shopify.

Importante

A integração do Shopify oferece suporte a webhooks de criação e atualização de clientes do Shopify, que estão localizados nas suas configurações de dados. Quando um perfil de usuário é criado ou atualizado no Shopify, um perfil de usuário correspondente na Braze será criado ou atualizado.

Essas ações não disparam eventos personalizados na Braze e são usadas exclusivamente para sincronizar dados de usuários do Shopify com a Braze. Os dados sincronizados incluem atributos personalizados, atributos padrão e, se ativado na sua configuração, estados de grupo de inscrições.

Configuração de preenchimento de dados históricos

Na etapa Track Shopify data, marque a caixa de seleção para incluir a carga inicial de dados históricos como parte da sua integração.

Para saber o que é importado, o comportamento de relatórios de receita, capturas de tela de configuração e orientações caso você já use a Braze com Campaigns ou Canvas ativos, consulte Preenchimento de dados históricos.

(Avançado) Configuração de rastreamento de dados personalizados

Com os SDKs da Braze, você pode rastrear eventos personalizados ou atributos personalizados que vão além dos eventos padrão dessa integração. Eventos personalizados capturam interações exclusivas na sua loja, como:

Rastrear dados personalizados fornece insights mais profundos sobre o comportamento do usuário e permite personalização adicional. Para implementar eventos personalizados, você precisa editar o código do tema da sua loja no arquivo theme.liquid. Talvez seja necessário contar com a ajuda dos seus desenvolvedores.

Por exemplo, o snippet de JavaScript a seguir verifica se o usuário atual assina uma newsletter e registra isso como um evento personalizado no perfil dele na Braze:

1
2
3
4
5
6
7
8
9

braze.logCustomEvent(
  “subscribed_to_newsletter”,
  {
    newsletterName: ‘News and Offers’,
    customerEmail: ‘customer_1@example.com’,
    sendOffers: true
  }
);

O SDK precisa estar inicializado (escutando atividade) no dispositivo do usuário para registrar eventos ou atributos personalizados. Para saber mais sobre o registro de dados personalizados, consulte Objeto User e Objeto logCustomEvent.

Etapa 4: Configurar como gerenciar usuários

Selecione seu tipo de external_id no menu suspenso.

Importante

Usar um endereço de e-mail ou um endereço de e-mail com hash como seu ID externo da Braze pode simplificar o gerenciamento de identidade nas suas fontes de dados. No entanto, é importante considerar os possíveis riscos à privacidade do usuário e à segurança dos dados.

• Informações que podem ser adivinhadas: Os endereços de e-mail são facilmente adivinháveis, o que os torna vulneráveis a ataques.
• Risco de exploração: Se um usuário mal-intencionado alterar seu navegador da web para enviar o endereço de e-mail de outra pessoa como seu ID externo, ele poderá acessar mensagens confidenciais ou informações de conta.

Por padrão, a Braze converte automaticamente os e-mails da Shopify em letras minúsculas antes de usá-los como ID externo. Se estiver usando e-mail ou e-mail com hash como ID externo, confirme se os endereços de e-mail também foram convertidos em letras minúsculas antes de atribuí-los como ID externo ou antes de fazer o hash a partir de outras fontes de dados. Isso ajuda a evitar discrepâncias nos IDs externos e a criação de perfis de usuário duplicados na Braze.

Nota

As próximas etapas dependem da seleção do seu ID externo:

• Se você selecionou um tipo de ID externo personalizado: Conclua as etapas 4.1—4.3 para definir sua configuração de ID externo personalizado.
• Se você selecionou o ID do cliente da Shopify, e-mail ou e-mail com hash: Pule as etapas 4.1—4.3 e vá diretamente para a etapa 4.4.

Etapa 4.1: Criar o metacampo braze.external_id

1. No painel de administração da Shopify, acesse Settings > Metafields and metaobjects.
2. Selecione Customers > Add definition.
3. Em Name, digite braze.external_id.
4. Selecione o namespace e a chave gerados automaticamente (custom.braze_external_id) para editá-los e alterá-los para braze.external_id.
5. Em Type, selecione ID Type.

Depois que o metacampo for criado, preencha-o para seus clientes. Recomendamos as seguintes abordagens:

• Ouça os webhooks de criação de clientes: Configure um webhook para ouvir os eventos do customer/create. Isso permite que você escreva o metacampo quando um novo cliente é criado.
• Preencha os clientes existentes: Use a Admin API ou a Customer API para preencher o metacampo de clientes criados anteriormente.

Possível condição de corrida

O webhook customers/create da Shopify pode ser disparado antes que o metacampo braze.external_id seja gravado no perfil do usuário. Quando isso acontece:

1. Se o metacampo estiver ausente, a Braze chama o endpoint configurado (Etapa 4.2) para buscar o ID externo.
2. Se essa chamada também falhar ou atingir o tempo limite, a Braze cria um perfil de usuário temporário com o ID do cliente da Shopify como ID externo.
3. Em qualquer evento subsequente em que o metacampo esteja presente (como customers/update ou orders/create para um evento ecommerce.order_placed), a Braze detecta automaticamente a incompatibilidade e mescla o perfil temporário com o ID externo correto.

Isso significa que perfis duplicados temporários são possíveis, mas se corrigem automaticamente. Você não precisa tomar nenhuma ação manual para mesclar esses perfis.

Etapa 4.2: Criar um endpoint para recuperar seu ID externo

Você deve criar um endpoint GET acessível publicamente que retorne o ID externo do cliente na Braze. A Braze chama esse endpoint a partir de duas origens:

Importante

Tanto os servidores da Braze quanto o navegador do comprador chamam esse endpoint. O pixel web da Braze para Shopify carrega a URL do seu endpoint no navegador, então a URL é pública. Siga as etapas de Validação para retornar um ID externo somente para um cliente da Shopify correspondente.

Especificações do endpoint

Método: GET

A Braze envia os seguintes parâmetros para seu endpoint:

Exemplo de endpoint

1

GET https://mystore.com/custom_id?shopify_customer_id=1234&[email protected]&shopify_storefront=dev-store.myshopify.com

Resposta esperada

A Braze espera um código de status 200 retornando o JSON do ID externo:

1
2
3

{
  "external_id": "my_external_id"
}

Validação

Valide se o shopify_customer_id e o email_address (se presentes) correspondem aos valores do cliente na Shopify antes de retornar um ID externo. Você pode usar a Shopify Admin API ou a Customer API para validar esses parâmetros e recuperar o metacampo braze.external_id correto.

Comportamento de falha e mesclagem

Qualquer código de status diferente de 200 é considerado uma falha.

• Implicações da mesclagem: Se o endpoint falhar (retornar algo diferente de 200 ou expirar), a Braze não consegue recuperar o ID externo. Consequentemente, a mesclagem entre o usuário do Shopify e o perfil de usuário da Braze não acontece naquele momento.
• Lógica de nova tentativa: A Braze pode tentar novas tentativas de rede imediatas padrão, mas se a falha persistir, a mesclagem é adiada até o próximo evento qualificado (por exemplo, a próxima vez que o usuário atualizar seu perfil ou concluir um checkout).
• Suportabilidade: Para garantir a mesclagem de usuários em tempo hábil, certifique-se de que seu endpoint esteja altamente disponível e lide com o campo opcional email_address de forma adequada.

Etapa 4.3: Inserir seu ID externo

Repita a Etapa 4 e insira a URL do endpoint depois de selecionar ID externo personalizado como o tipo de ID externo da Braze.

Considerações

• Se o seu ID externo não for gerado quando a Braze enviar uma solicitação ao seu endpoint, a integração usará por padrão o ID de cliente do Shopify quando a função changeUser for chamada. Essa etapa é crucial para mesclar o perfil de usuário anônimo com o perfil de usuário identificado. Como resultado, pode haver um período temporário durante o qual diferentes tipos de IDs externos existem no seu espaço de trabalho.
• Quando o ID externo estiver disponível no metafield braze.external_id, a integração priorizará e atribuirá esse ID externo.
  • Se o ID de cliente do Shopify foi definido anteriormente como o ID externo da Braze, ele será substituído pelo valor do metafield braze.external_id.

Etapa 4.4: Coletar suas aceitações de e-mail ou SMS da Shopify (opcional)

Se você usa os canais de e-mail ou SMS, pode sincronizar os estados de aceitação de marketing por e-mail e SMS do Shopify com a Braze.

• e-mail
• dupla aceitação de sms

Se você sincronizar as aceitações de marketing por e-mail do Shopify, a Braze cria automaticamente um grupo de inscrições para e-mail para todos os usuários associados a essa loja específica. Você precisa criar um nome exclusivo para esse grupo de inscrições.

Nota

Conforme mencionado na visão geral do Shopify, se você quiser usar um formulário de captura de terceiros, seus desenvolvedores precisarão integrar o código do SDK da Braze. Isso permitirá capturar o endereço de e-mail e o status global de inscrição de e-mail a partir dos envios de formulário. Especificamente, você precisa implementar e testar estes métodos no seu arquivo theme.liquid:

• setEmail: Define o endereço de e-mail no perfil de usuário
• setEmailNotificationSubscriptionType: Atualiza o status global de inscrição de e-mail

Use a dupla aceitação de SMS para enviar seu texto de confirmação personalizado pela Braze em vez do e-mail de confirmação do Shopify. Para ativar a dupla aceitação de SMS:

1. No painel de administração do Shopify, acesse Configurações > Notificações > Notificações de clientes.
2. Desative a dupla aceitação de marketing para SMS.
3. Defina o SMS de checkout como aceitação única.
4. Nas configurações de SMS da Braze, selecione Use Braze SMS double opt-in.

Para saber mais sobre a dupla aceitação de SMS da Braze e o fluxo de inscritos, consulte Visão geral do Shopify.

Etapa 5: Sincronizar produtos (opcional)

Você pode sincronizar todos os produtos da sua loja Shopify com um catálogo da Braze para uma personalização de mensagens mais aprofundada. As atualizações automáticas ocorrem quase em tempo real, para que seu catálogo reflita os detalhes mais recentes dos produtos. Para saber mais, confira Sincronização de produtos do Shopify.

Etapa 6: ativar canais (opcional)

Para integrações padrão da Shopify, você pode ativar mensagens no app e Banners nas configurações de integração sem desenvolvimento adicional.

Mensagens no app

Na etapa Ativar canais, selecione mensagens no app como parte das suas configurações de integração para ativar casos de uso como formulários de captura de e-mail e SMS, pop-ups promocionais e pesquisas. Para saber como criar uma, consulte In-App Messages.

Nota

A Braze coleta informações de visitantes, como endereços de e-mail e números de telefone, por meio de mensagens no app. Essas informações são enviadas para a Shopify. Esses dados permitem que os comerciantes reconheçam visitantes em suas lojas e criem uma experiência de compra mais personalizada. Para mais detalhes, consulte Visitor API.

Banners

Os Banners exibem conteúdo personalizado na vitrine da sua Shopify, como promoções, anúncios e ofertas direcionadas.

Importante

Os Banners para a integração padrão do Shopify estão atualmente em acesso antecipado. Entre em contato com seu gerente de conta da Braze se tiver interesse em participar do acesso antecipado.

Configuração

Importante

Os Banners exigem um tema Shopify Online Store 2.0 e a versão 6.8.0 ou posterior do SDK da Braze. Durante a configuração, a Braze verifica se o tema publicado da sua loja é compatível com posicionamentos de banner inline. Temas vintage não são compatíveis com posicionamentos inline, então Ativar banners e criar posicionamentos de banner fica desativado em Ativar canais. Para usar Banners, faça upgrade para um tema Online Store 2.0 no painel da Shopify e depois retorne à configuração da integração para ativar os Banners.

Selecione Ativar banners e criar posicionamentos de banner em Ativar canais e depois salve.

A Braze cria automaticamente esses posicionamentos de Banner uma vez por espaço de trabalho, compartilhados entre todas as lojas Shopify conectadas:

• Global header
• Home body
• Global footer
• Product info banner
• Product body
• Collection body
• Cart body
• Cart summary

Nota

Se você conectar várias lojas Shopify e ativar Banners para cada uma, a Braze cria os mesmos oito posicionamentos ao mesmo tempo. Os mesmos IDs de posicionamento podem ser usados em qualquer uma ou em todas as suas lojas conectadas simultaneamente.

Se os IDs de posicionamento padrão não se encaixam na sua configuração ou se você deseja usar outros adicionais, é necessário criar os posicionamentos manualmente. Cada ID de posicionamento deve corresponder ao que está configurado no bloco de app correspondente da Shopify. Se você alterar um ID de posicionamento após o lançamento, atualize o bloco de app para que corresponda, caso contrário o banner deixará de ser renderizado.

Criar um Banner

Crie seu Banner como Campaign ou Canvas usando o editor de arrastar e soltar, HTML ou um modelo.

Nota

A prévia do editor da Braze mostra apenas o conteúdo do Banner. Para ver onde o Banner aparece no seu site, faça a prévia no editor de temas da Shopify.

Etapa 1: adicionar seu Banner ao tema da Shopify

1. Lance sua Campaign ou Canvas para um público pequeno, como um Segment de teste contendo apenas a sua conta (por exemplo, seu próprio external_id ou device_id), ou um grupo de teste incluído no seu direcionamento. Isso permite verificar o Banner no seu site ativo sem expô-lo aos compradores.
2. No editor de temas da Shopify, abra a página onde deseja o Banner, depois selecione Apps > Add Block > Apps > Braze no menu.

3. Nas configurações do bloco de app, insira o placement_id do posicionamento escolhido (por exemplo, global_header) a partir dos seus posicionamentos de Banner.

4. (Opcional) Ajuste a largura do bloco de app (% do container) e adicione uma altura fixa em pixels. Por padrão, a altura máxima se ajusta ao conteúdo do seu banner. Defina uma altura fixa se o seu tema precisar de um espaço limitado, como para evitar que um banner alto empurre o conteúdo da página para baixo.

Etapa 2: testar e lançar

Visite sua loja como um usuário teste para confirmar que o Banner é renderizado no posicionamento correto e aparece como esperado. Depois, edite o direcionamento da sua Campaign ou Canvas para alcançar todo o seu público. Para medir o desempenho, consulte Análise de dados dos Banners.

Importante

Atualmente, os Banners não são compatíveis com páginas de agradecimento, status de pedido ou conta do cliente. Se você tem interesse nesses posicionamentos específicos, faça uma solicitação por meio da sua equipe de conta da Braze.

Content Cards e Feature Flags

Para adicionar Content Cards ou Feature Flags, colabore com seus desenvolvedores para inserir o código SDK necessário diretamente no seu arquivo theme.liquid. Para instruções detalhadas, consulte Integrando o SDK da Braze.

Notificações por web push

Atualmente, o web push não é compatível com a integração da Shopify. Se você tem interesse em web push for the Shopify integration, envie feedback de produto.

Etapa 7: Concluir a configuração

1. Depois de definir sua configuração, selecione Finish Setup.
2. Ative o app embed da Braze nas configurações de tema do Shopify. Selecione Open Shopify para ser redirecionado à sua conta Shopify e ativar o app embed nas configurações de tema da sua loja.

3. Depois de ativar o app embed, sua configuração estará concluída! Confirme se é possível visualizar as configurações de integração, o status da sincronização inicial de dados e os eventos ativos do Shopify.