Skip to content

Simpler analytics using HTML attributes.

License

Notifications You must be signed in to change notification settings

razorpay/lytics.js

Repository files navigation

@razorpay/lytics

Simpler analytics using HTML attributes.

Build Status NPM License

Lytics enables analytics tracking by adding data-lytics-* attributes to HTML elements, without having to write JavaScript for individual elements.

Inspired by Google Analytics' eventTracker plugin. eventTracker doesn't support tracking anchor tags properly if they redirect the user to a different page. Lytics does.

Why?

There are lots of "clicks" and "submits" on websites that we need to track. Writing code to add event listeners to lots of elements is not really elegant.

Getting Started

Installing

NPM

npm i @razorpay/lytics --save

Unpkg

<script src="https://unpkg.com/@razorpay/[email protected]/dist/lytics.js"
integrity="sha384-J2iIWdsz7ps49cxomgBfB0HsR5Vz0nIHiuGidH82pjNUhcUd/cyhpaUg6WHLIDea"
crossorigin="anonymous"></script>

Initialising

Add data-lytics-* attributes to elements, and initialize Lytics by invoking lytics.init(opts).

Import the package if you are using npm.

import lytics from '@razorpay/lytics';

If the script is included using a <script> tag, lytics will be available as window.lytics.

Initialise lytics:

lytics.init({
  parent: '#myContainer',
  tracker: (props, callback) => {
    trackAnalyticsForWebsite(props)
      .then(() => {
        callback();
      });
  }
})

Documentation

Triggers

Currently, only two types of triggers are supported:

  1. click
  2. submit

data-lytics-*

  • Attributes to track have to be specified as data attributes with the prefix data-lytics-. Example: data-lytics-foo-bar="baz". When this property is sent to the tracker, it is converted into camelCase. The tracker will receive { fooBar: "baz" } as the event properties.
  • The trigger is specified using the attribute data-lytics. For example, for click tracking, we would use data-lytics="click". Due to this, data-lytics-trigger will not be respected and hence will not work.

lytics.init

lytics.init accepts on parameter: an object with the following properties

Property Type Default Description
parent String or HTMLElement document.documentElement Parent element or selector. Delegated events will be listened from this element.
tracker Function (p, cb) => cb(); Function that gets two parameters: props, callback. Make sure to invoke callback in the tracking method that you provide.
ignoreSynthetic Boolean true Whether or not to ignore synthetic events. Synthetic events are events triggered programmatically.
timeout Number 300 Timeout for automatic invocation of callback. If the callback isn't executed within timeout ms by you, it will automatically be executed.

We need the timeout property because in case of links (with lytics attributes) being opened in new tabs, if there's a huge delay before the callback is executed, the browser will prevent the new tab from being opened due to popup blocking. In case you are confident about executing the callback, you can pass 0 as the timeout value, it will disable automatic invocation of callback.

It returns an object, which has the following properties.

Property Type Description
off Function Turns off tracking.

Tracker method

The tracker method that you pass while initializing lytics will receive two arguments upon each event:

  1. props - Contains the event properties.
  2. callback - Callback to invoke once processing is done. When callback is invoked, the default behaviour of the event will be triggered. For example, when a link is clicked, redirection will only happen after callback is invoked.

lytics.getAttributesOfEl(el)

This method takes a DOM Element as an argument and returns an object containing values for Lytics that exist on that element.

Misc

  • Lytics is supposed to be used only on elements whose behaviour isn't being overridden manually by JavaScript. If you're overriding the behaiour of an element and still wish to track the attributes on that element, use lytics.getAttributesOfEl to get the lytics attributes on that element and call the tracking function manually.

Browser Support

Browser Version
Chrome 46 and above
Edge All
Firefox 20 and above
IE 10 and above
Opera 33 and above
Safari 10.1 and above

License

This project is licensed under the MIT License - see the LICENSE file for details.