Integre Braze com aplicativos ChatGPT

Este guia cobre como integrar Braze com aplicativos ChatGPT para ativar análise de dados e registro de eventos dentro de aplicativos impulsionados por IA.

Visão geral

Os aplicativos ChatGPT fornecem uma plataforma poderosa para construir aplicativos de conversação com IA. Ao integrar Braze com seu aplicativo ChatGPT, você pode continuar a manter o controle dos dados primários na era da IA, incluindo como:

• Rastrear o engajamento e o comportamento do usuário dentro do seu aplicativo ChatGPT (como identificar quais perguntas ou recursos de chat seus clientes usam)
• Segmentar e redirecionar campanhas Braze com base em padrões de interação com IA (como enviar e-mails para usuários que usaram o chat mais de três vezes por semana)

Principais benefícios

• Possua a jornada do seu cliente: Enquanto os usuários interagem com sua marca através do ChatGPT, você mantém visibilidade sobre seu comportamento, preferências e padrões de engajamento. Esses dados fluem diretamente para os perfis de usuários do Braze, não apenas para a análise da plataforma de IA.
• Redirecionamento entre plataformas: Rastreie interações do usuário em seu aplicativo ChatGPT e redirecione-os através de seus canais próprios (e-mail, SMS, notificações por push, envio de mensagens no aplicativo) com campanhas personalizadas com base em seus padrões de uso de IA.
• Retorne conteúdo promocional 1:1 para conversas do ChatGPT: Entregue mensagens in-app do Braze, Cartões de Conteúdo, e mais diretamente dentro da sua experiência ChatGPT usando os componentes de UI conversacional personalizados que sua equipe construiu para seu aplicativo.
• Atribuição de receita: Rastreie compras e conversões que se originam de interações no aplicativo ChatGPT.

Pré-requisitos

Antes de integrar o Braze com seu app ChatGPT, você deve ter o seguinte:

• Um novo app web e chave de API no seu espaço de trabalho Braze
• Um app ChatGPT criado na plataforma OpenAI (app de exemplo OpenAI)

Integração do app ChatGPT

Configuração

Etapa 1: Obtenha o arquivo de integração do Braze

Copie o arquivo braze.js do nosso repositório de integração de apps ChatGPT para o seu projeto. Esse arquivo contém todas as funções auxiliares e de configuração do Braze SDK necessárias.

Etapa 2: Instalar dependências

Instale nosso Web SDK para obter o conjunto mais atualizado de recursos do Braze:

Para integração lado a lado com o cliente:

1
npm install @braze/web-sdk

Implementação

Há duas maneiras de integrar o Braze ao seu app ChatGPT, dependendo do seu caso de uso:

Integração lado a lado com o cliente (widgets personalizados)

Para exibir as mensagens do Braze e rastrear as interações dos usuários nos widgets personalizados do seu app ChatGPT, use a integração do SDK da Web. Um exemplo completo de envio de mensagens pode ser encontrado em nosso repositório de amostras aqui.

Configurar metadados do widget

Adicione os seguintes metadados ao arquivo do servidor MCP para permitir domínios do Braze, certificando-se de atualizar o domínio CDN com base em sua região:

1
2
3
4
5
6
7
8
9
"openai/widgetCSP": {
  connect_domains: ["https://YOUR-SDK-ENDPOINT"],
  resource_domains: [
    "https://appboy-images.com",
    "https://braze-images.com",
    "https://cdn.braze.eu",
    "https://use.fontawesome.com"
  ],
}

Substitua YOUR-SDK-ENDPOINT por seu endpoint real do SDK do Braze.

Configurar o gancho useBraze

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 { useBraze } from "./utils/braze";

function YourWidget() {
  const braze = useBraze({
    apiKey: "your-braze-api-key",
    baseUrl: "your-braze-endpoint.braze.com",
  });

  useEffect(() => {
    if (!braze.isInitialized) {
      return;
    }

    // Set user identity
    braze.changeUser("user-id-123");
    
    // Log widget interactions
    braze.logCustomEvent("viewed_pizzaz_list");
  }, [braze.isInitialized]);

  return (
    // Your widget JSX
  );
}

Exibir cartões de conteúdo do Braze

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const [cards, setCards] = useState([]);

useEffect(() => {
  // Get cached content cards
  setCards(braze.getCachedContentCards()?.cards ?? []);

  // Subscribe to content card updates
  braze.subscribeToContentCardsUpdates((contentCards) => {
    setCards(contentCards.cards);
  });

  // Open session
  braze.openSession();

  return () => {
    braze.removeAllSubscriptions();
  }
}, []);

Rastreamento de eventos do widget

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Track user interactions within your widget
const handleButtonClick = () => {
  braze.logCustomEvent("widget_button_clicked", {
    button_type: "save_list",
    widget_name: "pizza_list"
  });
};

const handleItemInteraction = (itemId) => {
  braze.logCustomEvent("item_interacted", {
    item_id: itemId,
    interaction_type: "view_details"
  });
};

Integração lado a lado com o servidor (servidor MCP)

Se também precisar de uma integração lado a lado do servidor para a funcionalidade de envio de mensagens no seu servidor MCP, entre em contato com [email protected]. Para rastreamento de eventos e compras de seu servidor MCP, use nossa API REST.