Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in the official package.

Overview

@mccsoft/react-native-matomo

Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in the official package.


Installation

  • Requires React Native version 0.60.0, or later.
  • Supports iOS 10.0, or later.

After that you can install it as usual.

Via NPM

npm install @mccsoft/react-native-matomo

Via Yarn

yarn add @mccsoft/react-native-matomo

Directly in package.json pointed to GitHub

"@mccsoft/react-native-matomo": "https://github.com/mccsoft/react-native-matomo",

📱 iOS (Extra steps)

cd ios/
# Install pod dependencies
pod install

Since the official matomo-sdk-ios library is written is Swift, you need to have Swift enabled in your iOS project. If you already have any .swift files, you are good to go. Otherwise create a new empty Swift source file in Xcode, and allow it to create the neccessary bridging header when prompted.

Quick usage

import Matomo from "@mccsoft/react-native-matomo";

Matomo.initialize("https://example.com/piwik.php", 1)
  .catch(error => console.warn("Failed to initialize matomo", error))
  .then(() => Matomo.setUserId("UniqueUserId"))
  .then(() => Matomo.setCustomDimension(1, "1.0.0"))
  .then(async () => {
      await Matomo.trackEvent("Application", "Startup");

      await Matomo.trackView("/start", 'Start screen title');
    }
  )

Methods

Initialize

Before using any function below, the tracker must be initialized.

Matomo.initialize('https://your-matomo-domain.tld/piwik.php', 1);

Set User ID

Providing the tracker with a user ID lets you connect data collected from multiple devices and multiple browsers for the same user. A user ID is typically a non empty string such as username, email address or UUID that uniquely identifies the user. The User ID must be the same for a given user across all her devices and browsers. . If user ID is used, it must be persisted locally by the app and set directly on the tracker each time the app is started.

If no user ID is used, the SDK will generate, manage and persist a random id for you.

Matomo.setUserId('123e4567-e89b-12d3-a456-426655440000');

Custom Dimensions

The Matomo SDK currently supports Custom Dimensions for the Visit Scope. Using Custom Dimensions you can add properties to the whole visit, such as "Did the user finish the tutorial?", "Is the user a paying user?" or "Which version of the Application is being used?" and such. Before sending custom dimensions please make sure Custom Dimensions are properly installed and documented. You will need the ID of your configured Dimension.

After that you can set a new Dimension,

Matomo.setCustomDimension(1, 'abc');

or remove an already set dimension.

Matomo.setCustomDimension(1, null);

Dimensions in the Visit Scope will be sent along every Page View or Event. Custom Dimensions are not persisted by the SDK and have to be re-configured upon application startup.

Track screen views

To send a screen view set the screen path and titles on the tracker.

Matomo.trackView('/your_activity', 'Title');

Track events

To collect data about user's interaction with interactive components of your app, like button presses or the use of a particular item in a game use trackEvent.

Matomo.trackEvent('category', 'action', 'label', 1000);

Track goals

If you want to trigger a conversion manually or track some user interaction simply call the method trackGoal. Read more about what is a Goal in Matomo.

Matomo.trackGoal(1, revenue);

Track App Downloads

If you want to track the app downloads, there is also a function to do that (only supported on Android).

Matomo.trackAppDownload();

Setting App Opt Out

The MatomoTracker SDK supports opting out of tracking. Note that this flag must be set each time the app starts up and will default to false. To set the app-level opt out, use:

Matomo.setAppOptOut(true);

Is initialized

You can easily find out is Matomo tracker initialized or not. Call this method and get Boolean value, use:

await Matomo.isInitialized();

Mocking

Add this to mock specific function as you wish

jest.mock('@mccsoft/react-native-matomo', () => ({
  initialize: () => Promise.resolve(),
  trackEvent: () => Promise.resolve(),
  trackView: () => Promise.resolve(),
  ...
}));

Or add this line in your jest setupFiles configuration to define default mocks.

  "setupFiles": [
    ...
    "./node_modules/@mccsoft/react-native-matomo/jestSetup.js"
  ],

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

You might also like...
The official repo for Blokada for Android and iOS.

