Quick Start Guide

After the installation of the package, follow these steps to get Mtrix up and running in your application:

1. Create an Account

Get your up organization ID and project ID at app.mtrix.io.

2. Initialize Mtrix

Add the following code to the entry point of your application:

JavaScript

import mtrix from 'mtrix';

mtrix.init({
  organizationId: 'your-organization-id',
  projectId: 'your-project-id',
  environment: 'production',
  options: {
    // additional optimization
  }
});

mtrix.onReady().then(() => {
  console.log(mtrix)
  // get experiment details
});

React

import React from 'react';
import ReactDOM from 'react-dom';
import mtrix from 'mtrix';
import App from './App';

// Initialize Mtrix
mtrix.init({
  organizationId: 'your-organization-id',
  projectId: 'your-project-id',
  environment: 'production'
});

ReactDOM.render(<App />, document.getElementById('root'));

Next.js

// pages/_app.js
import { useEffect } from 'react';
import mtrix from 'mtrix';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Initialize Mtrix
    mtrix.init({
      organizationId: 'your-organization-id',
      projectId: 'your-project-id',
      environment: process.env.NODE_ENV
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

3. Track Your First Event

After initialization, you can start tracking events:

// Track a button click
document.getElementById('signup-button').addEventListener('click', () => {
    mtrix.trackEvent('SignupButtonClicked', {
        location: 'hero-section',
        referrer: document.referrer 
    });
});

4. Implement A/B Testing

Fetch and apply experiment configurations:

// Get experiment details for the current page
async function loadExperiments() {
    const userId = getUserId(); // Your function to get user ID
    const pageLocation = window.location.pathname;
    const experiments = await mtrix.getPageDetails({
        location: pageLocation, // pageLocation must met the value on the Mtrix dashboard
        userId: userId
    });
}