Como Integrar o Klaviyo no React Native

O Klaviyo é uma plataforma de automação de marketing e e-mail/SMS, usada para personalizar e segmentar campanhas com base no comportamento do usuário. Se você quer integrá-lo ao seu app React Native, este guia cobre a configuração e o uso do SDK.

1. Pré-requisitos

Antes de começar, tenha:

• Um projeto React Native configurado
• Uma conta no Klaviyo
• Expo Bare Workflow ou um projeto ejetado, se estiver usando Expo
• Firebase configurado para notificações push (opcional, mas recomendado)

2. Instalando o SDK do Klaviyo

O Klaviyo oferece um SDK oficial para React Native:

npm install klaviyo-react-native-sdk

# ou
yarn add klaviyo-react-native-sdk

Depois da instalação, configure iOS e Android.

3. Configuração para iOS

3.1 Firebase para push

Se for usar push notifications, configure o Firebase no iOS:

1. Adicione o arquivo GoogleService-Info.plist ao projeto no Xcode.
2. Instale as dependências nativas:

cd ios && pod install

3. Ative Push Notifications em Capabilities no Xcode.

3.2 Inicializar o Klaviyo no iOS

No AppDelegate.m, adicione:

#import <KlaviyoSDK/KlaviyoSDK-Swift.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [KlaviyoSDK initializeWithAPIKey:@"SUA_API_KEY"];
    return YES;
}

4. Configuração para Android

4.1 API key no AndroidManifest.xml

Em android/app/src/main/AndroidManifest.xml, garanta a permissão de internet:

<uses-permission android:name="android.permission.INTERNET" />

E, dentro de <application>:

<meta-data
    android:name="com.klaviyo.api_key"
    android:value="SUA_API_KEY" />

4.2 Firebase para push

1. Coloque o google-services.json em android/app/.
2. Em android/build.gradle:

dependencies {
    classpath("com.google.gms:google-services:4.3.10")
}

3. Em android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

5. Usando o SDK no React Native

Importe e inicialize o SDK no arquivo principal (App.js ou index.js):

import { KlaviyoSDK } from "klaviyo-react-native-sdk";

KlaviyoSDK.initialize("SUA_API_KEY");

5.1 Identificar um usuário

KlaviyoSDK.setProfile({
  email: "usuario@example.com",
  phoneNumber: "+5511999999999",
  firstName: "João",
  lastName: "Silva",
});

5.2 Registrar um evento

KlaviyoSDK.logEvent("purchase", {
  value: 99.99,
  currency: "BRL",
});

5.3 Enviar o token de push

import messaging from "@react-native-firebase/messaging";

async function requestPushToken() {
  const token = await messaging().getToken();
  if (token) {
    KlaviyoSDK.setPushToken(token);
  }
}

requestPushToken();

6. Testando e depurando

1. Confira o perfil inicializado:

KlaviyoSDK.getProfile().then((profile) =>
  console.log("Perfil do Usuário:", profile)
);

2. Dispare um evento de teste:

KlaviyoSDK.logEvent("test_event", { action: "debug" });

O evento deve aparecer no dashboard do Klaviyo em Metrics.

3. Depure push:

messaging().onMessage(async (remoteMessage) => {
  console.log("Mensagem Recebida:", remoteMessage);
});

4. Se o token falhar:

KlaviyoSDK.setPushToken(token).catch((error) =>
  console.error("Erro ao registrar push token:", error)
);

Se os eventos não aparecerem no Klaviyo, verifique se:

• A API key está correta
• O SDK foi inicializado antes do uso
• O Firebase Messaging está configurado para push

7. Conclusão

Integrar o Klaviyo ao React Native permite rastrear eventos, enviar push e personalizar campanhas. Com isso, dá para segmentar usuários e melhorar o engajamento do app.

Para recursos extras, consulte a documentação oficial do Klaviyo.