Blokada 5 Blokada 5 is the next generation of the well known open source mobile ad blocker and privacy app. Want to try it out? Click here to download

A Android Web IDE supports code auto-completion and highlight, plugin (Supports Html, Css, JS, Json, Php etc)

WebDevOps A Android Web IDE supports code auto-completion and highlight, plugin (Supports Html, Css, JS, Json, Php etc) Join us QQ group number: 10314

Help users of coding platforms to create findable, well documented, secure and offering good quality projects

The Ambassador The Ambassador will help users of coding platforms to create findable, well documented and offering good quality projects. It measures

A lightweight, feature-rich wrapper for the Telegram Bot API, providing a handy Kotlin DSL to quickly build your bot.

Kotlin Telegram Bot Kotlin based wrapper over Telegram API. Current version of the Telegram Api: 6.0 Principles Annotations Magic. The basic interacti

Warscape core library. Includes common models for sharing between platforms.

warscope-core This repository uses for sharing common models between backend and frontend sides. Implementation $version available at top of README.md

FoldingNavigationDrawer-Android This is a sample project present how to use Folding-Android to add Folding Efect to Navigation Drawer.

FoldingNavigationDrawer-Android Sample (Play Store Demo) This is a sample project present how to use Folding-Android to add Folding Efect to Navigatio

NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.
NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de

React Native Stone SDK Implementation (Support for both Mobile and POS versions)

react-native-stone-pos Stone Android POS Native Module Installation Stone has a private packageCloud repository, so we need to have your token before

Android Package Inspector - dynamic analysis with api hooks, start unexported activities and more. (Xposed Module)
Android Package Inspector - dynamic analysis with api hooks, start unexported activities and more. (Xposed Module)

Inspeckage - Android Package Inspector Inspeckage is a tool developed to offer dynamic analysis of Android applications. By applying hooks to function

Releases(v1.0.1)
Owner
MCC Soft
MCC Soft
React-native-user-interface - Change React Native userinterface at runtime

react-native-user-interface change RN userinterface at runtime. Installation npm

Ahmed Eid 0 Jan 11, 2022
Wrapper for Kustomer SDK v2.0 for react native

This is a wrapper for Kustomer v2 Sdk for react native. This implements the kust

Shivam Rawat 2 Dec 30, 2021
Initiate immediate phone call for React Native on iOS and Android.

react-native-immediate-call-library Initiate immediate phone call for React Native on iOS and Android. Getting started Using npm: npm install react-na

null 7 Sep 7, 2022
A 2020s compatible React Native keyboard avoiding view for Android and iOS that just works.

react-native-keyboard-shift Example Snack coming soon Until then: Clone this repo: git clone https://github.com/FullStackCraft/react-native-keyboard-s

Full Stack Craft 66 Aug 16, 2022
🚀 React Native Segmented Control, Pure Javascript for iOS and Android

Installation Add the dependency: npm i react-native-segmented-control-2 Peer Dependencies Zero Dependency ?? Usage Import import SegmentedControl from

FreakyCoder 11 Nov 10, 2022
An Animated Scrolling View for React Native applications, supported on both iOS and Android

react-native-focused-scroll An Animated Scrolling View for React Native applications, supported on both iOS and Android Preview react-native-focus-scr

Fatemeh Marzoughi (Saba) 3 Aug 12, 2022
Added more features to app's crash dialog, fixed custom rom deleted dialog, the best experience to Android developer.

AppErrorsTracking 应用异常跟踪 Added more features to app's crash dialog, fixed custom rom deleted dialog, the best experience to Android developer. 为原生 FC

狐狸派 70 Nov 21, 2022
A package to include a standard Unlock premium view in iOS and Android apps

A package to include a standard Unlock premium view in iOS and Android apps

Groupe MINASTE 2 May 21, 2022
Git history is an android application that simply tracks GitHub repository's issues.

Git History About Git history is an android application that simply tracks GitHub repository's issues. You can search for user and get all public repo

Aditya Sutar 0 Oct 17, 2021
🌄 Photo editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

React Native Photo Editor (RNPE) ?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and Ph

Baron Ha. 234 Nov 21, 2022