react-tracker-manager v1.0.1

Tracker clicks events

Usage with React

Install package

npm i react-tracker-manager

Create a Tracker

import { Tracker } from 'react-tracker-manager'

const tracker = new Tracker({
  selectors: ['tag-book'],
  callback: fetchAPIFunction,
  value: { token: 'this-is-example', other: 'data' },
})

Create a TrackerProvider

import { TrackerProvider } from 'react-tracker-manager'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <TrackerProvider tracker={tracker}>
      <App />
    </TrackerProvider>
  </React.StrictMode>
)

Output data when clicking on the first element li

{
  "client": {
    "idTransaction": "ab784833-0342-4656-844a-3b1f719c566a",
    "value": {
      "token": "this-is-example",
      "other": "data"
    },
    "hostname": "localhost",
    "pathname": "/",
    "protocol": "http:",
    "queryString": {}
  },
  "metadata": {
    "element": "li",
    "createAt": 1658805084688
  },
  "tracking": {
    "values": {
      "tag-book": "book-1"
    },
    "labelsTracked": ["tag-book"]
  }
}

These data are parameters of the callback.

Complete example

import React from 'react'
import ReactDOM from 'react-dom/client'

import { Tracker, TrackerProvider } from 'react-tracker-manager'

const fetchAPIFunction = async data => {
  console.log('Insert data to database --->')
  console.log(data)
}

const tracker = new Tracker({
  selectors: ['tag-book'],
  callback: fetchAPIFunction,
  value: { token: 'this-is-example', other: 'data' },
})

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <TrackerProvider tracker={tracker}>
      <App />
    </TrackerProvider>
  </React.StrictMode>
)

function App() {
  return (
    <ul>
      <li tag-book="book-1">This is a first example</li>
      <li tag-book="book-2">This is a second example</li>
    </ul>
  )
}