Metrickle
Start free

Install Metrickle

Last updated

Create an app in the dashboard first: each app has its own write key (mk_pub_…), shown on its Settings page and in the install card. The snippets below use a placeholder; the dashboard shows them with your key filled in.

A write key only sends events. It's safe to put in a web page or a mobile app.

Pick your platform

Script tag

<!-- Paste before </head>. Add data-cookieless for consent-free, cookieless tracking. -->
<script defer src="https://app.metrickle.com/m.js" data-key="mk_pub_YOUR_WRITE_KEY"></script>

<script>
  // Custom events & conversions
  window.metrickle?.track("signup", { plan: "pro" });
  window.metrickle?.track("purchase", { revenue: 49 });
</script>

npm

bun add @metrickle/sdk

import { init } from "@metrickle/sdk";

const metrickle = init({
  writeKey: "mk_pub_YOUR_WRITE_KEY",
  host: "https://in.metrickle.com",
  // cookieless: true,
});

metrickle.track("signup", { plan: "pro" });
metrickle.identify(user.id, { plan: user.plan }); // after login
metrickle.reset();                                // on logout

// Research (turn features on under Settings → Research)
metrickle.consent({ replay: true });  // from your consent banner
metrickle.feedback.open();            // open the feedback dialog from your own button

React Native

bun add @metrickle/sdk @react-native-async-storage/async-storage

import AsyncStorage from "@react-native-async-storage/async-storage";
import { AppState, Dimensions, Platform } from "react-native";
import { init } from "@metrickle/sdk/react-native";

export const metrickle = init({
  writeKey: "mk_pub_YOUR_WRITE_KEY",
  host: "https://in.metrickle.com",
  storage: AsyncStorage,
  appState: AppState,
  os: Platform.OS,
  osVersion: String(Platform.Version),
  screen: Dimensions.get("screen"),
  appVersion: "1.0.0",
});

// With React Navigation: onStateChange={() => metrickle.screen(currentRouteName)}
metrickle.screen("Home");
metrickle.track("checkout_started", { items: 3 });

// Accessibility context: pass AccessibilityInfo and PixelRatio.getFontScale to init()
// Surveys: render them with your own components
metrickle.surveys.onShow((survey) => showSurveySheet(survey)); // call survey.shown(), answer(), complete()/dismiss()
// Feedback (screenshot optional, e.g. from react-native-view-shot as a data URL)
await metrickle.feedback.submit({ category: "bug", message: "Pay button does nothing" });

iOS

// Xcode → File → Add Package Dependencies → https://github.com/metrickle/metrickle-swift
import Metrickle

// In your App init or application(_:didFinishLaunchingWithOptions:)
Metrickle.configure(writeKey: "mk_pub_YOUR_WRITE_KEY", options: .init(host: "https://in.metrickle.com"))

// UIKit screens are tracked automatically. In SwiftUI, name each screen:
HomeView().metrickleScreen("Home")

Metrickle.shared?.track("checkout_started", properties: ["items": 3])
Metrickle.shared?.identify("user-123", traits: ["plan": "pro"]) // after login
Metrickle.shared?.reset()                                       // on logout

// VoiceOver, Dynamic Type, Reduce Motion and more are reported automatically.
// Surveys show in an accessible native sheet; feedback from your own button:
await Metrickle.shared?.feedback.submit(category: .bug, message: "Pay button does nothing")

Android

// build.gradle.kts
implementation("com.metrickle:metrickle:0.1.0")
implementation("com.metrickle:metrickle-compose:0.1.0") // Compose screens and survey sheet

// Application.onCreate()
Metrickle.init(this, "mk_pub_YOUR_WRITE_KEY", MetrickleOptions(host = "https://in.metrickle.com"))

// Activities are tracked automatically. In Compose, name each destination
// and place the survey host once at the root:
TrackScreen("Home")
MetrickleSurveyHost()

Metrickle.track("checkout_started", mapOf("items" to 3))
Metrickle.identify("user-123", mapOf("plan" to "pro")) // after login
Metrickle.reset()                                      // on logout

// TalkBack, font scale, animations off and more are reported automatically.
Metrickle.feedback.submit(FeedbackCategory.BUG, "Pay button does nothing") // from a coroutine

Flutter

flutter pub add metrickle

import 'package:metrickle/metrickle.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Metrickle.init(
    writeKey: 'mk_pub_YOUR_WRITE_KEY',
    options: MetrickleOptions(host: 'https://in.metrickle.com', appVersion: '1.0.0'),
  );
  runApp(MaterialApp(
    navigatorObservers: [MetrickleNavigatorObserver()], // named routes become screens
    builder: (context, child) => MetrickleScope(child: child!), // a11y context, rage taps, surveys
    home: const HomePage(),
  ));
}

Metrickle.instance.track('checkout_started', {'items': 3});
Metrickle.instance.identify('user-123', {'plan': 'pro'}); // after login
Metrickle.instance.reset();                               // on logout

HTTP API

# Any other platform (server, game engine, desktop): POST batches of events
curl -X POST https://in.metrickle.com/v1/batch \
  -H "content-type: application/json" \
  -H "x-metrickle-key: mk_pub_YOUR_WRITE_KEY" \
  -d '{
    "sentAt": '$(date +%s000)',
    "context": { "library": { "name": "my-sdk", "version": "1.0" }, "platform": "ios",
                 "app": { "version": "2.3.0" }, "device": { "type": "mobile", "os": "iOS" } },
    "events": [{
      "id": "'$(uuidgen | tr A-Z a-z)'", "type": "screen", "name": "$screen", "ts": '$(date +%s000)',
      "anonymousId": "device-uuid", "sessionId": "session-uuid", "path": "Onboarding/Step1"
    }]
  }'

Check data arrives

Load a page or open the app, then look at the app in the dashboard. The install card turns green when the first events arrive. An AI assistant connected over MCP can check for you with verify_install, which also says what to fix if nothing has arrived.

Next steps