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: Conectar sua loja Shopify

1. Na Braze, acesse Integrações de parceiros > Parceiros de tecnologia e pesquise por “Shopify”.
2. Na página de parceiro da Shopify, selecione Iniciar configuração para começar o processo de integração.
   
   
   
   
3. Na loja de apps da Shopify, instale o aplicativo da Braze.
   
   

Nota

Se a sua conta da Shopify estiver associada a mais de uma loja, você pode trocar a loja em que está conectado selecionando o ícone da loja no cabeçalho e depois Trocar de loja.

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

5. Selecione Iniciar configuração.
   
   

Etapa 2: Ativar os SDKs Web da Braze

Para lojas on-line da Shopify, você pode selecionar a configuração padrão para implementar automaticamente o SDK Web e o SDK JavaScript da Braze.

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

• Na visita ao site, como no início da sessão
  • Rastreia usuários identificados e anônimos
• No cadastro da 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 nas contas

Nota

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

Etapa 3: Configure seus dados do Shopify

Configuração de dados padrão

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 da Shopify oferece suporte a webhooks de criação e atualização de clientes da Shopify, que estão localizados nas suas configurações de dados. Quando um perfil de usuário é criado ou atualizado na 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 da 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 do preenchimento retroativo de histórico

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

Para saber o que é importado, como funcionam os relatórios de receita, ver capturas de tela da configuração e obter orientações caso você já use a Braze com Campaigns ou Canvas ativos, consulte Preenchimento retroativo de histórico.

(Avançado) Configuração do 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 desta integração. Os eventos personalizados capturam interações exclusivas na sua loja, como:

Rastrear dados personalizados oferece insights mais profundos sobre o comportamento do usuário e possibilita mais personalização. Para implementar eventos personalizados, você precisa editar o código do tema da sua loja virtual no arquivo theme.liquid. Talvez seja necessário pedir ajuda aos seus desenvolvedores.

Por exemplo, o snippet de JavaScript a seguir rastreia 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 a atividade) no dispositivo do usuário para registrar eventos ou atributos personalizados. Para saber mais sobre como registrar 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 personalizar ainda mais o envio de mensagens. As atualizações automáticas acontecem quase em tempo real, então seu catálogo sempre reflete os detalhes mais recentes dos produtos. Para saber mais, confira Sincronização de produtos da Shopify.

Etapa 6: Ativar canais (opcional)

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

Mensagens no app

Na etapa Activate Channels, selecione mensagens no app nas configurações da integração. Assim, você ativa casos de uso como formulários de captura de e-mail e SMS, pop-ups promocionais e pesquisas. Para saber como criar uma, consulte Mensagens no app.

Nota

A Braze coleta informações dos 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. Com esses dados, os lojistas reconhecem os visitantes da loja e criam uma experiência de compra mais personalizada. Para saber mais, consulte Visitor API.

Banners

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

Importante

Os Banners para a integração padrão da 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 Online Store 2.0 da Shopify e o SDK da Braze na versão 6.8.0 ou posterior. Durante a configuração, a Braze verifica se o tema publicado da sua loja oferece suporte a posicionamentos de banner em linha. Temas Vintage não oferecem suporte a posicionamentos em linha, então a opção Turn on banners and create banner placements fica desativada em Activate Channels. Para usar Banners, faça upgrade para um tema Online Store 2.0 no admin da Shopify e, depois, volte à configuração da integração para ativar os Banners.

Selecione Turn on banners and create banner placements em Activate Channels e salve.

A Braze cria automaticamente estes 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 em 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 lojas conectadas simultaneamente.

Se os IDs de posicionamento padrão não se encaixarem na sua configuração ou se você quiser usar outros, será preciso 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 deixa de ser renderizado.

Criar um Banner

Crie sua Campaign ou Canvas de Banner 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: Adicione o Banner ao seu tema da Shopify

1. Lance sua Campaign ou Canvas para um público pequeno, como um Segment de teste que contenha apenas sua conta (por exemplo, seu próprio external_id ou device_id) ou um grupo de teste incluído no seu direcionamento. Assim, você verifica o Banner no site ativo sem exibi-lo para os compradores.
2. No editor de temas da Shopify, abra a página onde você quer o Banner e 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) entre os seus posicionamentos de Banner.

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

Etapa 2: Teste e lance

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

Importante

No momento, os Banners não são compatíveis com as páginas de agradecimento, de status de pedido ou de conta do cliente. Se você tiver interesse nesses posicionamentos específicos, faça uma solicitação à equipe de conta da Braze.

Content Cards e Feature Flags

Para adicionar cartões de conteúdo ou Feature Flags, trabalhe com seus desenvolvedores para inserir o código do SDK necessário diretamente no arquivo theme.liquid. Para instruções detalhadas, consulte Integração do SDK da Braze.

Notificações web push

No momento, o web push não é compatível com a integração com a 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 Concluir configuração.
2. Ative o app embed da Braze nas configurações do tema da Shopify. Selecione Abrir Shopify para ser redirecionado à sua conta da Shopify e ativar o app embed nas configurações do tema da sua loja.

3. Depois de ativar o app embed, sua configuração estará concluída! Confirme que você consegue visualizar as configurações da integração, o status da sincronização inicial de dados e seus eventos ativos da Shopify.