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

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

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

В статье будут опущены многие подробности и будет больше практики. Если нужны будут дополнительные пояснения — обращайтесь в комментариях.

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

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

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

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

А из минусов:

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

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

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

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

1. Нативная установка и инициализация аппметрики;

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

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

Начнем с iOS

1. Заходим в директорию ios;

2. Открываем файл Podfile;

3. Ищем там target 'yourappname' do и внутри него добавляем под pod 'YandexMobileMetrica', '4.5.2' ;

4. Запускаем в консоли pod install .

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

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

1. Podfile — это как package.json;

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

3. pod install — это npm i/yarn.

Далее:

1. Открываем xCode;

2. Открываем AppDelegate (который с буквой m);

3. Делаем импорт #import <YandexMobileMetrica/YandexMobileMetrica.h> ;

4. Ищем там didFinishLaunchingWithOptions;

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

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

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

   

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

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

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

1. Заходим в build.gradle, который внутри app;

2. В dependencies кладем implementation 'com.yandex.android:mobmetricalib:5.3.0' (это как установить что-то в package.json);

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

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

1. Открываем MainApplication.kt;

2. Импортируем

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

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

4. Пишем

val config = YandexMetricaConfig.newConfigBuilder("ваш ключ").build()  YandexMetrica.activate(this.applicationContext, config)  ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)

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

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

Успех.

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

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

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

2. У нас нативно активирована аппметрика.

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

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

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

Создаем первый файл, заголовочный (который h), который выглядит до ужаса просто:

#import <React/RCTBridgeModule.h>  @interface YandexMetrica : NSObject <RCTBridgeModule>  @end

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

#import "YandexMetrica.h" #import <YandexMobileMetrica/YandexMobileMetrica.h>  @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

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

1. Открываем Android Studio;

2. Создаем новый файл с новым классом:

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());     } }

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

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<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()      override fun createNativeModules(             reactContext: ReactApplicationContext     ): MutableList<NativeModule> = listOf(YandexMetricaModule(reactContext)).toMutableList() }

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

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

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

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

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

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

2. Мы указываем только те методы, которые нам по факту нужны (это якобы мы умные разработчики, которые экспоузят только те методы, которые нужны, а остальные скрывают);

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

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

1. Надо все руками устанавливать, что может занять время;

2. Надо иметь более-менее базовые знания разработки на айосе/андроиде (ну или по крайней мере уметь копипастить из интернета);

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