Skip to content

Configuração da integração personalizada do Shopify

Esta página o orienta sobre como integrar o Braze a uma loja Shopify Hydrogen ou a qualquer loja Shopify headless usando uma vitrine personalizada.

Este guia usa a estrutura Hydrogen da Shopify como exemplo. No entanto, você pode seguir uma abordagem semelhante se a sua marca usar o Shopify para o back-end da sua loja com uma configuração de front-end “sem cabeça”.

Para integrar sua loja Shopify headless ao Braze, você precisa concluir essas duas metas:

  1. Inicialize e carregue o Braze Web SDK para ativar o rastreamento no local

    Adicione manualmente o código em seu site do Shopify para ativar o rastreamento no site do Braze. Ao implementar o Braze SDK em sua loja Shopify headless, é possível rastrear as atividades no local, incluindo sessões, comportamento anônimo do usuário, ações do comprador antes do checkout e quaisquer eventos personalizados ou atributos personalizados que você decida incluir com sua equipe de desenvolvimento. Você também pode adicionar quaisquer canais compatíveis com os SDKs, como mensagens no app ou cartões de conteúdo.

2. Instalar a integração do Braze com o Shopify

Depois de conectar sua loja Shopify ao Braze, você terá acesso aos dados de clientes, checkout, pedidos e produtos por meio de webhooks do Shopify.

Para concluir essas metas, siga estas etapas:

Inicializar e carregar o Braze Web SDK

Etapa 1: Criar um app para o site do Braze

No Braze, acesse Settings > App Settings > e selecione Add App. Nomeie o app como “Shopify”.

Etapa 2: Adicionar subdomínio e variáveis ambientais

  1. Configure seu subdomínio do Shopify para redirecionar o tráfego da sua loja on-line para o Hydrogen.
  2. Adicione um URI de retorno de chamada para login. (O URI será adicionado automaticamente quando o domínio for adicionado).
  3. Configure suas variáveis de ambiente do Shopify:
    • Crie duas variáveis de ambiente usando os valores do app do site que você criou na etapa 1.
    • BRAZE_API_KEY
    • BRAZE_API_URL

Etapa 3: Ativar o rastreamento no local

A primeira etapa é inicializar o Braze Web SDK. Recomendamos fazer isso instalando nosso pacote NPM:

1
2
3

npm install --save @braze/web-sdk@5.4.0
# or, using yarn:
# yarn add @braze/web-sdk

Em seguida, inclua essa configuração como uma chave de nível superior em seu arquivo vite.config.js:

1
2
3

optimizeDeps: {
    exclude: ['@braze/web-sdk']
}

Depois de instalar o pacote NPM, você deve inicializar o SDK em um gancho useEffect dentro do componente Layout. Dependendo da sua versão do Hydrogen, esse componente pode estar localizado no arquivo root.jsx ou layout.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Add these imports
import * as braze from "@braze/web-sdk";
import { useEffect } from 'react';

export function Layout({children}) {
  const nonce = useNonce();
  // @type {RootLoader} 
  const data = useRouteLoaderData('root');
  
  // Add useEffect call to initialize Braze SDK
  useEffect(() => {
    if(!braze.isInitialized()) {
      braze.initialize(data.brazeApiKey, {
        baseUrl: data.brazeApiUrl,
      });
      braze.openSession()    
    }
  }, [data]) 

  return (...);
}

Os valores data.brazeApiKey e data.brazeApiUrl precisam ser incluídos no carregador de componentes usando as variáveis de ambiente criadas na etapa 2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

export async function loader(args) {
  // Start fetching non-critical data without blocking time to first byte
  const deferredData = loadDeferredData(args);

  // Await the critical data required to render initial state of the page
  const criticalData = await loadCriticalData(args);

  const {storefront, env} = args.context;

  return {
    ...deferredData,
    ...criticalData,
    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
    // Add the two properties below to the returned value
    brazeApiKey: env.BRAZE_API_KEY,
    brazeApiUrl: env.BRAZE_API_URL,
    shop: getShopAnalytics({
      storefront,
      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
    }),
    consent: {
      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      withPrivacyBanner: false,
      // Localize the privacy banner
      country: args.context.storefront.i18n.country,
      language: args.context.storefront.i18n.language,
    },
  };
}

