Setting up Properties

Sometimes you will want to attach data to events that isn't automatically captured by autotrack. There are several ways you can attach properties to events.

You can use the techniques below to capture properties like the search term when a user performs a search, or the price of an item when a user adds it to their shopping card. Here's a table of which methods are supported by which SDKs:

Web

React Native

Dynamic Properties

YES

no

Data Layer Properties

YES

YES

Precision Tracked Properties

YES

YES

React Attribute Autotrack

no

YES

Dynamic Properties

Dynamic properties do not require code to setup and are the easiest way to add additional data to events. To add a dynamic property to an event you can click Add Dynamic Property in the events schema dashboard:

You specify the name of the property and a CSS selector that points to the element on the page with the information you want to capture. Whenever the event is triggered, Freshpaint will look up the element with the given CSS selector and attach the text of that element as a property to the event.

Data Layer Properties

Data layer properties are properties given to Freshpaint that are then attached to all Freshpaint events. Data layer properties allow you to attach additional, contextual information, to your events.

You can create data layer properties by using the addEventProperties, addPageviewProperties, andaddInitialEventProperties.

addEventProperties

The addEventProperties function call creates a data layer property. That property will now be sent with all events going forward. As an example, you can call addEventProperties as follows:

Web
React Native
Web
freshpaint.addEventProperties({"ab test variant": "a"});
React Native
Freshpaint.addEventProperties({"ab test variant": "a"});

The pricing plan property will now have the value enterprise until removeEventProperty is called or addEventProperties is called with a new value of pricing plan. When you call addEventProperties with a new value of pricing plan, that value will overwrite the existing value.

See the API docs on addEventProperties for more information.

addPageviewProperties

The addPageviewProperties call let's you create data layer properties that are sent until the user leaves the current page. Once the user leaves the current page, any properties created with addPageviewProperties will now longer be sent. As an example, the call:

Web
React Native
Web
freshpaint.addPageviewProperties({"product name": "diamond ring", "price": 100});
React Native

Not supported.

will send the property product name with the value diamond ring and the property price with the value 100 as as part of all events that occur on the current page. Once the user leaves the current page, the product name and price properties will no longer be sent. addPageviewProperties should be used for any properties that are specific to the page the user is currently on.

If you call addPageviewProperties you should call it as part of the Freshpaint snippet. Specifically you should call addPageviewProperties immediately after the freshpaint.init() call and before the call to freshpaint.page(). This ensures any pageview properties you set are attached to the pageview event created by Freshpaint.

See the docs on addPageviewProperties for more information.

addInitialEventProperties

The addInitialEventProperties call works like addEventProperties except it will not override a property if that property already has a value. As an example, if you want to attach the initial page a user landed on as a property, you can do that like so:

Web
React Native
Web
freshpaint.addInitialEventProperties({"initial landing page": "/article"});
React Native
Freshpaint.addInitialEventProperties({"initial landing page": "/article"});

Now if you call addInitialEventProperties again with a different value of initial landing page, the property initial landing page will still be set to /article.

See the API docs on addInitialEventProperties for more information.

removeEventProperty

To remove a data layer property, you can call the removeEventProperty api method. The call

Web
React Native
Web
freshpaint.removeEventProperty("pricing plan");
React Native
Freshpaint.removeEventProperty("pricing plan");

Will stop sending the property pricing plan going forward.

Attaching Properties with Precision Tracking

If you send an event into Freshpaint with a manual track call, you can attach a JSON object of properties to it:

Web
React Native
Web
freshpaint.track("Purchase", {"price": 500});
React Native
Freshpaint.track("Purchase", {"price": 500});

See the API docs on freshpaint.track() for more information.

React Native Attribute Autotrack

For React Native, Freshpaint will automatically capture a whitelist of properties from your React components. For a complete list of properties collected by Freshpaint, see the docs on what information is collected by the React Native SDK. You can also whitelist your own properties. You can use these properties to narrow down event definitions when defining events. For example, Freshpaint captures the title property of React Native buttons, allowing you to define a CSS selector like so:

Button[title="Press Here"]

To whitelist your own properties, attach a freshpaintOptions argument to the component class with the attributes you would like to whitelist or blacklist. For example, if you have a functional component like:

function MyComponent({ arg }) {
...
}

You can capture the arg property by adding the following bit of code:

MyComponent.freshpaintOptions = {
eventProps: {
include: ['arg'],
}
};

If you are using a class component, you instead set the freshpaintOptions property of the class like so:

class MyComponent extends Component {
freshpaintOptions = {
eventProps: {
include: ['arg'],
}
};
}