Web frameworks

Learn how to integrate LiveSession with popular web frameworks and services.

Quick Start

First, install the LiveSession Browser SDK:

Install @livesession/browser
1
npm install @livesession/browser

Then initialize LiveSession in your application:

1
import ls from "@livesession/browser"

2


3
ls.init("YOUR_TRACK_ID")

Start recording:

1
ls.newPageView()

Angular

In your src/app/app.component.ts, initialize LiveSession using your project tracking code. You can find it in your project settings.

src/app/app.component.ts
1
import { Component } from '@angular/core';

2
import { RouterOutlet } from '@angular/router';

3


4
import ls from "@livesession/browser";

5


6
@Component({

7
  selector: 'app-root',

8
  imports: [RouterOutlet],

9
  templateUrl: './app.component.html',

10
})

11
export class AppComponent {

12
  ngOnInit() {

13
    ls.init("YOUR_TRACK_ID")

14
    

15
    ls.newPageView()

16
  }

17
}

Sample Angular app, you can View on GitHub

Astro

In your src/components/LiveSession.astro, initialize LiveSession using your project tracking code. You can find it in your project settings.

src/components/LiveSession.astro
1
---

2
const trackID = "YOUR_TRACK_ID";

3
---

4


5
<livesession-astro data-track-id={trackID}></livesession-astro>

6


7
<script>

8
   import ls from "@livesession/browser";

9


10
  class LiveSessionAstro extends HTMLElement {

11
    connectedCallback() {

12
      const trackId = this.dataset.trackId;

13
      if (!trackId) {

14
        console.warn("(livesession-astro): no 'trackId' provided");

15
        return;

16
      }

17


18
      ls.init(trackId);

19
      ls.newPageView();

20
    }

21
  }

22


23
  customElements.define("livesession-astro", LiveSessionAstro);

24
</script>

then add the component to your layout:

1
---

2
import LiveSession from '../components/LiveSession.astro';

3
---

4


5
<!doctype html>

6
<html lang="en">

7
 <head>

8
  <title>Astro Basics</title>

9
 </head>

10
 <body>

11
  <slot />

12
  <LiveSession />

13
 </body>

14
</html>

Sample Astro app, you can View on GitHub

Next.js

In your src/app/livesession.tsx, initialize LiveSession using your project tracking code. You can find it in your project settings.

src/app/livesession.tsx
1
'use client'

2


3
import { useEffect } from 'react'

4


5
import ls from '@livesession/browser'

6


7
export function LiveSession({ children }: { children: React.ReactNode }) {

8
    useEffect(() => {

9
      ls.init("YOUR_TRACK_ID")

10
      ls.newPageView()

11
  }, [])

12


13
  return children

14
}

then the provider to your root layout:

1
import { LiveSession } from './livesession'

2


3
export default function RootLayout({ children }) {

4
  return (

5
    <html>

6
      <body>

7
        <LiveSession>{children}</LiveSession>

8
      </body>

9
    </html>

10
  )

11
}

Sample Next.js app, you can View on GitHub

Nuxt

Create a plugin for LiveSession in plugins/livesession.ts and initialize LiveSession using your project tracking code. You can find it in your project settings.

plugins/livesession.ts
1
import { defineNuxtPlugin, useRuntimeConfig, useRouter, nextTick } from '#imports'

2


3
import ls from '@livesession/browser'

4


5
export default defineNuxtPlugin(() => {

6
    const runtimeConfig = useRuntimeConfig()

7
    const router = useRouter()

8


9
    router.afterEach((to) => {

10
        nextTick(() => {

11
            if (!process.client) {

12
                return

13
            }

14


15
            ls.init("YOUR_TRACK_ID")

16
            ls.newPageView()

17
        })

18
    })

19
})

Sample Nuxt app, you can View on GitHub

React

In your src/main.tsx, initialize LiveSession using your project tracking code. You can find it in your project settings.