Etapa 4: Adicionar um evento de login de conta do Shopify

Rastreie quando um comprador faz login em sua conta e sincroniza suas informações de usuário com o Braze. Isso inclui chamar nosso método changeUser para identificar clientes com uma ID externa Braze.

Antes de começar, certifique-se de ter configurado os URIs de retorno de chamada para que o login do cliente funcione no Hydrogen. Para saber mais, consulte Usando a API da conta do cliente com o Hydrogen.

  1. Depois de configurar os URIs de retorno de chamada, defina uma função para chamar o SDK do Braze. Crie um novo arquivo (como Tracking.jsx) e importe-o de seus componentes:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import * as braze from "@braze/web-sdk";

export function trackCustomerLogin(customerData, storefrontUrl) {
  const customerId = customerData.id.substring(customerData.id.lastIndexOf('/') + 1)
  const customerSessionKey = `ab.shopify.shopify_customer_${customerId}`;
  const alreadySetCustomerInfo = sessionStorage.getItem(customerSessionKey);
  
  if(!alreadySetCustomerInfo) {
    const user = braze.getUser()

    // To use Shopify customer ID as Braze External ID, use:
    // braze.changeUser(customerId)

    // To use Shopify customer email as Braze External ID, use:
      // braze.changeUser(customerData.emailAddress?.emailAddress)
        // To use hashing for email addresses, apply hashing before calling changeUser

    // To use your own custom ID as the Braze External ID, pass that value to the changeUser call.

    user.setFirstName(customerData.firstName);
    user.setLastName(customerData.lastName);
    if(customerData.emailAddress.emailAddress) {
      user.setEmail(customerData.emailAddress?.emailAddress);
    }

    if(customerData.phoneNumber?.phoneNumber) {
      user.setPhoneNumber(customerData.phoneNumber?.phoneNumber);
    }
    braze.logCustomEvent(
      "shopify_account_login",
      { source: storefrontUrl }
    )
    sessionStorage.setItem(customerSessionKey, customerId);
  }
}

2. No mesmo gancho useEffect que inicializa o SDK do Braze, adicione a chamada a essa função:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { trackCustomerLogin } from './Tracking';

