Official Smartlook client for easy frontend integration.
npm install smartlook-clientImports and initializes Smartlook recorder into a page.
1. Installation
```
npm install smartlook-client --save
`
or
`
yarn add smartlook-client
`
2. Import
`
import Smartlook from 'smartlook-client'
`
or
`
const Smartlook = require('smartlook-client')
3. API
``
init(key: string)
init(key: string, params)
Required parameters:
* key:
* Obtained in application at project settings
Optional parameters:
* advancedNetwork:
* description:
* Object with settings that control network data capture. Advanced network recording allows recording the bodies and headers of requests and responses.
* Read more at https://web.developer.smartlook.com/docs/advanced-network-recording
* allowedUrlsallowedHeaders
* allows recording of request/response bodies
* an Array of exact, string patterns or regular expressions
* websockets
* allows recording of non-standard headers
* an Array of exact, case-insensitive patterns
* true
* allows recording of websockets
* boolean value
* cookies:
* supported values:
* _(default)_ - enable storing of metadata in cookies and local storagefalse
* - disable storing of metadata in cookies, using only local storageSmartlook.init('xxxxx', { cookies: false })
* example:
* url
* description
* Use false if you do not want to store recording metadata in cookies
* Note that disabling cookies with block the ability to connect visitors between domain and subdomains.
* Read more at https://help.smartlook.com/en/articles/6064963-cookies-in-smartlook
* interceptors
* description:
* Object with settings that allows control the data that Smartlook captures.
* Read more at https://web.developer.smartlook.com/docs/interceptors
* network
* URL interceptor that can obscure sensitive data from URLs
* error
* Network interceptor that can obscure sensitive data from recorded network calls—bodies, headers, and URLs.
* Network events can be completely omitted by returning false from the interceptor.
* focus
* Error interceptor that can obscure sensitive data from error events
* input
* Focus interceptor that can obscure sensitive data from focus events
* click
* Input interceptor that can obscure sensitive data from input events
* 'eu'
* Click interceptor that can obscure sensitive data from click events
* region:
* supported values:
* 'us'
* Smartlook.init('xxxxx', { region: 'us' })
* example:
* 'https://my-proxy-domain.com/'
* description
* Region where data will be captured and stored
* Do not change unless told by your sales manager
* relayProxyUrl:
* supported values:
* full URL of self-hosted relay proxy
* e.g. Smartlook.init('xxxxx', { relayProxyUrl: 'https://my-proxy-domain.com/' })
* example
* false
* description:
* Read more at https://help.smartlook.com/en/articles/6120645-smartlook-relay-proxy and https://github.com/smartlook/smartlook-relay-proxy
* standalone:
* supported values:
* _(default)_ - 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
``
identify(integer | string userId, object
``
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
``
initialized()
``
playUrl
``
sessionId
``
visitorId
``
recordId
``
key
``
version
4. Example usage in React
Usage in other libraries is similar.
`js
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 (
export default App
``
For more info visit https://web.developer.smartlook.com/reference/getting-started-with-your-api