SDK React Native

Última atualização: 06 de Maio de 2021

Introdução

O objetivo deste manual é fornecer todas as informações necessárias para instalação e uso da ferramenta nos aplicativos desenvolvidos para plataforma React Native.

Este Plugin realiza a coleta de dados (informações e localização) do dispositivo e envio para ClearSale. Todas as informações coletadas são dados relacionados apenas ao dispositivo, sem relação ao aplicativo integrado.

A informação de geolocalização depende da permissão concedida pelo usuário do dispositivo, neste caso é necessário que o aplicativo solicite o acesso da informação de localização do usuário (o SDK não solicita permissão). Caso o aplicativo não solicite o acesso ou o usuário não conceda permissão não é feita a captura da informação.

O Plugin respeita a política de privacidade da Apple e do Google para a captura dos dados do device e o nivel de permissão atribuído pelo usuário (usuário do dispositivo).

React Native

Dependências

- Node >= 10.19.0
- React Native >= 0.63.2

React-Navigation (navegação entre telas)

- react-navigation/native: 5.7.3
- react-navigation/stack: 5.9.0

Instalação

O plugin está disponível em um repositório privado, e para sua utilização seguir o exemplo abaixo:


Adicionando configuração do repositório privado

1. Adicione ao seu projeto um arquivo .npmrc no mesmo diretório que está o package.json.

2. Dentro do .npmrc inclua o seguinte trecho:

@behavior-analytics-sdk:registry=https://pkgs.dev.azure.com/vstscs/Produtos-Agile/_packaging/BehaviorAnalytics.SDK/npm/registry

always-auth=true

; begin auth token
//pkgs.dev.azure.com/vstscs/Produtos-Agile/_packaging/BehaviorAnalytics.SDK/npm/registry/:username=vstscs
//pkgs.dev.azure.com/vstscs/Produtos-Agile/_packaging/BehaviorAnalytics.SDK/npm/registry/:_password=COLOQUE_AQUI_SEU_TOKEN_EM_BASE64
//pkgs.dev.azure.com/vstscs/Produtos-Agile/_packaging/BehaviorAnalytics.SDK/npm/registry/:email=COLOQUE_AQUI_SEU_EMAIL
//pkgs.dev.azure.com/vstscs/Produtos-Agile/_packaging/BehaviorAnalytics.SDK/npm/:username=vstscs
//pkgs.dev.azure.com/vstscs/Produtos-Agile/_packaging/BehaviorAnalytics.SDK/npm/:_password=COLOQUE_AQUI_SEU_TOKEN_EM_BASE64
//pkgs.dev.azure.com/vstscs/Produtos-Agile/_packaging/BehaviorAnalytics.SDK/npm/:email=COLOQUE_AQUI_SEU_EMAIL
; end auth token

É necessário que o token esteja no formato base64. Há várias formas de realizar a conversão. Uma delas é através do seguinte comando executável no git bash:

echo -n 'SEU_TOKEN_AQUI' | base64

Outro ponto de atenção é que o campo "COLOQUE_AQUI_SEU_EMAIL" refere-se a algum e-mail válido e que não é fornecido pela ClearSale.

3. Adicione o SDK React Native da ClearSale a sua instalação, conforme exemplo:

"dependencies": {
    "@behavior-analytics-sdk/react-native-clear-sale-module": "1.0.0-rc.2",
    ...
},

4. Execute o comando npm install.


Adição do plugin ao projeto

Npm:

npm install @behavior-analytics-sdk/react-native-clear-sale-module@1.0.0-rc.2

Configuração

Android

Necessário adicionar ao arquivo build.gradle do projeto o repositório do SDK.

maven {
    url 'https://pkgs.dev.azure.com/vstscs/Produtos-Agile/_packaging/BehaviorAnalytics.SDK.Android/maven/v1'
    name 'BehaviorAnalytics.SDK.Android'
    credentials {
        username "vstscs"
        password TOKEN
    }
}

No arquivo build.gradle do app adicione o código para habilitar o multidex.

android {
    defaultConfig {
        ...
        multiDexEnabled true
    }
    ...
}
dependencies {
    implementation 'com.android.support:multidex:1.0.3'
}

Na classe MainActivity.java do app adicione o método para habilitar o multidex em versões do android anteriores a 5.0.

Primeiro importe o multidex:

import android.content.Context;
import androidx.multidex.MultiDex;

Depois adicione o método dentro da classe:

@Override
protected void attachBaseContext(Context base) {
    super.attachBaseContext(base);
    MultiDex.install(this);
}

Na classe MainApplication.java importe:

import androidx.multidex.MultiDexApplication;

Depois altere a herança de Application para MultiDexApplication.

Para saber mais consulte as documentações:


IOS

Configuração.

Adicionar lib nativa iOS ClearSale no pod do seu projeto:

source	'https://csbehaviorsdk:<TOKEN>@dev.azure.com/vstscs/Produtos-Agile/_git/BehaviorAnalytics.SDK.IOS.Specs'
target 'NOME_DO_PROJETO' do
pod 'CSBehavior', '3.0.1'
end

Ainda no pod do seu projeto adicionar a seguinte opção no post_install:

post_install do |installer|
...
installer.pods_project.targets.each do |t|
    t.build_configurations.each do |config|
    config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
    end
end
end

Dentro da pasta do projeto entrar na pasta ios e executar o comando pod install:

pod install

Caso apresentar o erro Error: EMFILE: too many open files - React Native CLI instalar o watchman.

Executar os seguintes comandos no terminal:

brew update
$ brew install watchman

Adicionar a seguinte opção no seu plist e após no xcode Menu Build -> Clean and Build Folder.

<dict>
        <key>NSAllowsArbitraryLoads</key>
        <true />
        <key>NSExceptionDomains</key>
        <dict>
            <key>clearsale.com.br</key>
            <dict>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.0</string>
            </dict>
        </dict>
    </dict>

Interface Behavior

Disponibiliza todos os métodos que realizam a comunicação com o SDK, todos métodos retornam uma Promise.


Métodos

Nome do método Plataforma Descrição
Promise<String> generateSessionId(appKey) Android / iOS Gera e retorna um identificador de sessão. Este método deve ser utilizado somente se o aplicativo não gerar identificadores únicos para cada coleta.
Promise<void> collectDeviceInformation(appKey, sessionId) Android / iOS Realiza a coleta das informações do dispositivo vinculando ao valor de Sessão. É necessário passar como parâmetro o SessionId, valor de sessão.
Observações:
  • Caso não possua um valor próprio para o SessionId utilizar o método. generateSessionId().
  • O tamanho máximo de SessionId a ser usado é 128 caracteres.
  • O tamanho mínimo do SessionId a ser usado é de 6 caracteres.
Promise<void> start(appKey, success, failure) Android Inicia a coleta das informações sobre o dispositivo e a tela, Exception: CaptureWasStartedException - lançada quando uma captura anterior não foi parada.
Promise<void> stop(appKey, sessionId, success, failure) Android Encerra o processo de captura dos dados.

Exemplos

Exemplo de uso do plugin.


Importando o plugin
import ClearSaleModule from 'react-native-clear-sale-module'

Utilizando os métodos start e stop durante o ciclo de vida do componente (React Hooks):

useEffect(() => {
    ...
    ClearSaleModule.start(appKey)

    return () => {
        ...
        ClearSaleModule.stop(appKey)
    }
}, [])

Android

Para utilizar as funções generateSessionId e collectDeviceInformation é necessário que o método start tenha sido executado.

Caso o método start seja executado sem que o método stop ocorra, será lançada uma exception do tipo CaptureWasStartedException.


Método de coleta de dados

Método generateSessionId retorna o sessionId.

const loadPage = async () => {
    ...
    
    await verifyLocationPermissions()

    const sessionId = await ClearSaleModule.generateSessionId(state.token)
    setState({
        ...state,
        sessionId: sessionId
    })

    ...
}

Método collectDeviceInformation inicia coleta de dados com um sessionId já existente.

useFocusEffect(
    React.useCallback(() => {
        loadPage()

    return () => {
        unloadPage()
        };
    }, [])
);

const loadPage = async () => {
    ClearSaleModule.collectDeviceInformation(state.token, state.sessionId).then(() => {
        console.log('id com sucesso', state.sessionId)
        setLoading(false)
        setSend(true)
    }).catch(() => {
        setLoading(false)
        setSend(false)
    })
}

Capturando a resposta da Promise.
const getSessionId = () => {
    ClearSaleModule.generateSessionId(appKey).then(sessionId => {
        ...
        setSessionId(sessionId)
    }).catch(err => {
        ...
    })
}

Remoção

Npm:
npm uninstall @behavior-analytics-sdk/react-native-clear-sale-module

Licença de Uso.

Ao realizar o download e utilizar nosso SDK você estará concordando com a seguinte licença.

Copyright © 2021 ClearSale

Todos os direitos são reservados, sendo concedida a permissão para usar o software da maneira como está, não sendo permitido qualquer modificação ou cópia para qualquer fim. O Software é licenciado com suas atuais configurações “tal como está” e sem garantia de qualquer espécie, nem expressa e nem implícita, incluindo mas não se limitando, garantias de comercialização, adequação para fins particulares e não violação de direitos patenteados. Em nenhuma hipótese os titulares dos Direitos Autorais podem ser responsabilizados por danos, perdas, causas de ação, quer seja por contrato ou ato ilícito, ou outra ação tortuosa advinda do uso do Software ou outras ações relacionadas com este Software sem prévia autorização escrita do detentor dos direitos autorais.