export function Layout({children}) {
  const nonce = useNonce();
  // @type {RootLoader}
  const data = useRouteLoaderData('root');

  useEffect(() => {
    if(!braze.isInitialized()) {
      braze.initialize(data.brazeApiKey, {
        baseUrl: data.brazeApiUrl,
        enableLogging: true,
      });
      braze.openSession()    
    }

    // Add call to trackCustomerLogin function
    data.isLoggedIn.then((isLoggedIn) => {
      if(isLoggedIn) {
        trackCustomerLogin(data.customerData, data.publicStoreDomain)
      }
    })

  }, [data])

3. Obtenha o endereço de e-mail e o número de telefone do cliente em sua consulta da API do cliente GraphQL, localizada no arquivo app/graphql/customer-account/CustomerDetailsQuery.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

export const CUSTOMER_FRAGMENT = `#graphql
  fragment Customer on Customer {
    id
    firstName
    lastName
    emailAddress {
      emailAddress
    }
    phoneNumber {
      phoneNumber
    }
    defaultAddress {
      ...Address
    }
    addresses(first: 6) {
      nodes {
        ...Address
      }
    }
  }
  fragment Address on CustomerAddress {
    id
    formatted
    firstName
    lastName
    company
    address1
    address2
    territoryCode
    zoneCode
    city
    zip
    phoneNumber
  }
`;

4. Finalmente, carregue os dados do cliente em sua função de carregador:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// Add import for GraphQL Query 
import { CUSTOMER_DETAILS_QUERY } from './graphql/customer-account/CustomerDetailsQuery';

export async function loader(args) {
  // Start fetching non-critical data without blocking time to first byte
  const deferredData = loadDeferredData(args);

  // Await the critical data required to render initial state of the page
  const criticalData = await loadCriticalData(args);

  const {storefront, env} = args.context;

  // Add GraphQL call to Customer API
  const isLoggedIn = await deferredData.isLoggedIn;
  let customerData;
  if (isLoggedIn) {
    const { data, errors } = await args.context.customerAccount.query(
        CUSTOMER_DETAILS_QUERY,
    );
    customerData = data.customer
  } else {
    customerData = {}
  }

  return {
    ...deferredData,
    ...criticalData,
    publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
    brazeApiKey: env.BRAZE_API_KEY,
    brazeApiUrl: env.BRAZE_API_URL,
    // Add the property below to the returned value 
    customerData: customerData,
    shop: getShopAnalytics({
      storefront,
      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
    }),
    consent: {
      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      withPrivacyBanner: false,
      // Localize the privacy banner
      country: args.context.storefront.i18n.country,
      language: args.context.storefront.i18n.language,
    },
  };
}

Etapa 5: Adicionar rastreamento para os eventos Product Viewed e Cart Updated

Eventos visualizados pelo produto

  1. Adicione essa função ao seu arquivo Tracking.jsx:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export function trackProductViewed(product, storefrontUrl) {
  const eventData = {
    product_id: product.id.substring(product.id.lastIndexOf('/') + 1),
    product_name: product.title,
    variant_id: product.selectedOrFirstAvailableVariant.id.substring(product.selectedOrFirstAvailableVariant.id.lastIndexOf('/') + 1),
    image_url: product.selectedOrFirstAvailableVariant.image?.url,
    product_url: `${storefrontUrl}/products/${product.handle}`,
    price: product.selectedOrFirstAvailableVariant.price.amount,
    currency: product.selectedOrFirstAvailableVariant.price.currencyCode,
    source: storefrontUrl,
    type: ["price_drop", "back_in_stock"],
    metadata: {
    sku: product.selectedOrFirstAvailableVariant.sku
  }

  }
  braze.logCustomEvent(
    "ecommerce.product_viewed",
    eventData 
  )
}

2. Para chamar a função anterior sempre que um usuário visitar uma página de produto, adicione um gancho useEffect ao componente Product no arquivo app/routes/products.$handle.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { trackProductViewed } from '~/tracking';
import { useEffect } from 'react';

export default function Product() {
  // @type {LoaderReturnData} 
  // retrieve storefrontUrl to be passed into trackProductViewed 
  const {product, storefrontUrl} = useLoaderData();
  
  // Add useEffect hook for tracking product_viewed event 
  useEffect(() => {
    trackProductViewed(product, storefrontUrl)
  }, [])

  return (...)
}

3. Adicione o valor para “storefrontUrl” (porque ele não está no carregador de componentes por padrão):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

async function loadCriticalData({context, params, request}) {
  const {handle} = params;
  const {storefront} = context;

  if (!handle) {
    throw new Error('Expected product handle to be defined');
  }

  const [{product}] = await Promise.alll([
    storefront.query(PRODUCT_QUERY, {
      variables: {handle, selectedOptions: getSelectedProductOptions(request)},
    }),
    // Add other queries here, so that they are loaded in parallel
  ]);

  if (!product?.id) {
    throw new Response(null, {status: 404});
  }

  return {
    product,
   // Add this property to the returned value
    storefrontUrl: context.env.PUBLIC_STORE_DOMAIN,
  };
}

Carrinho Eventos atualizados

Além de rastrear o evento cart_updated, você precisa enviar o valor do token do carrinho para o Braze. Usamos o valor do token do carrinho para processar webhooks de pedidos recebidos da Shopify. Isso é feito criando um alias de usuário com o token do carrinho do Shopify como seu nome.

  1. Defina funções para o rastreamento do evento cart_updated e a configuração do token do carrinho:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

export function trackCartUpdated(cart, storefrontUrl) {
  const eventData = {
    cart_id: cart.id,
    total_value: cart.cost.totalAmount.amount,
    currency: cart.cost.totalAmount.currencyCode,

    products: cart.lines.nodes.map((line) => {
      return {
        product_id: line.merchandise.product.id.toString(),
        product_name: line.merchandise.product.title,
        variant_id: line.merchandise.id.toString(),
        image_url: line.merchandise.image.url,
        product_url: `${storefrontUrl}/products/${line.merchandise.product.handle}`,
        quantity: Number(line.quantity),
        price: Number(line.cost.totalAmount.amount / Number(line.quantity))
      }
    }),
    source: storefrontUrl,
    metadata: {},
  };
  
  braze.logCustomEvent(
    "ecommerce.cart_updated",
    eventData 
  )
}

export function setCartToken(cart) {
  const cartId = cart.id.substring(cart.id.lastIndexOf('/') + 1) 
  const cartToken = cartId.substring(0, cartId.indexOf("?key="));
  if (cartToken) {
    const cartSessionKey = `ab.shopify.shopify_cart_${cartToken}`;
    const alreadySetCartToken = sessionStorage.getItem(cartSessionKey);

    if (!alreadySetCartToken) {
      braze.getUser().addAlias("shopify_cart_token", `shopify_cart_${cartToken}`)
      braze.requestImmediateDataFlush();
      sessionStorage.setItem(cartSessionKey, cartToken);
    }
  }
}

2. Retorne o objeto cart da ação do fetcher para que o Braze possa acessar suas propriedades acessando seu arquivo app/routes/cart.jsx e adicionando o seguinte ao action função:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

export async function action({request, context}) {
  const {cart} = context;

  ...

  switch (action) {
    case CartForm.ACTIONS.LinesAdd:
      result = await cart.addLines(inputs.lines);
      break;
    ... 
  }

  const cartId = result?.cart?.id;
  const headers = cartId ? cart.setCartId(result.cart.id) : new Headers();
  const {cart: cartResult, errors, warnings} = result;

  const redirectTo = formData.get('redirectTo') ?? null;
  if (typeof redirectTo === 'string') {
    status = 303;
    headers.set('Location', redirectTo);
  }
  
  return data(
    {
      cart: cartResult,
      // Add these two properties to the returned value 
      updatedCart: await cart.get(),
      storefrontUrl: context.env.PUBLIC_STORE_DOMAIN,
      errors,
      warnings,
      analytics: {
        cartId,
      },
    },
    {status, headers},
  );
}

Para saber mais sobre os fetchers do Remix, consulte useFetcher.

3. As lojas Hydrogen geralmente definem um componente CartForm que gerencia o estado do objeto do carrinho, que é usado ao adicionar, remover e alterar a quantidade de itens em um carrinho. Adicione outro gancho useEffect no componente AddToCartButton que chamará a função trackCartUpdated sempre que o estado do buscador de formulários for alterado (sempre que o carrinho do usuário for atualizado):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// Add imports 
import { trackCartUpdated, setCartToken } from '~/tracking';
import { useEffect } from 'react';
import { useFetcher } from '@remix-run/react';

export function AddToCartButton({
  analytics,
  children,
  disabled,
  lines,
  onClick,
}) {
	
  // Define a new Fetcher to be used for tracking cart updates 
  const fetcher = useFetcher({ key: "cart-fetcher" });
  
  // Add useEffect hook for tracking cart_updated event and setting cart token alias
  useEffect(() => {
    if(fetcher.state === "idle" && fetcher.data) {
      trackCartUpdated(fetcher.data.updatedCart, fetcher.data.storefrontUrl)
      setCartToken(fetcher.data.updatedCart);
    }
  }, [fetcher.state, fetcher.data])

  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm route="/cart" inputs= fetcherKey="cart-fetcher" action={CartForm.ACTIONS.LinesAdd}>
      {(fetcher) => (
        <>
          <input
            name="analytics"
            type="hidden"
            value={JSON.stringify(analytics)}
          />
          <button
            type="submit"
            onClick={onClick}
            disabled={disabled ?? fetcher.state !== 'idle'}
          >
            {children}
          </button>
        </>
      )}
    </CartForm>
  );
}

