Integre o Braze com os aplicativos ChatGPT

Este guia aborda como integrar o Braze com os aplicativos ChatGPT para ativar a análise de dados e o registro de eventos em aplicativos com tecnologia de IA.

Visão geral

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

• Acompanhe o engajamento e o comportamento dos usuários em seu app ChatGPT (por exemplo, identificando quais perguntas ou recursos de bate-papo seus clientes utilizam).
• Segmente e redirecione as campanhas da Braze com base em padrões de interação de IA (como o envio de e-mails para usuários que utilizaram o chat mais de três vezes por semana).

Principais benefícios

• Seja o dono da jornada do seu cliente: Enquanto os usuários interagem com sua marca por meio do ChatGPT, você mantém visibilidade sobre o comportamento, as preferências e os padrões de engajamento deles. Esses dados fluem diretamente para os perfis de usuário da Braze, não apenas para a análise de dados da plataforma de IA.
• Redirecionamento entre plataformas: Acompanhe as interações dos usuários em seu aplicativo ChatGPT e redirecione-os em seus canais proprietários (e-mail, SMS, notificações por push, mensagens no app) com campanhas personalizadas com base em seus padrões de uso de IA.
• Retorne conteúdo promocional 1:1 para conversas no ChatGPT: Entregue mensagens no app Braze, cartões de conteúdo e muito mais diretamente em sua experiência ChatGPT usando os componentes personalizados da interface de usuário conversacional que sua equipe criou para o seu app.
• Atribuição de receita: Acompanhe as compras e conversões originadas das interações com o app ChatGPT.

Pré-requisitos

Antes de integrar o Braze ao seu aplicativo ChatGPT, você deve ter o seguinte:

• Um novo app web e uma chave de API em seu espaço de trabalho Braze
• Um app ChatGPT criado na plataforma OpenAI (app de amostra 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. Este arquivo contém toda a configuração necessária do SDK do Braze e funções auxiliares.

Etapa 2: Instale as dependências

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

Para integração do lado do cliente:

1
npm install @braze/web-sdk

Implementação

Existem duas maneiras de integrar o Braze com seu app ChatGPT, dependendo do seu caso de uso:

Integração do lado do cliente (widgets personalizados)

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

Configure os metadados do widget

Adicione os seguintes metadados ao seu arquivo de servidor MCP para permitir domínios do Braze, garantindo que você atualize o domínio CDN com base na 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 pelo seu endpoint real do SDK do Braze.

Configure o hook 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
  );
}

Exiba os 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();
  }
}, []);

Rastreie 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 do lado do servidor (servidor MCP)

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