@fingerprintjs/fingerprintjs-pro-svelte

FingerprintJS Pro Svelte

Fingerprint is a device intelligence platform offering 99.5% accurate visitor identification.

FingerprintJS Pro Svelte SDK is an easy way to integrate Fingerprint into your Svelte or Svelte-kit application. See example apps in the examples folder.

Requirements

• Svelte 4.0.0 or higher
• For TypeScript users: use Typescript 4.8 or higher
• For SvelteKit users: SvelteKit 1.0.0 or higher

This package works with Fingerprint Pro, it is not compatible with open-source FingerprintJS. See our documentation to learn more about the difference between Fingerprint Pro and the open-source FingerprintJS.

Installation

Yarn:

yarn add @fingerprintjs/fingerprintjs-pro-svelte

npm:

npm install @fingerprintjs/fingerprintjs-pro-svelte

pnpm:

pnpm add @fingerprintjs/fingerprintjs-pro-svelte

Getting started

In order to identify visitors, you'll need a Fingerprint Pro account (you can sign up for free). To get your API key and get started, see the Quick start guide in our documentation.

1. Wrap your application (or component) in FpjsProvider. You can specify multiple configuration options. Set a region if you have chosen a non-global region during registration. Set endpoint and scriptUrlPattern if you are using one of our proxy integrations to increase accuracy and effectiveness of visitor identification.

// App.svelte
<script>
  import { FpjsProvider, /* defaultEndpoint, defaultScriptUrlPattern */  } from '@fingerprintjs/fingerprintjs-pro-svelte'
  import VisitorData from './VisitorData.svelte'

  const options = {
    loadOptions: {
      apiKey: '<YOUR_API_KEY>',
      // region: 'eu',
      // endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
      // scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
    },
  };
</script>

<FpjsProvider {options}>
  <VisitorData />
</FpjsProvider>

1. Use the useVisitorData function in your svelte components to indentify visitors and get the results.

// VisitorData.svelte
<script>
  import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-svelte';

  // Set to true fo fetch data when component is mounted
  export let immediate = false;

  const { getData, data, isLoading, error } = useVisitorData({ extendedResult: true }, { immediate });

  $: {
    if ($data) {
      // Do something with visitorData here
    }
  }
</script>

<div>
  <button id='get_data' on:click={() => getData()}> Get data</button>
  {#if $isLoading}
    <div id='loading'>Loading...</div>
  {/if}
  {#if $error}
    <div id='error'>Error occurred: {$error.message}</div>
  {/if}
  {#if $data}
    <div>
      <!--visitorData is available here!-->
    </div>
  {/if}
</div>

See the full code in the provided example applications.

Caching strategy

Fingerprint Pro usage is billed per API call. To reduce API calls, it is a good practice to cache identification results. The SDK uses SessionStorage to cache results by default.

:warning: WARNING If you use data from extendedResult, pay additional attention to the caching strategy.

Some fields from the extendedResult (e.g., ip or lastSeenAt) might change over time for the same visitor. If you need to get the latest results, pass {ignoreCache: true} to the getData() function.

Documentation

See the generated SDK API reference here.

This library uses Fingerprint Pro JavaScript agent under the hood. See our documentation for the full JavaScript Agent API reference.

Error handling

The getData function throws errors directly from the JS Agent without changing them. See JS Agent error handling for more details.

Support and feedback

To report problems, ask questions or provide feedback, please use Issues. If you need private support, you can email us at [e-mail].

License

This project is licensed under the MIT license.

Changelog

2.1.0 (2023-10-11)

Features

• update @fingerprintjs/fingerprintjs-pro-spa to 1.2.0, add FingerprintJSPro export (0e383eb)

Build System

• deps: bump postcss from 8.4.30 to 8.4.31 (0abcdaa)