Более правильный подход к подключению 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 будет выглядеть так:

Добавляем pod

Для 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. В случае, если нам понадобится какой-то другой метод из аппметрики - нам надо будет лезть в нативные модули и добавлять эти методы (что также может занять время).