JavaScript agent preloading

You should initialize an agent (by calling FingerprintJS.load(...)) as soon as possible, and request the visitor identifier (by calling fp.get()) only when you need the visitor identifier. A good moment to initialize an agent is the time of the application initialization. The more time passes between the initialization and the identifier request, the more data the JavaScript agent will collect and the higher identification accuracy will be.

An example of a browser application improvement:

// An instance is created when the page starts
  class MyApp {
    constructor() {
+     this.fpPromise = FingerprintJS.load({ token: 'your-browser-token' }) 

      const button = document.querySelector('#button')
      button.addEventListener('click', this.handleClick)
    }
  
    handleClick = async () => {
-     const fp = await FingerprintJS.load({ token: 'your-browser-token' })
+     const fp = await this.fpPromise
      const result = await fp.get()
      alert(`Your id: ${result.visitorId}`)
    }
  }

It not only improves the accuracy but also decreases the time of getting the identifier because the JS agent is loaded before a button click.

You can decrease the time of getting the visitor identifier 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 visitor identifier will be either in progress or complete when you need it. Example:

class MyApp {
    constructor() {
      this.fpPromise = FingerprintJS.load({ token: 'your-browser-token' }) 

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

+   handleAboutToClick = () => {
+     this.fpResultPromise = this.fpPromise.then(fp => fp.get())
+   }
  
    handleClick = async () => {
-     const fp = await this.fpPromise
-     const result = await fp.get()
+     const result = await this.fpResultPromise
      alert(`Your id: ${result.visitorId}`)
    }
  }

Did this page help you?