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