The Challenge: Balancing Data Collection and User Experience

Third-party cookies have been a double-edged sword for websites. While they enabled data collection for personalized experiences, they also contributed to the controversial data brokerage industry. As third-party cookies are set to be deprecated in 2024, websites are seeking alternatives to gather first-party data while maintaining a smooth user experience.

The common approach is to add a login form and incentivize users to create accounts. However, this can lead to increased friction and user drop-off. SlashID offers a better solution: Anonymous Users.

With anonymous users, you can collect user information as if users had accounts and defer the account creation process to much later in their lifetime. Imagine an e-commerce website, a happy user shops there 3-4 times over several months. During that time, their anonymous user object can store information about their preferences, addresses, and more.

You can defer the account creation process to any point in the future without sacrificing the ability to learn more about them so that the user can benefit from your product and won’t drop off too early.

How do anonymous users work

Anonymous Users allow websites to collect user information without requiring users to create an account immediately. This feature enables a seamless user experience while still gathering valuable first-party data.

At a high level, anonymous users work as follows:

1. When a visitor starts a session, SlashID creates a user with a long-lived token, emitting an AnonymousPersonCreated event. The user is fully-fledged, allowing the addition of attributes, consent storage, and other SlashID functionalities.

2. When the user first authenticates or registers:

   • For registration, SlashID attaches a handle (and optionally a credential) to the current anonymous user, emits a PersonCreated event, and swaps the anonymous token for the new token.
   • For authentication, SlashID discards the anonymous user and replaces it with the authenticated user.

3. If the user doesn’t create an account within the expiration period, SlashID emits an AnonymousPersonDeleted event and wipes the user.

Implementing Anonymous Users with SlashID’s React SDK

Here’s a quick guide on implementing Anonymous Users using SlashID’s React SDK:

1. Create an anonymous user

Enable Anonymous Users via the <SlashIDProvider> component:

<SlashIDProvider oid="ORGANIZATION_ID" anonymousUsersEnabled>
  <App />
</SlashIDProvider>

As soon as the SDK is loaded an AnonymousUser instance will be available via the useSlash() hook.

import { useSlashID, SlashIDLoaded } from '@slashid/slashid'

function App() {
  const { anonymousUser } = useSlashID()

  return <SlashIDLoaded>{anonymousUser.ID}</SlashIDLoaded>
}

2. Persist Anonymous Users across sessions by enabling token storage

We’ve made it possible to persist an anonymous user between sessions and load that user instead of creating a new one. This is particularly useful for fingerprinting users who never sign-up, or implementing a sign-up conversion strategy that spans across multiple sessions.

See our full guide for all the ways to load existing anonymous users.

We are going to show an example using token storage. If you’ve enabled token storage, anonymous users will be automatically loaded from storage when the SDK is loaded.

Remember to enable token storage via <SlashIDProvider>.

<SlashIDProvider
  oid="ORGANIZATION_ID"
  anonymousUsersEnabled
  tokenStorage="localStorage"
  // or
  tokenStorage="cookie"
>
  ...
</SlashIDProvider>

3. Data collection

Reading & writing data via user attributes works the same as it does for regular users.

const { anonymousUser } = useSlashID()
if (!anonymousUser) return

const bucket = await anonymousUser.getBucket('end_user_read_write')
await bucket.set('example', { foo: 'bar' })

4. Sign-in & sign-up

Sign-in & sign-up works the same as if the user is logged out, and anonymous users were disabled.

You can have the user authenticate using the <Form> component, with no additional anonymous user related config required.

import { Form } from '@slashid/slashid'

function App() {
  return <Form />
}

or programmatically:

import { Form } from '@slashid/slashid'
import { Factor, Handle } from '@slashid/slashid'

function App () {
  const { logIn } = useSlashID()
  const handle: Handle = ...
  const factor: Factor = ...

  return (
    <Button onClick={() => logIn({ handle, factor })}>
      Log in
    </Button>
  )
}

Conclusion

Anonymous Users provide a powerful solution for websites to gather first-party data while maintaining a frictionless user experience. By deferring account creation, websites can learn about their users without sacrificing engagement. If you’re interested in implementing Anonymous Users for your business, SlashID is here to help.

Don’t hesitate to reach out to us or sign up for free here!