Developers
API status BlogLog inBack to LiveSession
Getting started
WelcomeAPI Changelog
JavaScript API
IntroductionConfigurationMethodsRecording conditionsRate limitsTutorialsPlatformsReactAngularGatsbyCapacitor
REST API (BETA)
IntroductionReference
Webhooks
Introduction

Platforms

React

  1. Install our SDK into your project

  2. Import LiveSession SDK

import ls from "@livesession/sdk";
  1. We recommend 2 ways to integrate SDK with your app:
  • Init script in file where you're rendering a whole application:
import ls from "@livesession/sdk";
ls.init("YOUR-TRACK-ID");
ls.newPageView();
ReactDOM.render(<App />, document.getElementById("root"));
  • You can also use lifecycle method componentDidMount in your main Layout component. That means you'll be able to enable script on every page.
import ls from "@livesession/sdk";
class Layout extends Component {
   componentDidMount(){
       ls.init("YOUR_TRACK_ID");
       ls.newPageView();
   }
   render() {
       return (
           // your layout
       );
   }
}
export default Layout;

If you have React 16.8 or higher - try with useEffect hook

import ls from "@livesession/sdk";
const Layout = () => {
    useEffect(() => {
        ls.init("YOUR_TRACK_ID");
        ls.newPageView();
    },[])
    return (
        // your layout
    )
}
export default Layout;

Angular

  1. Import SDK into your main app component

  2. Import OnInit from @angular/core

  3. Implement OnInit and call LiveSession init method in ngOnInit function

// app.component.ts
import ls from '@livesession/sdk'
export class AppComponent implemets OnInit {
    ngOnInit(){
        ls.init("YOUR_TRACK_ID");
        ls.newPageView();
    }
}

Gatsby

LiveSession provides a gatsby plugin to integrate script

  1. Install gatsby-plugin-livesession

  2. Go to gatsby-config.js

  3. Configure a plugin like in following example:

plugins: [
  {
    resolve: `@livesession/gatsby-plugin-livesession`,
    options: {
      trackID: YOUR_LIVESESSION_TRACKID, // Required, string
      keystrokes: true || false, // Optional, default to false
      rootHostname: ".example.com", // Optional
    },
  },
];

Read more about an options you can provide here

Plugin adds code to your site only in production mode.

Capacitor

In general LiveSession support that technology, but you must be sure that resources on your app are available publicly on the Internet.

If you use local server for some reasons you'll need to pass baseURL option like the following:

__ls("newPageView", {
  baseURL: "https://your-site.com"
});

For example if you set up your local server with hostname:'frontend', androidScheme:'capacitor-app' and href to css in your app is /static/style.css the following style resource must be available at https://your-site.com/static/style.css assuming you set baseURL to https://you-site.com