Как настроить и подключить Amplitude в проект на React Native — Expo

7 min readMay 26, 2020

Эта статья описывает моё виденье того, как можно подключить Amplitude — комплексное программное обеспечение для анализа продуктов для web и мобильных устройств в проекты React Native созданные с использованием Expo Cli.

1. Настройка проекта

1.1 Установка зависимостей

Установка Amplitude в проект, созданный на Expo CLI, выполняется следующим образом:

expo install expo-analytics-amplitude

1.2 Настройка окружения amplitude в проекте

1.2.1 Перейдем в корень проекта и создадим там папку amplitude

1.2.2 В папке amplitude создадим 4 файла:

index.js
config.js
events.js
utils.js

1.2.3 В config.js экспортируем константу apiKey, пока ей будет присвоена пустая строка, мы вернемся к ней ниже

// amplitude/config.js
export const apiKey = ‘’;

1.2.4 В utils.js пропишем функцию normalizeTrackingOptions. Эта функция служит для создания объекта — опции, который содержит дополнительную информации о событии, передаваемом в Amplitude. Именно такой код рекомендует expo.io в своем примере, можете просто скопировать код ниже

// amplitude/utils.js
export function normalizeTrackingOptions(options) {    if (!options) {        return null;    }    const { usernameOrEmail, ...rest } = options;    if (usernameOrEmail) {        if (usernameOrEmail.includes('@')) {            rest.email = usernameOrEmail;        } else {            rest.username = usernameOrEmail;        }    }    return rest;}export default {   normalizeTrackingOptions};

1.2.5 Файл events.js необходим для хранения и стандартизации наименований тех событий, которые мы хотим логировать в Amplitude. Например, мы хотим логировать вход пользователя в приложение, для этого создадим константу LOG_IN, которою будем передавать в функцию логирования. Таким же образом можно логировать ошибки.

// amplitude/events.js
export default {
    ERROR_EVENT: 'ERROR_EVENT',
    LOG_IN: 'LOG_IN'
};

1.2.6 В файл index.js импортируем Amplitude из expo-analytics-amplitude, apiKey из config.js, normalizeTrackingOptions из utils.js и eventAction из events.js

// amplitude/index.js
import * as Amplitude from 'expo-analytics-amplitude';import { apiKey } from './config';import { normalizeTrackingOptions } from './utils';import eventActions from './events';

И сразу экспортируем events, это нужно для удобного доступа к ним.

// amplitude/index.js
export const events = eventActions;

1.2.7 Теперь создадим фикцию инициализации Amplitude, она необходима для авторизации в сервисе по apiKey

Она будет вызывать метод initialize у Amplitude с нашим apiKey, это выглядит так:

// amplitude/index.js
export function initialize() {
    Amplitude.initialize(apiKey);
}

1.2.8 Создадим функцию identify для идентификации наших пользователей приложения в Amplitude по их данным, например, получаемых с api.

Она будет принимать id пользователя (id, который присвоен вашему пользователю при регистрации в вашем приложении, если такой есть) и options (дополнительная информация о пользователе, например имя, email, дата рождения и др.). Выглядит следующим образом:

// amplitude/index.js
export function identify(id, options) {
    // Инициализируем Amplitude
    initialize();    // формируем properties через заранее подготовленную
    // функцию normalizeTrackingOptions
    const properties = normalizeTrackingOptions(options);
    if (id) {
    // Если есть возможность идентифицировать пользователя по id,
    // устанавливает пользователю его id в Amplitude.
    // В обратном, Amplitude присвоит пользователю случайный id)
        Amplitude.setUserId(id);        if (properties) {
        // Устанавливаем пользователю properties
            Amplitude.setUserProperties(properties);
        }    } else {        Amplitude.clearUserProperties();    }}

1.2.9 Создадим фикцию logEvent для логирования событий в приложении

// amplitude/index.js
export function logEvent(event, options) {    // Инициализируем Amplitude
    initialize();    // формируем properties через заранее подготовленную
    // функцию normalizeTrackingOptions
    const properties = normalizeTrackingOptions(options);    if (properties) {        Amplitude.logEventWithProperties(
            event,
            { event: properties }
        );    } else {        Amplitude.logEvent(event);    }    console.log('Amplitude logEvent: ', event);}

1.2.10 В завершении, экспортируем events, initialize, identify, logEvent из index.js

// amplitude/index.js
export default {    events,    initialize,    identify,    logEvent,};

Целиком index.js выглядит так:

