npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fingerprintjs/fingerprintjs-pro-svelte

v2.2.1

Published

FingerprintJS Pro integration for Svelte

Downloads

1,442

Readme

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, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-svelte'
  import VisitorData from './VisitorData.svelte'

  const options = {
    loadOptions: {
      apiKey: '<YOUR_API_KEY>',
      endpoint: [
        // "https://metrics.yourwebsite.com", 
        FingerprintJSPro.defaultEndpoint
      ],
      scriptUrlPattern: [
        // "https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js",
        FingerprintJSPro.defaultScriptUrlPattern
      ],
      // region: 'eu',  
    },
  };
</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.

Linking and tagging information

The visitorId provided by Fingerprint Identification is especially useful when combined with information you already know about your users, for example, account IDs, order IDs, etc. To learn more about various applications of the linkedId and tag, see Linking and tagging information.

Associate the visitor ID with your data using the linkedId or tag parameter of the options object passed into the useVisitorData() hook:

<script>
  import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-svelte';
  const { getData, data, isLoading, error } = useVisitorData({
    linkedId: 'user_1234',
    tag: {
      userAction: 'login',
      analyticsId: 'UA-5555-1111-1',
    },
  });
</script>

Caching strategy

Fingerprint Pro usage is billed per API call. To avoid unnecessary API calls, it is a good practice to cache identification results. By default, the SDK uses sessionStorage to cache results.

  • Specify the cacheLocation prop on <FpjsProvider> to instead store results in memory or localStorage. Use none to disable caching completely.
  • Specify the cache prop on <FpjsProvider> to use your custom cache implementation instead. For more details, see Creating a custom cache in the Fingerprint Pro SPA repository (a lower-level Fingerprint library used by this SDK).
  • Pass {ignoreCache: true} to the getData() function to ignore cached results for that specific API call.

[!NOTE] If you use data from extendedResult, pay additional attention to your caching strategy. Some fields, for example, ip or lastSeenAt, might change over time for the same visitor. Use getData({ ignoreCache: true }) to fetch the latest identification results.

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 [email protected].

License

This project is licensed under the MIT license.