How to implement

The script

After creating an account and adding the domain (or subdomain) you want to track, you need to add the script to your saas/website.

Remember the replace {{YOUR_PROJECT_CODE_HERE}} with your project code.

<script
  defer
  src="https://track.usertimeline.com/track.js"
  data-project="{{YOUR_PROJECT_CODE_HERE}}}"
  id="usertimeline"
></script>

How to implement (for developers)

The next steps will be more technical and if you are not familiar with them, you can skip them.

Track Unique Users (like Autenticated users)

You can track authenticated users on your saas/website in 3 ways:

Using the script

You can add one or more of the 3 additional parameters. Remember to replace the parameters with your data.

<script
  defer
  src="https://track.usertimeline.com/track.js"
  data-project="{{YOUR_PROJECT_CODE_HERE}}}"
  id="usertimeline"
  data-auth-externalid="{{YOUR_EXTERNAL_ID_HERE}}"
  data-auth-name="{{YOUR_NAME_HERE}}"
  data-auth-email="{{YOUR_EMAIL_HERE}}"
></script>

Use pure javascript

It is common in Saas applications that users access the login page for authentication, so you can use plain javascript to track the user.

window.usertimeline.track({
  action: 'auth',
  externalId: '{{YOUR_EXTERNAL_ID_HERE}}',
  name: '{{YOUR_NAME_HERE}}',
  email: '{{YOUR_EMAIL_HERE}}'
})

Use React package

The only package available right now is the React package, but we'll have more packages coming soon.

You can install run the following command:

npm install @usertimeline/react
//or
yarn add @usertimeline/react
//or
pnpm add @usertimeline/react

And then import the package:

import { UsertimelineAuth } from '@usertimeline/react'

And then use it:

<UsertimelineAuth
  externalid='{{YOUR_EXTERNAL_ID_HERE}}'
  name='{{YOUR_NAME_HERE}}'
  email='{{YOUR_EMAIL_HERE}}'
/>

Available Trackers

There are 3 trackers available to send manually:

Page view

When you implement the script, the page view is automatically tracked. There is no reason to use it, but you can if you want.

Disable page view in script:

<script
  defer
  src="https://track.usertimeline.com/track.js"
  data-project="{{YOUR_PROJECT_CODE_HERE}}}"
  id="usertimeline"
  data-disable="click"
></script>

Track with javascript:

window.usertimeline.track({
  action: 'page_view'
})

Clicks

Disable click in script:

<script
  defer
  src="https://track.usertimeline.com/track.js"
  data-project="{{YOUR_PROJECT_CODE_HERE}}}"
  id="usertimeline"
  data-disable="page_view"
></script>

Track with javascript:

window.usertimeline.track({
  action: 'click',
  text: '{{YOUR_TEXT_HERE}}'
})

Context

This is a custom tracker, which adds context to a user's action:

window.usertimeline.track({
  action: 'context',
  context: '{{YOUR_CONTEXT_HERE}}'
})

Exemple 1:

window.usertimeline.track({
  action: 'context',
  context: 'User closes modal'
})

Exemple 2:

window.usertimeline.track({
  action: 'context',
  context: 'User hovers over button to see tooltip'
})

Disable all tracks

To disable all trackers, you can use the data-disable attribute:

<script
  defer
  src="https://track.usertimeline.com/track.js"
  data-project="{{YOUR_PROJECT_CODE_HERE}}}"
  id="usertimeline"
  data-disable="page_view,click"
></script>

Start now