Более правильный подход к подключению Yandex AppMetrica в React Native приложении04.02.2024 00:30

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

Данная статья актуальна для версии реакт нейтива 0.73.3.

С чего все началось

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

В итоге, я нашел готовое решение, аж от яндекса — https://github.com/yandexmobile/react-native-appmetrica.

И что можно у него выделить из плюсов: это готовое решение для подключения аппметрики.

А из минусов:

Заброшенная библиотека

В ишьюсах полным-полно запросов на обновление этой библиотеки, но бедным разработчикам никто не отвечает и им приходится писать патчи или обращаться к форкам этого репозитория.

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

Самостоятельно подключаем аппметрику

Подключение аппметрики будет состоять из нескольких шагов:

Нативная установка и инициализация аппметрики;
Создание нативных модулей для обращения к методам аппметрики из JS.

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

Начнем с iOS

Заходим в директорию ios;
Открываем файл Podfile;
Ищем там target 'yourappname' do и внутри него добавляем под pod 'YandexMobileMetrica', '4.5.2';
Запускаем в консоли pod install .

Примерно Podfile будет выглядеть так:

Добавляем pod

Для JS разрабов, далеких от айос разработки:

Podfile — это как package.json;
pod — это либа, которую вы ставите обычно с помощью npm/yarn или еще чего;
pod install — это npm i/yarn.

Далее:

Открываем xCode;
Открываем AppDelegate (который с буквой m);
Делаем импорт #import ;
Ищем там didFinishLaunchingWithOptions;

Вставляем туда код:

YMMYandexMetricaConfiguration *configuration = [[YMMYandexMetricaConfiguration alloc] initWithApiKey:@"ваш ключ"];
[YMMYandexMetrica activateWithConfiguration:configuration];

Чтобы получилось так:

Как должно выглядеть

Перезапустите ваше приложение (полностью, а не просто в метро R нажмите) и, если вы все сделали правильно, в аппметрике вы увидите как минимум один новый профиль:

Это ваш телефон подключился к аппметрике

Ура, на этом пока что с айосом закончим, попробуем подключить андроид.

Установим аппметрику на Android

Заходим в build.gradle, который внутри app;
В dependencies кладем implementation 'com.yandex.android:mobmetricalib:5.3.0' (это как установить что-то в package.json);
Я обычно после этого запускаю приложение на телефоне, чтобы автоматически все что надо установилось, но вы можете зайти в Android Studio и синкануть все, что надо.

Так как у большинства приложение не самой последней версии, у вас может быть код на джаве, а у меня на котлине. Не бойтесь, пожалуйста, джавы, я верю в вас, вы сможете переписать последующий код с котлина на джаву. После этого:

Открываем MainApplication.kt;
Импортируем

import com.yandex.metrica.YandexMetrica
import com.yandex.metrica.YandexMetricaConfig

После этого идем в onCreate
Пишем

val config = YandexMetricaConfig.newConfigBuilder("ваш ключ").build()

YandexMetrica.activate(this.applicationContext, config)

ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)

Получаем в итоге такое:

Вот так вот делай, по другому не делай

Полностью перезапускаем приложение и что мы видим:

Целых 2 пользователя (один с моего айфона, другой с андроида)

Успех.

Но на этом не останавливаемся. Как минимум аппметрику подключают для того, чтобы отправлять какие-то ивенты. Этим сейчас и займемся.

Что у нас есть:

У нас нативно установлена аппметрика;
У нас нативно активирована аппметрика.

Теперь, нам надо каким-то образом со стороны жаваскрипта получать доступ к методам этой аппметрики, установленной нативно. Что надо делать? Ага, писать нативные модули. Мы будем писать именно обычные нативные модули, а не турбо модули, потому что турбо модули писать дольше и вообще можете на них забить, если не пишите что-то, требующее передачи большого количества данных с жаваскрипта в нативку и обратно.

Нативный модуль для iOS

Мы опустим подробности создания заголовочного файла и файла с кодом (обратитесь к официальной документации реакт нейтива если что) и сразу приступим к коду.

Первый файл, заголовочный, выглядит до ужаса просто:

#import 

@interface YandexMetrica : NSObject 

@end

Далее создаем и летим в наш m файлик и там уже для вас я полностью подготовил код:

#import "YandexMetrica.h"
#import 

@implementation YandexMetrica

RCT_EXPORT_MODULE(YandexMetrica);

RCT_EXPORT_METHOD(sendEvent:(NSString *)name params:(NSDictionary *)params) {
  [YMMYandexMetrica reportEvent:name parameters:params onFailure:^(NSError *error) {
      NSLog(@"REPORT ERROR: %@", [error localizedDescription]);
  }];
}

@end

Давайте потестим, что там отправляется/не отправляется. Зайдем в App.tsx, напишем следующее:

import {NativeModules} from 'react-native';

// ...

const {YandexMetrica} = NativeModules;

// ...

// Внутри компонента какого-нибудь

useEffect(() => {
  YandexMetrica.sendEvent('Dver', {
    prodal: 'azerbaijancy',
    platform: Platform.OS,
  });
}, []);

Запускаем наше приложение и ждем. Событие может не сразу отобразиться у вас в дашборде. В итоге, получим:

Получили наше событие

Вот так вот. Аппметрика работает. Но только на айосе. Надо еще сделать тоже самое на андроиде.

Нативный модуль для Android

Тут я тоже не буду пояснять вам, что такое модуль и что такое пекедж. Если надо — либо обращайтесь в документацию, либо пишите в комменты.

Открываем Android Studio;
Создаем новый файл с новым классом:

package com.yandex

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.facebook.react.bridge.ReadableMap
import com.yandex.metrica.YandexMetrica

class YandexMetricaModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    override fun getName() = "YandexMetrica"

    @ReactMethod fun sendEvent(name: String, params: ReadableMap) {
        YandexMetrica.reportEvent(name, params.toHashMap());
    }
}

Создаем еще один файл с еще одним классом:

package com.yandex

import android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager

class YandexMetricaPackage : ReactPackage {
    override fun createViewManagers(
            reactContext: ReactApplicationContext
    ): MutableList>> = mutableListOf()

    override fun createNativeModules(
            reactContext: ReactApplicationContext
    ): MutableList = listOf(YandexMetricaModule(reactContext)).toMutableList()
}

В MainApplication.kt добавляем в getPackages add(YandexMetricaPackage());

И усе. Запускаем наше приложение, ждем, открываем дашборд и что видим:

япиии

Видим, что ивент с платформой на андроиде был отправлен. Что говорит о том, что интеграция прошла успешно.

Выводы, плюсы и минусы

Таким образом мы самостоятельно установили аппметрику на айос и андроид. Что это нам дает:

Мы сами решаем, какая версия аппметрики у нас будет — самая последняя (не то, что в готовой, устаревшей, неподдерживаемой, еле работающей либе);
Мы указываем только те методы, которые нам по факту нужны (это якобы мы умные разработчики, которые экспоузят только те методы, которые нужны, а остальные скрывают);
Мы повышаем спрос на нас самих же, ибо реакт нейтив разработчики, умеющие делать такие вещи — очень ценные.

Какие минусы:

Надо все руками устанавливать, что может занять время;
Надо иметь более-менее базовые знания разработки на айосе/андроиде (ну или по крайней мере уметь копипастить из интернета);
В случае, если нам понадобится какой-то другой метод из аппметрики — нам надо будет лезть в нативные модули и добавлять эти методы (что также может занять время).