4. Use o mesmo endereço fetcherKey para as ações responsáveis pela atualização de um produto existente em seu carrinho. Adicione o seguinte aos componentes CartLineRemoveButton e CartLineUpdateButton (localizados por padrão no arquivo app/components/CartLineItem.jsx):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function CartLineRemoveButton({lineIds, disabled}) {
  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm
      fetcherKey="cart-fetcher"
      route="/cart"
      action={CartForm.ACTIONS.LinesRemove}
      inputs=
    >
      <button disabled={disabled} type="submit">
        Remove
      </button>
    </CartForm>
  );
}

function CartLineUpdateButton({children, lines}) {
  // Add the fetcherKey prop to the CartForm component
  return (
    <CartForm
      route="/cart"
      fetcherKey="cart-fetcher"
      action={CartForm.ACTIONS.LinesUpdate}
      inputs=
    >
      {children}
    </CartForm>
  );
}

Instalar a integração do Braze com o Shopify

Etapa 1: Conecte sua loja da Shopify

Acesse a página de parceiros do Shopify para iniciar sua configuração. Primeiro, selecione Begin Setup (Iniciar configuração) para instalar o aplicativo Braze da Shopify App Store. Siga as etapas guiadas para concluir o processo de instalação.

Página de configuração da integração com o Shopify no dashboard do Braze.

