React-page-clicks NPM

react-page-clicks

capture and monitor all your customer's interactions(clicks, mouseover, mouseout, page events..) on your react website and post it to rest endpoint for analytics and metrics.

Install

npm install --save react-page-clicks

Usage

Basic Example:

import React, { Component } from 'react'

import ReactPageClicks from 'react-page-clicks'

class Example extends Component {
  render () {
    return (
      <ReactPageClicks>
        <App/>
      </ReactPageClicks>
    )
  }
}

Running the Example

//step 1 : Clone the repository
git clone https://github.com/vijay122/react-page-clicks.git
//step 2 : Switch to examples folder
cd example
//steo 3 : install dependencies and start the example project
npm install
npm start

goto port http://localhost:3000/
you can see the example site up and running with the react-page-clicks plugin enabled.
open console in devtools and check the interaction logs for every click and mouse over on the products.

alt <a>https://github.com/vijay122/react-page-clicks/blob/master/example/react-page-clicks-example-setup.gif</a>

this will open the example website in a new tab running on port http://localhost:3000/ as below:

alt <a>https://github.com/vijay122/react-page-clicks/blob/master/example/example-site.gif</a>

here for example, i have logged the webpage interactions to the console. this can be pushed to any rest api exposed by passing the endpoint attribute to the react-page-clicks plugin..

Pushing captured logs:

All page events and its corresponding data in different sub-pages are captured in the page object. When the page is getting removed from the dom, ie, whenever the page is closed by the close button on the browser, or refreshed (ctrl + f5) the logs will be posted to the endpoint url passed as props to the react-page-clicks.

Enjoy!!.

Advanced Example:

import React, { Component } from 'react'

import ReactPageClicks from 'react-page-clicks'

class Example extends Component {
  render () {
    return (
      <ReactPageClicks
               interactionElement={'container'}
               endpoint={'http://analyticsapi.com/save'}
               captureAttributes={['id', 'name', 'class', 'text']}>
               <div className={'container'}>
                 <Website />
               </div>
             </ReactPageClicks>
    )
  }
}

Configuration Props

By passing the below props, you can specify additional features to the react-page-clicks, these props are availed.

Props	Description
interactionElement	The container dom element on the webpage, inside which all the interactions are to be recorded. usually the interactionElement is the root element or the first div element on the webpage. In the example above, interaction element is passed as 'container' because the first child element inside our plugin is div, and its class name is 'container' react-page-clicks accepts only class name as interactionElement, to identify the root element.
endpoint	Most of the time, analytics has to be saved to a temporary database for the data scientists to study the data. This is the rest http endpoint, to which the captured interactions are to be posted to. By passing a valid rest api accepting post, the user interaction logs/clickstream logs can be posted directly to the provided api from react-page-click In the example above, i have used a dummy url, to show the format 'http://analyticsapi.com/save'.
captureAttributes	These are the core data/attributes which has to be captured in an interaction. In your web application, if you are using any custom attributes to contain data, like 'prd-id', 'text-value', then if all these values has to be captured in the interaction, these has to be passed to the react-page-clicks inside captureAttributes Example captureAttributes='prd-id','text-value', will capture if the control has a prd-id attribute and record them to the response.