Profile

This guide describes how to use Ninetailed Profiles in React.
Profile
Ninetailed manages a visitor profile for automatically, which gets updated via page(), track(), identify() events. The profile is used internally to calculate your personalizations and render merge tags in your rich text components.
type Profile = {
  /**
   * An id which can get set by you - e.x. CRM id.
   */
  id?: string;
  /**
   * This is an internal identifier to find the visitor in our system.
   */
  anonymousId: string;
  /**
   * The calculated audiences the visitor is in.
   */
  audiences: string[];
  /**
   * Tratits you have set via identify(id: string, traits: Traits) calls.
   */
  traits: Traits;
  /**
   * The current location of the user.
   */
  location: Location;
};
Traits is a json dataset which can be set by you through identify calls. Whenever you send new traits to our system we deeply merge the traits of the user. Traits are commonly used in merge tags to build inline personalization like  const headline = `Hey ${profile.traits.firstname}👋`.
type Traits = {
  [key: string]: string | number | boolean | Traits;
};
​
// example
const traits: Traits = {
  "firstname": "Max",
  "address": {
    "street": "Allee 33"
  },
  "company": "Big fat Company"
}
Location is the last seen location of the user. You would normally use this to merge it into Richtext.
type Location = {
  coordinates?: {
    latitude: number;
    longitude: number;
  };
  city?: string;
  postalCode?: string;
  region?: string;
  regionCode?: string;
  country?: string;
  continent?: string;
  timezone?: string;
};
Default location merge tags are available on selected accounts. Contact us to enable location merge tags..
useProfile
The useProfile hook makes it really easy for you to access the profile of the visitor. 
import { useProfile } from '@ninetailed/client-sdk-react';
The hook delivers the profile and the loading and error state.
const Greeting = () => {
    const [loading, profile, error] = useProfile();
    
    return <p>Hey {profile.traits.firstname}, nice weather in {profile.location.city}!</p>
}
ProfileProvider
The ProfileProvider manages the internal state about the visitor and transmits this state to your personalized components. All components using useProfile need to be children of the ProfileProvider, that's why we recommend wrapping your app component with it.
import React from 'react';
import { ProfileProvider, AnalyticsProvider } from '@ninetailed/client-sdk-react';
​
const App = () => {
    return (
        <ProfileProvider>
            <AnalyticsProvider apiKey="Your_API_Key">
                <YourAppCode />
            </AnalyticsProvider>
        </ProfileProvider>
    );
}
Getting started
Analytics & Events
Last updated 4 months ago