Etapa 2: Ativar os SDKs da Braze

Para lojas Shopify Hydrogen ou headless, selecione a opção Configuração personalizada.

Antes de continuar com o processo de integração, confirme que você ativou o Braze SDK em seu site da Shopify.

Etapa de configuração para ativar os SDKs do Braze.

Etapa 3: Rastrear dados da Shopify

Aprimore sua integração adicionando mais eventos e atribuições do Shopify, que serão alimentados por webhooks do Shopify. Para obter informações detalhadas sobre os dados rastreados por meio dessa integração, consulte Recursos de dados do Shopify.

Etapa de configuração para rastrear dados do Shopify.

Etapa 4: Preenchimento histórico (opcional)

Por meio da configuração personalizada, você tem a opção de carregar seus clientes e pedidos do Shopify dos últimos 90 dias antes de conectar sua integração com o Shopify. Para incluir esse carregamento inicial de dados, marque a caixa da opção de carregamento inicial de dados.

Se preferir realizar o preenchimento posteriormente, você pode concluir a configuração inicial agora e retornar a essa etapa mais tarde.

Seção para configurar o backfill de dados históricos.

Essa tabela contém os dados que serão carregados inicialmente por meio do backfill.

Etapa 5: Configuração de rastreamento de dados personalizado (avançado)

Com os SDKs da Braze, você pode rastrear eventos personalizados ou atributos personalizados que vão além dos dados suportados para essa integração. Os eventos personalizados capturam interações exclusivas em sua loja, como:

Eventos personalizados Atributos personalizados
  • Como usar um código de desconto personalizado
  • Como interagir com uma recomendação personalizada de produto
  • Marcas ou produtos favoritos
  • Categorias de compras de preferência
  • Status de cadastro ou fidelidade

O SDK deve ser inicializado (ouvindo a atividade) no dispositivo de um usuário para registrar eventos ou atributos personalizados. Para saber mais sobre o registro de dados personalizados, consulte Objeto de usuário e logCustomEvent.

Etapa 6: Configurar como gerenciar usuários (opcional)

Selecione seu tipo de external_id no menu suspenso.

Seção "Coletar assinantes".

Por padrão, o Braze converte automaticamente os e-mails do Shopify em letras minúsculas antes de usá-los como ID externo. Se estiver usando e-mail ou envio de 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 nas IDs externas e evita a criação de perfis de usuário duplicados no Braze.

