Arlink-analytics NPM

arlink-analytics

ARlink Analytics is a React component wrapper that provides easy integration with ARlink analytics for your web application. It automatically tracks page visits and sends analytics data to the AO network.

Installation

You can install arlink-analytics using npm, yarn, or bun:

npm install arlink-analytics
# or
yarn add arlink-analytics
# or
bun add arlink-analytics

Usage

To use arlink-analytics in your React project, follow these steps:

Import the AnalyticsWrapper component in your main App file:

import  AnalyticsWrapper  from 'arlink-analytics/src/AnalyticsWrapper';

Wrap your routes with the AnalyticsWrapper component and pass the processId:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import  AnalyticsWrapper  from 'arlink-analytics/src/AnalyticsWrapper';

function App() {
  return (
    <Router>
      <AnalyticsWrapper processId="your-process-id-here">
        <Routes>
          {/* Your routes here */}
        </Routes>
      </AnalyticsWrapper>
    </Router>
  );
}

Replace "your-process-id-here" with the process ID generated by ARlink or ARlink analytics viewer.

Example

Here's a complete example of how to integrate arlink-analytics into your React application:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import  AnalyticsWrapper  from 'arlink-analytics/src/AnalyticsWrapper';

import { AnalyticsDashboardComponent } from './components/analytics-dashboard';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';
import ContactPage from './components/ContactPage';

function App() {
  return (
    <Router>
      <AnalyticsWrapper processId="KgeRB6uIOmh-zFj2JUIpPvaVcY_CKBvwzpAMPWyi2pI">
        <Routes>
          <Route path="/home" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
          <Route path="/contact" element={<ContactPage />} />
          <Route path="/" element={<AnalyticsDashboardComponent />} />
        </Routes>
      </AnalyticsWrapper>
    </Router>
  );
}

export default App;