Optimize JavaScript agent usage

The JavaScript agent is a client-side JavaScript agent that collects browser attributes and sends them to Fingerprint servers for processing and identification. Using the JavaScript agent requires at least two HTTP requests:

start() — the agent-download request that retrieves the latest fingerprinting logic from our CDN and collects the necessary browser attributes. This request is not billed. It must happen before sending the identification request.
get() — the identification request that sends the collected browser attributes to Fingerprint API and receives a visitor_id in return. This request is billed and counts towards your monthly quota. It can happen only after start() (immediately or later).

By optimizing these requests and timing them right, you can make visitor identification both faster and more cost-effective.

Only use the JavaScript agent where you need it

Depending on your use case, the placement of the JavaScript agent can range from all pages of your app to specific pages and events. We recommend calling get() only when the visitor_id will be used by your application. You can also choose to call get() only after the visitor gives consent to using cookies on your website. The table below lists common use cases and recommended integration of the JavaScript agent.

Use Case	JavaScript agent Placement	Identification request (`get()`)	Estimated Volume (per month)
Anonymous Visitor Identification - bulk information collection of anonymous visitors	Landing page, checkout page, etc.	Page load or the start of the session (depending on your implementation)	1:1 number of page loads/sessions
Account Takeover Prevention - prevent account theft using malicious login attempts	Login page	”Login” button click	1:1 number of attempted logins
Securing Login & Reducing Friction - reduce login friction with conditional security checks	Login page	”Login” button click	1:1 number of attempted logins
Account Sharing Prevention - prevent users from sharing accounts	Login page	”Login” button click	1:1 number of attempted logins
Multi-account Prevention - prevent users from creating multiple accounts	Registration page	”Register” button click	1:1 number of attempted sign-ups
Form & Survey Abuse - protect forms from duplicate entries	Form page	“Submit Form” button click	1:1 number of attempted form submissions
Coupon & Promo Abuse - protect profits from duplicate promotion abuse	Checkout page	“Apply coupon” button click	1:1 number “apply coupon” button clicks
Credit Card Fraud - block users who repeatedly use faulty credit cards	Checkout page	“Checkout” button click	1:1 number of checkout attempts
E-commerce Tracking - track orders made by anonymous or guest visitors	Checkout page	“Checkout” button click	1:1 number of checkout attempts
Paywall Circumvention - detect Incognito mode and prevent unlimited views of your paywalled content	Paywalled pages	Page load	1:1 number of paywalled page loads

Pre-connect to Fingerprint URLs

API pre-connect is recommended for improved request timings. To enable it, place the preconnect directive as early as possible in your head tag:

<html>
<head>
  <link rel="preconnect" href="https://fpcdn.io">
  <link rel="preconnect" href="https://api.fpjs.io">
  ... styles, js etc

<html>
<head>
  <link rel="preconnect" href="https://fpnpmcdn.net">
  <link rel="preconnect" href="https://api.fpjs.io">
  ... styles, js etc

Pay attention to the URLs you need to pre-connect to:

If you are using the default (US/Global) region, pre-connect to this URL: https://api.fpjs.io
If you’re using the EU region, pre-connect to this URL instead: https://eu.api.fpjs.io.
If you’re using the Mumbai API, pre-connect to this URL instead: https://ap.api.fpjs.io
If you’re using the Custom subdomain or another Proxy integration on a subdomain, use the subdomain as the pre-connect URL, for example:

HTML

<html>
<head>
  <link rel="preconnect" href="https://metrics.yourwebsite.com">

Preload the JavaScript agent

Generally, we recommend initializing the JavaScript agent (by calling Fingerprint.start(...)) as early as possible, and requesting the visitor identifier (by calling get()) only when you need it. A good moment to start() the JavaScript agent is when your application starts. An example of a browser application improvement:

JavaScript

// An instance is created when the page starts
class MyApp {
  constructor() {
    this.fp = Fingerprint.start({ apiKey: 'PUBLIC_API_KEY' }) 

    const button = document.querySelector('#button')
    button.addEventListener('click', this.handleClick)
  }

  handleClick = async () => {
    const fp = Fingerprint.start({ apiKey: 'PUBLIC_API_KEY' }) 
    const result = await this.fp.get()
    alert(`Your id: ${result.visitor_id}`)
  }
}

This decreases the time of getting the visitor_id because the JavaScript agent is already loaded and the browser signals are collected before the user clicks the button.

Starting the JavaScript agent is freeDon’t worry, the agent start() call is not billed, only the identification get request counts towards your monthly plan.

Pre-request the visitor ID

You can decrease the time to get the visitor ID even more. You can call fp.get() a small time before you need the identifier. For example, when the visitor fills all the form fields or moves the cursor above the submit button. Getting the visitor ID will be in progress or complete when you need it. For example:

JavaScript

class MyApp {
  constructor() {
    this.fp = Fingerprint.start({ apiKey: 'PUBLIC_API_KEY' }) 

    const button = document.querySelector('#button')
    button.addEventListener('mouseover', this.handleAboutToClick, { once: true }) 
    button.addEventListener('click', this.handleClick)
  }

  handleAboutToClick = () => { 
    // In production add memoization to prevent calling "get" multiple times
    this.fpResultPromise = this.fp.get()
  }

  handleClick = async () => {
    const result = await this.fp.get() 
    const result = await this.fpResultPromise 
    alert(`Your id: ${result.visitor_id}`)
  }
}

Cache the visitor ID

Depending on your use case, your implementation might benefit from caching the visitor ID in the browser for anything between 1 to 12 hours and only calling get() when the cache expires. See Caching visitor information for more information on caching best practices.

Understanding Fingerprint

Identify browsers

Identify mobile devices

AI

Rules Engine and Flow (Beta)

Protect your implementation

Integrate with your server

Integrate Smart Signals

Device reputation network

Tips and advanced guides

Platform updates

Resources

Legal

Optimize JavaScript agent usage

Only use the JavaScript agent where you need it

Pre-connect to Fingerprint URLs

Preload the JavaScript agent

Pre-request the visitor ID

Cache the visitor ID

​Only use the JavaScript agent where you need it

​Pre-connect to Fingerprint URLs

​Preload the JavaScript agent

​Pre-request the visitor ID

​Cache the visitor ID

Only use the JavaScript agent where you need it

Pre-connect to Fingerprint URLs

Preload the JavaScript agent

Pre-request the visitor ID

Cache the visitor ID