Profile
This guide describes how to use Ninetailed Profiles in React.
Ninetailed manages a visitor profile 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 that 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": "Wayne Enterprises, Inc."
}
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.
The
useProfile hook makes it really easy for you to access the profile of the visitor. import { useProfile } from '@ninetailed/experience.js-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>
}
Last modified 3mo ago