src/main.tsx
1
import {StrictMode} from 'react'

2
import {createRoot} from 'react-dom/client'

3


4
import ls from "@livesession/browser";

5


6
import './index.css'

7
import App from './App.jsx'

8


9
try {

10
    ls.init("YOUR_TRACK_ID")

11
    ls.newPageView()

12
} catch(e) {

13
    console.error(e)

14
}

15


16
createRoot(document.getElementById('root')).render(

17
    <StrictMode>

18
        <App/>

19
    </StrictMode>,

20
)

Sample React app, you can View on GitHub

React Router

In your app/components/LiveSession.tsx, initialize LiveSession using your project tracking code. You can find it in your project settings.

app/components/LiveSession.tsx
1
import { useEffect } from "react";

2
import ls from "@livesession/browser";

3


4
export function LiveSession({ children }: { children: React.ReactNode }) {

5
    useEffect(() => {

6
        ls.init("YOUR_TRACK_ID")

7
        ls.newPageView()

8
    }, [])

9


10
    return children

11
}

then add the component to your root layout:

root.tsx
1
import { LiveSession } from './components/LiveSession'

2
export function Layout({ children }: { children: React.ReactNode }) {

3
  return (

4
    <html lang="en">

5
      <body>

6
        {children}

7
        <LiveSession />

8
      </body>

9
    </html>

10
  );

Sample React Router app, you can View on GitHub

Svelte (SvelteKit)

In src/routes/+layout.ts, initialize LiveSession using your project tracking code. You can find it in your project settings.

src/routes/+layout.ts
1
import ls from '@livesession/browser'

2
import { browser } from '$app/environment';

3


4
export const load = async () => {

5
  if (browser) {

6
    ls.init("YOUR_TRACK_ID")

7
    ls.newPageView()

8
  }

9
  return

10
};

Sample Svelte app, you can View on GitHub

Vue

In src/main.ts, initialize LiveSession using your project tracking code. You can find it in your project settings.

src/main.ts
1
import { createApp } from 'vue'

2


3
import ls from "@livesession/browser";

4


5
import './style.css'

6
import App from './App.vue'

7


8
try {

9
   ls.init("YOUR_TRACK_ID")

10
  ls.newPageView()

11
} catch(e) {

12
    console.error(e)

13
}

14


15
createApp(App).mount('#app')

Sample Vue app, you can View on GitHub

Gatsby

  1. Install gatsby-plugin-livesession
  2. Go to gatsby-config.js
  3. Configure a plugin like in following example:
1
plugins: [

2
  {

3
    resolve: `@livesession/gatsby-plugin-livesession`,

4
    options: {

5
      trackID: YOUR_LIVESESSION_TRACKID, // Required, string

6
      keystrokes: true || false, // Optional, default to false

7
      rootHostname: ".example.com", // Optional

8
    },

9
  },

10
];

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:

1
__ls("newPageView", {

2
  baseURL: "https://your-site.com"

3
});

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

Electron

Electron doesn't natively support cookies, so LiveSession JavaScript web tracking code won't work because internally we use client-side cookies. We're currently working on a of the electron-cookies package to support tracking.

In the future we'll switch to another browser storage instead of cookies and Electron should works out of the box.

So, to use LiveSession in Electron apps you should:

  1. Install electron-cookies package
  2. Configure a like in following example:
1
import ElectronCookies from '@livesession/electron-cookies';

2
// enable

3
ElectronCookies.enable({

4
  origin: 'https://example.com'

5
}); // or ElectronCookies.enable() for default

6
// disable

7
ElectronCookies.disable();

The browser cookies needs to know the current URL, but in Electron files are usually served from local filesystem which is not compatibile with cookies. Treat origin as a special key for cookies store within all data is saved.

Read more about a package here.

Sample Projects

Check out our sample projects for complete examples of LiveSession integration with each framework.

Quickstart