// amplitude/index.js
import * as Amplitude from 'expo-analytics-amplitude';
import { apiKey } from './config';
import eventActions from './events';
import { normalizeTrackingOptions } from './utils';export const events = eventActions;export function initialize() {
    Amplitude.initialize(apiKey);
}export function identify(id, options) {
    initialize();
    const properties = normalizeTrackingOptions(options);
    if (id) {
        Amplitude.setUserId(id);
        if (properties) {
            Amplitude.setUserProperties(properties);
        }
    } else {
        Amplitude.clearUserProperties();
    }
}export function logEvent(event, options) {
    initialize();
    const properties = normalizeTrackingOptions(options);
    if (properties) {
        Amplitude.logEventWithProperties(
            event,
            { event: properties }
        );
    } else {
        Amplitude.logEvent(event);
    }
}export default {
    events,
    initialize,
    identify,
    logEvent,
};

1.3 Подключение логера Amplitude в компонент приложения

1.3.1 Импортируем logEvent и events в компонент, действия которого необходимо логировать, например в App.js

// App.js
import { logEvent, events } from '../amplitude';

1.3.2 В App.js создадим тестовую кнопки LogIn и Error. LogIn будет имитировать вход в приложение. Error — соответственно, будет имитировать ошибку. А так же создадим хендлер onPressHandler для LogIn кнопки и errorHandler для Error кнопки. В них мы будем вызывать logEvent с событиями, которые мы подготовили в файле events.js

// App.js
import * as React from 'react';
import { StyleSheet, View, Button } from 'react-native';
import { logEvent, events } from './amplitude';export default function App() {
    const user = { userName: 'Jack', email: 'Jack@Jack.com' };
    const error = { code: 400, message: 'Not Found' };    const apiLogIn = () => {
    // Имитация запроса к серверу
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('user', user);
                identify(user.id, user);
                resolve(user);
            }, 1000)
        });
    }    const onPressHandler = () => {
        const apiUser = await apiLogIn();
        logEvent(events.LOG_IN, apiUser);
    };    const errorHandler = () => {
        logEvent(events.ERROR_EVENT, error);
    };    return (
        <View style={styles.container}>
            <Button onPress={onPressHandler} title="LogIn" />
            <Button
                onPress={errorHandler}
                color="orangered"
                title="Error"
            />
         </View>
    );
}const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

На этом настройка нашего приложения завершена, теперь необходимо настроить аккаунт в Amplitude.

2 Создание и настройка аккаунта и проекта в Amplitude

2.1 Регистрация

2.1.1 Переходим на сайт https://amplitude.com/ и жмем Explore demo now

2.1.2 Вводим email

2.1.3 Выбираем направленность вашего приложения, например Media и жмем Next

2.1.4 Вводим свои данные

На данный момент открыта демо версия с различными метриками. Метрики подобраны под направленность компании, которая была выбрана ранее (Media). Тут можно изучить как работает Amplitude, увидеть систему в рабочем состоянии на demo данных.

2.1.5 Далее, идем в почту, находим письмо от Amplitude, переходим по ссылке, подтверждаем валидность email, вводим данные в форму и жмем Activate

2.1.6 Теперь, когда мы уже все проверили, изучили и подтвердили, в самом верху страницы жмем кнопку Set up on the Free Plan.

2.1.7 Вводим имя организации (будет отображаться в системе), url по которому будет доступен ваг аккаунт Amplitude и жмем Create

Поздравляю, теперь у вас есть аккаунт на Amplitude, давайте его настроим

2.2 Настройка проекта

2.2.1 Жмем Create Project, вводим имя проекта и жмем Create

2.2.2 Это главная страница проекта, на ней нас интересует API Key. Копируем его в файл сonfig.js и жмём Add Data Source

2.2.3 Выбираем iOS SDK и жмём Next и снова Next

Сейчас Amplitude ждёт события от приложения. Как только событие будет отправлено, Amplitude получит его и укажет здесь.

2.2.4 Теперь запускаем наше приложение в симуляторе iPhone и жмем кнопку Login, чтобы отправить первый ивент после чего Amplitude должен получить событие и выдать такое окно. Дальше, жмём Finish

2.2.5 Чтобы добавить Android, проделайте подобное (2.2.3–2.2.5) для Android SDK и симулятором Android.

На этом всё, Amplitude добавлен в ваш проект на React Native — Expo.

Теперь вам остаётся только настроить нужные для вас метрики и мониторинг.

Например, чтобы посмотреть информация о событии LOG_IN или ERROR_EVENT, которые мы создали выше, можно перейти на страницу https://analytics.amplitude.com/ИМЯ_ВАШЕЙ_КОМПАНИИ/activity и увидеть статистику