Imports and initializes Smartlook recorder into a page.
Installation
npm install smartlook-client --save
or
yarn add smartlook-client
Import
import Smartlook from 'smartlook-client'
or
const Smartlook = require('smartlook-client')
API
init(key: string)
init(key: string, params)
Required parameters:
Optional parameters:
advancedNetwork:
allowedUrls
allowedHeaders
websockets
cookies:
true
- enable storing of metadata in cookies and local storagefalse
- disable storing of metadata in cookies, using only local storageSmartlook.init('xxxxx', { cookies: false })
interceptors
url
network
error
focus
input
click
region:
'eu'
'us'
Smartlook.init('xxxxx', { region: 'us' })
relayProxyUrl:
'https://my-proxy-domain.com/'
Smartlook.init('xxxxx', { relayProxyUrl: 'https://my-proxy-domain.com/' })
standalone:
false
- makes Smartlook try to establish a connection with the parent window and join the session. The session will be reused only when the parent window loads Smartlook and records it as the same project. See more in the iframe recordings section. if the communication is not established within 10 seconds, the recording starts as a standalone anyway, but these first 10 seconds may be missing.true
- enable when your application is loaded in an iframe and you do not want Smartlook to try to connect with the parent window. Enabling this might be useful especially when you develop a third-party integration (e.g. payment gateway) that is inserted as an iframe on multiple websites.track(string eventName, object<key:value> props)
identify(integer | string userId, object<key:value> props)
anonymize()
disable()
record(params: { forms?: boolean, ips?: boolean, emails?: boolean, numbers?: boolean })
getData(function callback)
restart()
pause()
resume()
error(string | Error error)
navigation(string locationOrPath)
properties(object<key:value> properties)
initialized()
playUrl
sessionId
visitorId
recordId
key
version
Example usage in React
Usage in other libraries is similar.
import React, { Component } from 'react'
import Smartlook from 'smartlook-client'
class App extends Component {
handleIdentify = () => {
Smartlook.identify(12345, {
name: 'John Doe',
email: 'email@domain.com',
// other custom properties
})
}
handleTrack = () => {
Smartlook.track('transaction', {
value: 150,
currency: 'usd',
product: 'Product Description',
// other custom properties
})
}
handlePause = () => {
Smartlook.pause()
}
render() {
return (
<div>
<button onClick={this.handleIdentify}>Identify visitor</button>
<button onClick={this.handleTrack}>Track event</button>
<button onClick={this.handlePause}>Pause recording</button>
</div>
)
}
componentDidMount() {
Smartlook.init('43bc84d9a8406exxxxxxxxxb5601f5bbf8d2ed')
}
}
export default App
For more info visit https://web.developer.smartlook.com/reference/getting-started-with-your-api