Etapa 6.1: Criar o metacampo braze.external_id

  1. Em seu painel de administração do Shopify, acesse Configurações > Metafields.
  2. Selecione Clientes > Adicionar definição.
  3. Em Namespace e key, digite braze.external_id.
  4. 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 docustomer/create . Isso permite que você escreva o metacampo quando um novo cliente é criado.
  • Preencher os clientes existentes: Use a Admin API ou a Customer API para preencher novamente o metacampo de clientes criados anteriormente.

Etapa 6.2: Crie um ponto de extremidade para recuperar sua ID externa

Você deve criar um endpoint público que o Braze possa chamar para recuperar o ID externo. Isso permite que o Braze busque o ID em cenários em que o Shopify não pode fornecer o metacampo braze.external_id diretamente.

Especificações do endpoint

Método: OBTER

O 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

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

1
2
3

{
  "external_id": "my_external_id"
}
Validação

É fundamental validar se os sites shopify_customer_id e email_address (se houver) correspondem aos valores do cliente na Shopify. Você pode usar a API do Shopify Admin ou a API do cliente para validar esses parâmetros e recuperar o metacampo braze.external_id correto.

Comportamento de falha e fusão

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

  • Implicações da fusão: Se o endpoint falhar (não retornar200 ou atingir o tempo limite), o Braze não poderá recuperar a ID externa. Consequentemente, a fusão entre o usuário do Shopify e o perfil do usuário do Braze não ocorrerá nesse momento.
  • Lógica de repetição: O Braze poderá tentar novas tentativas de rede padrão imediatas, mas se a falha persistir, a mesclagem será adiada até o próximo evento de qualificação (por exemplo, a próxima vez que o usuário atualizar seu perfil ou concluir um checkout).
  • Capacidade de suporte: Para dar suporte à mesclagem de usuários em tempo hábil, certifique-se de que o seu endpoint esteja altamente disponível e lide com o campo opcional email_address de forma adequada.

Etapa 6.3: Insira sua ID externa

Repita a etapa 6 e insira o URL do endpoint depois de selecionar ID externa personalizada como o tipo de ID externa do Braze.

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

Etapa 6.4: Colete suas aceitações de e-mail ou SMS do Shopify (opcional)

Você tem a opção de coletar suas aceitações de marketing por e-mail ou SMS no Shopify.

Se você usar os canais de e-mail ou SMS, poderá sincronizar seus estados de aceitação de marketing por e-mail e SMS no Braze. Se você sincronizar as aceitações de e-mail marketing do Shopify, o Braze criará 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.

Seção "Coletar assinantes" com a opção de coletar aceitação de marketing por e-mail ou SMS.

Etapa 7: Sincronizar produtos (opcional)

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

Etapa de configuração para sincronizar os dados do produto com o Braze.

Etapa 8: Ativar canais

Para ativar mensagens no app, cartões de conteúdo e Feature Flags usando a integração direta do Shopify, adicione cada canal ao seu SDK. Siga os links de documentação fornecidos para cada canal abaixo:

  • Mensagens no app Para ativar mensagens no aplicativo para casos de uso de formulários de captura de leads, consulte Mensagens no aplicativo.
  • Cartões de conteúdo: Para ativar os cartões de conteúdo para casos de uso de caixa de entrada ou banner de site, consulte Cartões de conteúdo.
  • Feature Flag: Para ativar os Feature Flags para casos de uso de experimentação no site, consulte Feature Flags.

Etapa 9: Concluir configuração

Depois de acessar todas as etapas, selecione Finish Setup (Concluir configuração) para retornar à página do parceiro. Em seguida, ative a incorporação do app Braze em sua página de administração do Shopify, conforme indicado pelo banner exibido.

Banner que diz para ativar a incorporação do app Braze no Shopify para que você possa concluir a configuração de sua integração.

Exemplo de código

O Shopify-hydrogen-example é um app de exemplo do Hydrogen que contém todo o código abordado nas etapas anteriores.
Github   Editar esta página no GitHub
New Stuff!