# 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 | iOS     | Android |
| --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------ | ------- | ------- |
| [Dynamic Properties](https://documentation.freshpaint.io/readme/setting-up-properties#dynamic-properties)                                     | **YES** | no           | no      | no      |
| [Data Layer Properties](https://documentation.freshpaint.io/readme/setting-up-properties#data-layer-properties)                               | **YES** | **YES**      | no      | no      |
| [Precision Tracked Properties](https://documentation.freshpaint.io/readme/setting-up-properties#attaching-properties-with-precision-tracking) | **YES** | **YES**      | **YES** | **YES** |
| [React Attribute Autotrack](https://documentation.freshpaint.io/readme/setting-up-properties#react-native-attribute-autotrack)                | no      | **YES**      | no      | no      |

{% hint style="info" %}
Property values are limited to 255 characters.
{% endhint %}

## Dynamic Properties

Dynamic Properties enable you to collect additional metadata via Freshpaint's Autotrack beyond what's automatically collected by default. Freshpaint's Dynamic Properties can grab any visible data on the page and attach that data to your events.

Dynamic properties do not require code to setup and are the easiest way to add additional data to events.

Examples of what you can collect with Dynamic Properties:

* Collect Item Price, Item Name, and other data when a product is added to a user's cart
* Collect search terms entered by your users when they execute a search

To add a dynamic property to an event, click **Add Dynamic Property** in the event definition dashboard which can be found by click on an individual event definition within the [event library](https://app.freshpaint.io/events/library):

<figure><img src="https://1666823438-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MA7aDqsXMFbUsWVqonF%2Fuploads%2FOtVW6ch6M8L9U3u33bUH%2FScreen%20Shot%202022-10-28%20at%2011.37.47%20AM.png?alt=media&#x26;token=7489903a-7379-43ff-9bd0-2a853afaae2b" alt=""><figcaption></figcaption></figure>

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.

You may see read-only JavaScript type properties here, created by Freshpaint support.

JavaScript Dynamic Properties allow you to specify a JavaScript function body to set the property value, with the native event available as input. They also support suppressing delivery for configured destinations on this event, via the SUPPRESS\_EVENT value.

JavaScript Dynamic Properties require you [modify your Content Security Policy](https://documentation.freshpaint.io/readme/guides/quickstart/installing-the-freshpaint-sdk-with-a-content-security-policy-csp) to include the `unsafe-eval` expression.&#x20;

Please contact support if you'd like to learn more about this capability.

{% hint style="info" %}
Dynamic Properties are not retroactive at this time
{% endhint %}

## 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`, and`addInitialEventProperties`.

### 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:

{% tabs %}
{% tab title="Web" %}

```javascript
freshpaint.addEventProperties({"ab test variant": "a"});
```

{% endtab %}

{% tab title="React Native" %}

```javascript
Freshpaint.addEventProperties({"ab test variant": "a"});
```

{% endtab %}
{% endtabs %}

The `ab test variant` property will now have the value `a` until `removeEventProperty` is called or `addEventProperties` is called with a new value of `ab test variant`. When you call `addEventProperties` with a new value of `ab test variant`, that value will overwrite the existing value.

See the [API docs on addEventProperties](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#addeventproperties) for more information.

### addPageviewProperties

The `addPageviewProperties` call lets 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:

{% tabs %}
{% tab title="Web" %}

```javascript
freshpaint.addPageviewProperties({"product name": "diamond ring", "price": 100});
```

{% endtab %}

{% tab title="React Native" %}
Not supported.
{% endtab %}
{% endtabs %}

will send the property `product name` with the value `diamond ring` and the property `price` with the value `100` 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.

{% hint style="warning" %}
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.
{% endhint %}

See the [docs on addPageviewProperties](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#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:

{% tabs %}
{% tab title="Web" %}

```javascript
freshpaint.addInitialEventProperties({"initial landing page": "/article"});
```

{% endtab %}

{% tab title="React Native" %}

```javascript
Freshpaint.addInitialEventProperties({"initial landing page": "/article"});
```

{% endtab %}
{% endtabs %}

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](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#addinitialeventproperties) for more information.

### removeEventProperty

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

{% tabs %}
{% tab title="Web" %}

```javascript
freshpaint.removeEventProperty("pricing plan");
```

{% endtab %}

{% tab title="React Native" %}

```javascript
Freshpaint.removeEventProperty("pricing plan");
```

{% endtab %}
{% endtabs %}

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 pass in a map of properties as the second argument:

{% tabs %}
{% tab title="Web" %}

```javascript
freshpaint.track("Purchase", {"price": 500});
```

{% endtab %}

{% tab title="React Native" %}

```javascript
Freshpaint.track("Purchase", {"price": 500});
```

{% endtab %}

{% tab title="iOS Swift" %}

```swift
Freshpaint.shared().track(
    "Purchase", 
    properties: ["price": 500]
)
```

{% endtab %}

{% tab title="iOS Objective-C" %}

```objectivec
[[FPAnalytics sharedAnalytics]
              track:@"Purchase" 
              properties:@{ @"price": @500 }];
```

{% endtab %}

{% tab title="Android" %}

```java
Freshpaint
    .with(getActivity().getApplicationContext())
    .track("Purchase", new Properties().putValue("price", 500));
```

{% endtab %}
{% endtabs %}

See the [API docs on `freshpaint.track()` for more information.](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#track)

## 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:

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

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

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

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

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