Skip to main content

Basic usage

Identifiers​

ThumbmarkJS provides two different identifiers, and understanding their difference is important.

The free open source library only provides the thumbmark, which is a hash calculated from technical components of the browser. This is relatively stable and about 90% unique.

When you use the API version by providing an API key to Thumbmark, you are also given a visitorId. You should be using this when you have the API.

Import and set up​

Once you have imported ThumbmarkJS, you need to access the Thumbmark constructor, and optionally pass the options, e.g. api_key if you have one.

const t = new Thumbmark({ api_key: 'xxxxxxxxxxxx' });

Getting your identifiers​

Once you have your instance of Thumbmark class, you can run the get() method to generate your identifiers and all the other data.

const tm_data = t.get();

⚠️ This operation needs to be run in a browser context. For example, if you are developing a Next.js / React app, ensure you run this in the client side and use useEffect.

Return value​

tm_data is an object populated with various keys.

{
    "visitorId": "xxxxxxxxxxxx", // When you use the API, this is the identifier to use.
    "thumbmark": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // This is the digital fingerprint
    "components": { ... }, // These are the components used to calculate thumbmark
    "info": { ... }, // Smart signals and other additional information
    "version": "x.y.z", // The version of ThumbmarkJS used. Keep this up to date.
}