Skip to content

Commit

Permalink
Merge pull request #51 from fingerprintjs/docs/add-fallback-endpoints…
Browse files Browse the repository at this point in the history 
…-to-code-snippets

docs: Update README.md with fallback endpoints INTER-88
  • Loading branch information
@JuroUhlar
JuroUhlar committed Jul 15, 2023
2 parents 503bd2d + b56c35a commit 7caaa91
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 36 deletions.
41 changes: 25 additions & 16 deletions packages/fingerprintjs-pro-vue-v2/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

# FingerprintJS Pro Vue 2

FingerprintJS Pro Vue is an easy-to-use Vue 2 plugin for [FingerprintJS Pro](https://fingerprint.com/).
FingerprintJS Pro Vue is an easy way to integrate [Fingerprint Pro](https://fingerprint.com/) into your Vue 2 application.

## Installation

Expand All @@ -50,23 +50,28 @@ npm install @fingerprintjs/fingerprintjs-pro-vue-v2

To identify visitors, you'll need a FingerprintJS Pro account (you
can [sign up for free](https://dashboard.fingerprint.com/signup/)).
You can learn more about API keys in
the [official FingerprintJS Pro documentation](https://dev.fingerprint.com/docs/quick-start-guide).
Get your API key and get started with the [FingerprintJS Pro documentation](https://dev.fingerprint.com/docs/quick-start-guide).

1. Register our plugin in your Vue application:
1. Register the plugin in your Vue application. Set a [region](https://dev.fingerprint.com/docs/regions) 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 the accuracy and effectiveness](https://dev.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) of visitor identification.

```typescript
import Vue from 'vue';
import App from './App.vue';
import { FpjsVueOptions, fpjsPlugin } from '@fingerprintjs/fingerprintjs-pro-vue-v2';
import {
fpjsPlugin,
FpjsVueOptions,
// defaultEndpoint,
// defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v2';

const app = new Vue(App);
const apiKey = '<public-api-key>'

Vue.use(fpjsPlugin, {
loadOptions: {
// Set your API Key
apiKey,
apiKey: '<your-public-api-key>',
// region: 'eu',
// endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
// scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
},
} as FpjsVueOptions);

Expand Down Expand Up @@ -182,12 +187,20 @@ This plugin works with Nuxt out of the box, however, you need to register it on

```typescript
// plugins/fingerprintjs.client.ts
import { fpjsPlugin, FpjsVueOptions } from '@fingerprintjs/fingerprintjs-pro-vue-v2';
import {
fpjsPlugin,
FpjsVueOptions,
// defaultEndpoint,
// defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v2';
import Vue from 'vue';

Vue.use(fpjsPlugin, {
loadOptions: {
apiKey: process.env.API_KEY,
// region: 'eu',
// endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
// scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
},
} as FpjsVueOptions);
```
Expand All @@ -209,23 +222,19 @@ You can also check the [example Nuxt Application](../../examples/nuxt-v2-example

## Documentation

You can find detailed documentation and API reference [here](https://fingerprintjs.github.io/fingerprintjs-pro-vue/vue-2/).
You can find detailed documentation in the [API reference](https://fingerprintjs.github.io/fingerprintjs-pro-vue/vue-2/).

## Caching strategy

When you use FingerprintJS Pro, you pay for each API call. Our [best practices](https://dev.fingerprint.com/docs/caching-visitor-information) recommend using cache to reduce the API call rate. The Library uses the SessionStorage cache strategy by default.
Fingerprint Pro usage is billed per API call. To reduce API calls, it is a good practice to [cache identification results](https://dev.fingerprint.com/docs/caching-visitor-information). The SDK uses SessionStorage to cache results by default.

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

Some fields from the [extendedResult](https://dev.fingerprint.com/docs/js-agent#extendedresult) (e.g `ip` or `lastSeenAt`) might change for the same visitor. If you need to get the current data, it is recommended to pass `ignoreCache=true` inside `getVisitorData` or `getVisitorDataExtended` functions.

## Support and feedback

For support or to provide feedback,
please [raise an issue on our issue tracker](https://github.com/fingerprintjs/fingerprintjs-pro-vue/issues). If you
require private support, please email us at oss-support@fingerprint.com. If you'd like to have a similar Vue library
for the [open-source FingerprintJS](https://github.com/fingerprintjs/fingerprintjs),
consider [raising an issue in our issue tracker](https://github.com/fingerprintjs/fingerprintjs-pro-vue/issues).
To ask questions or provide feedback, use [Issues](https://github.com/fingerprintjs/fingerprintjs-pro-vue/issues). If you need private support, please email us at `oss-support@fingerprint.com`. If you'd like to have a similar Vue wrapper for the [open-source FingerprintJS](https://github.com/fingerprintjs/fingerprintjs), consider creating an issue in the main [FingerprintJS repository](https://github.com/fingerprintjs/fingerprintjs/issues).

## Examples

Expand Down
54 changes: 34 additions & 20 deletions packages/fingerprintjs-pro-vue-v3/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

# FingerprintJS Pro Vue 3

FingerprintJS Pro Vue is an easy-to-use Vue 3 plugin for [FingerprintJS Pro](https://fingerprint.com/).
FingerprintJS Pro Vue is an easy way to integrate [Fingerprint Pro](https://fingerprint.com/) into your Vue 3 application.

## Installation

Expand All @@ -50,15 +50,22 @@ npm install @fingerprintjs/fingerprintjs-pro-vue-v3

To identify visitors, you'll need a FingerprintJS Pro account (you
can [sign up for free](https://dashboard.fingerprint.com/signup/)).
You can learn more about API keys in
the [official FingerprintJS Pro documentation](https://dev.fingerprint.com/docs/quick-start-guide).
Get your API key and get started with the [FingerprintJS Pro documentation](https://dev.fingerprint.com/docs/quick-start-guide).

Register our plugin in your Vue application:
Register our plugin in your Vue application.

* Set a [region](https://dev.fingerprint.com/docs/regions) 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 the accuracy and effectiveness](https://dev.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) of visitor identification.

```typescript
import { createApp } from 'vue';
import App from './App.vue';
import { FpjsVueOptions, fpjsPlugin } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import {
fpjsPlugin,
FpjsVueOptions,
// defaultEndpoint,
// defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';

const app = createApp(App);

Expand All @@ -67,18 +74,20 @@ const apiKey = '<public-api-key>'
app
.use(fpjsPlugin, {
loadOptions: {
// Provide your API key here
apiKey,
apiKey: '<your-public-api-key>',
// region: 'eu',
// endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
// scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
},
} as FpjsVueOptions)
.mount('#app');

```
Refer to the example usages below.
You can use the plugin with Composition API, Options API, or Mixins, with or without Nuxt. See the usage examples below.

## Composition API

This plugin exposes the `useVisitorData` function that you can use like this:
The plugin provides a `useVisitorData` function you can use to identify visitors:

```vue
<script setup>
Expand Down Expand Up @@ -106,7 +115,8 @@ watch(data, (currentData) => {

## Options API

Our plugin injects `$fpjs` object into your components, and you can use it like this:
The plugin injects a `$fpjs` object into your components that you can use to identify visitors:

```vue
<script lang='ts'>
Expand Down Expand Up @@ -208,19 +218,27 @@ export default defineComponent({

## Nuxt

This plugin works with Nuxt out of the box, however, you need to register it on the client side only.
The plugin works with Nuxt out of the box, however, you need to register it on the client side only.

```typescript
// plugins/fingerprintjs.client.ts
import { defineNuxtPlugin, useRuntimeConfig } from '#app';
import { fpjsPlugin, FpjsVueOptions } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import {
fpjsPlugin,
FpjsVueOptions,
// defaultEndpoint,
// defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';

export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig();

nuxtApp.vueApp.use(fpjsPlugin, {
loadOptions: {
apiKey: config.public.API_KEY,
// region: 'eu',
// endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
// scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
},
} as FpjsVueOptions);
});
Expand All @@ -242,27 +260,23 @@ export default defineNuxtConfig({
});
```

You can also check [example Nuxt Application](../../examples/nuxt-v3-example).
See the [example Nuxt Application](../../examples/nuxt-v3-example) for more details.

## Documentation

You can find detailed documentation and API reference [here](https://fingerprintjs.github.io/fingerprintjs-pro-vue/vue-3/).
You can find detailed documentation in the [API reference](https://fingerprintjs.github.io/fingerprintjs-pro-vue/vue-3/).

## Caching strategy

When you use FingerprintJS Pro, you pay for each API call. Our [best practices](https://dev.fingerprint.com/docs/caching-visitor-information) recommend using cache to reduce the API call rate. The Library uses the SessionStorage cache strategy by default.
Fingerprint Pro usage is billed per API call. To reduce API calls, it is a good practice to [cache identification results](https://dev.fingerprint.com/docs/caching-visitor-information). The SDK uses SessionStorage to cache results by default.

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

Some fields from the [extendedResult](https://dev.fingerprint.com/docs/js-agent#extendedresult) (e.g `ip` or `lastSeenAt`) might change for the same visitor. If you need to get the current data, it is recommended to pass `ignoreCache=true` inside `getData`, `getVisitorData` or `getVisitorDataExtended` functions.

## Support and feedback

For support or to provide feedback,
please [raise an issue on our issue tracker](https://github.com/fingerprintjs/fingerprintjs-pro-vue/issues). If you
require private support, please email us at oss-support@fingerprint.com. If you'd like to have a similar Vue library
for the [open-source FingerprintJS](https://github.com/fingerprintjs/fingerprintjs),
consider [raising an issue in our issue tracker](https://github.com/fingerprintjs/fingerprintjs-pro-vue/issues).
To ask questions or provide feedback, use [Issues](https://github.com/fingerprintjs/fingerprintjs-pro-vue/issues). If you need private support, please email us at `oss-support@fingerprint.com`. If you'd like to have a similar Vue wrapper for the [open-source FingerprintJS](https://github.com/fingerprintjs/fingerprintjs), consider creating an issue in the main [FingerprintJS repository](https://github.com/fingerprintjs/fingerprintjs/issues).

## Examples

Expand Down

0 comments on commit 7caaa91

Please sign in to comment.