Как установить Segment и MixPanel в React Native 2019

Начиная

Прежде всего, вы должны создать свою учетную запись и добавить источник из каталога собственного приложения React из вашей панели сегментов.

Шаг 1

Создайте нативное приложение для реагирования
Во-первых, мы собираемся создать новый проект React Native (segmentTutorial).

react-native init segmentTutorial

По желанию: Я буду работать с нативной версией React 0.59.9
Если вы хотите следовать точной версии, вы можете установить собственную версию реакции:

react-native init segmentTutorial --version react-native@0.59.9

Затем введите в каталог вашего проекта:

cd segmentTutorial/

Шаг 2:

Установить Cocoapods

Если на вашем компьютере еще не установлен модуль, вы можете следовать официальной документации React Native. Документы.

Блоки инициализации

Если вы уже установили cocados на свой компьютер, вы можете просто ввести в папку IOS:

cd ios

И затем инициализировать стручок

pod init

Затем вернитесь в основной каталог проекта.

cd ../

Шаг 3:

Установите SDK

Во-первых, добавьте @segment/analytics-react-native зависимости от ваших зависимостей и свяжите их с помощью react-native-cli, например:

yarn add @segment/analytics-react-native

Связать зависимость

yarn react-native link

Шаг 4:

Установить модули

На данный момент ваш подфайл должен выглядеть примерно так:
ПРИМЕЧАНИЕ. Если вы следуете руководству по React Native 0.59.9, крайне важно добавить React , Yoga , Folly. В противном случае вы можете столкнуться с ошибками коллизии имен пакетов в вашем сборщике метро.

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'segmentTutorial' do
  # Comment the next line if you don't want to use dynamic frameworks
  # Pods for protoseg
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'RNAnalytics', :path => '../node_modules/@segment/analytics-react-native'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'React', :path => '../node_modules/react-native' , :subspecs => [
    'CxxBridge',
  ]
  
end

Теперь давайте установим ваши модули:

Войдите в папку iOS

cd ios

И установить капсулы

pod install

Шаг 5:

Добавьте сегмент в свой App.js с вашим ключом приложения
Вы можете найти свой ключ записи здесь:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput, Button } from 'react-native';
import analytics from '@segment/analytics-react-native'

type Props = {};
export default class App extends Component<Props> {
  state = { email: "enter your email" }
  async componentDidMount() {
    await analytics.setup('YOUR_WRITE_KEY', {
      
      recordScreenViews: true,
      
      trackAppLifecycleEvents: true
    });
  }

Вы можете проверить полную демонстрацию App.js здесь.

Запустить демо

Запустите приложение

react-native run-ios

Если вы похожи на меня и используете Xcode 11, вы можете использовать новый эмулятор:

react-native run-ios --simulator="iPhone 11"

Исправление проблем

fatal error: 'Analytics/SEGAnalytics.h' file not found #40
проблема с гитхабом Убедитесь, что ваша библиотека связана, вы можете проверить это вручную, открыв свое решение в Xcode и проверив, связано ли решение проекта из сегмента.

Добавить пункт назначения в источник

Используйте свой токен и секретный ключ

Вы можете найти свои токены от Mixpanel здесь:

Установить пакет

yarn add @segment/analytics-react-native-mixpanel

Теперь в вашем подфайле должна быть эта дополнительная строка:

pod 'RNAnalyticsIntegration-Mixpanel', :path => '../node_modules/@segment/analytics-react-native-mixpanel'

Установите модули

pod install

Измените свой App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput, Button } from 'react-native';
import analytics from '@segment/analytics-react-native'
import Mixpanel from '@segment/analytics-react-native-mixpanel'

type Props = {};
export default class App extends Component<Props> {
  state = { email: "enter your email" }
  async componentDidMount() {
    await analytics.setup('YOUR_WRITE_KEY', {
      using: [Mixpanel],
      // Record screen views automatically!
      recordScreenViews: true,
      // Record certain application events automatically!
      trackAppLifecycleEvents: true
    });
  }

Теперь вы можете поиграть с нашими 3 действиями, отслеживаемыми по сегментам и MixPanel.

И мы закончили!
Пожалуйста, оставьте любой комментарий, проблему или отзыв 🤠