# Freshpaint Web SDK Reference ## Tracking Methods ### track The `track` call can be used to manually send data to your destinations. See the docs on [manually tracking events in Freshpaint](https://www.freshpaint.io/docs/manual-event-tracking-in-freshpaint) for more information. ```javascript freshpaint.track("Purchase", {"price": 500}); ``` | Argument | Type | Required | Description | | -------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Event Name** | `String` | Yes | The name of the event you want to send to Freshpaint. | | **Properties** | `Object` | No | A JSON object of properties you want to send along with the event. | | **options** | `Object` | No | This is an advanced feature. Options is a JSON object that can be used to configure what data is sent to what destinations. See the docs on [Passing in Options to the Freshpaint SDK](https://documentation.freshpaint.io/developer/freshpaint-sdk-options). | | **callback** | `Function` | No | A function that will be called after the track call completes. | ### identify The `identify` call can be used to attach user properties to the current user. Destinations will then use that data to create a single profile for that user, even if data for that user comes from multiple places. See the [identify docs](https://www.freshpaint.io/docs/identify-user-identities) for more information. ```javascript // Associate all future events sent from // the library with the distinct_id ada.lovelace@example.com freshpaint.identify("ada.lovelace@example.com", { "email": "ada.lovelace@example.com", "name": "Ada Lovelace" }); ``` The properties argument is optional. If you want to only attach a unique identifier to the user, you can call identify like so: ```javascript freshpaint.identify("ada.lovelace@example.com"); ``` Likewise, the identifier is also optional. If you only want to attach properties to the user without attaching an identifier, you can perform a call like the following: ```javascript freshpaint.identify({ "email": "ada.lovelace@example.com", "name": "Ada Lovelace" }); ``` Note that if `options` and/or `callback` are passed, they must be the third and fourth arguments respectively. Use `undefined`for parameters where you don't need to pass a value. ```javascript // Correct identify calls, passing undefined for optional parameters freshpaint.identify("ada.lovelace@example.com", undefined, options) freshpaint.identify("ada.lovelace@example.com", undefined, undefined, callback) freshpaint.identify(undefined, properties, options, callback) // The following calls are incorrect because options // must be passed as the third parameter freshpaint.identify("ada.lovelace@example.com", options) freshpaint.identify(properties, options) ``` | Argument | Type | Required | Description | | ---------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **distinct\_id** | `String` | No | A string that uniquely identifies a user (such as email address). | | **properties** | `Object` | No | A JSON object of user properties to send to the destinations. | | **options** | `Object` | No | This is an advanced feature. Options is a JSON object that can be used to configure what data is sent to what destinations. See the docs on [Passing in Options to the Freshpaint SDK](https://documentation.freshpaint.io/developer/freshpaint-sdk-options). | | **callback** | `Function` | No | A function that will be called after the identify call completes. | ### group The `group` call can be used to attach group properties to the current user. Destinations will then allow you to analyze different groups of users. ```javascript freshpaint.group("Google", { "plan": "enterprise", "sign-up-date": "04/01/2019" }); ``` Note that if `options` and/or `callback` are passed, they must be the third and fourth arguments respectively. Use `undefined`for parameters where you don't need to pass a value. | Argument | Type | Required | Description | | ---------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **distinct\_id** | `String` | Yes | A string that uniquely identifies the group this user belongs to (such as a company name). | | **properties** | `Object` | No | A JSON object of group properties to send to the destinations. | | **options** | `Object` | No | This is an advanced feature. Options is a JSON object that can be used to configure what data is sent to what destinations. See the docs on [Passing in Options to the Freshpaint SDK](https://documentation.freshpaint.io/developer/freshpaint-sdk-options). | | **callback** | `Function` | No | A function that will be called after the group call completes. | ### alias The `alias` call can be used to specify one user id as an alias for another user id. This is needed to implement the identify for some destinations, specifically Mixpanel and Kissmetrics. * Mixpanel has an Organization setting to control identity merging that you can read more about [here](https://help.mixpanel.com/hc/en-us/articles/360039133851#enable-id-merge). If it is disabled, you will need to call `alias` explicitly. * Kissmetrics requires an explicit call to `alias` only in certain circumstances that you can read about [here](https://support.kissmetrics.io/docs/identities). ```javascript freshpaint.alias("ada.lovelace@example.com"); ``` | Argument | Type | Required | Description | | ------------ | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **new\_id** | `String` | Yes | The new id to alias the old id to. | | **old\_id** | `String` | No | The old id to alias to the new id. Defaults to the id of the current user. | | **options** | `Object` | No | This is an advanced feature. Options is a JSON object that can be used to configure what data is sent to what destinations. See the docs on [Passing in Options to the Freshpaint SDK](https://documentation.freshpaint.io/developer/freshpaint-sdk-options). | | **callback** | `Function` | No | A function that will be called after the alias call completes. | ### page {% hint style="info" %} * page is not generally necessary or useful for you to call directly - the Freshpaint snippet has a page call which ensures pageviews are collected out of the box, even for single page applications. There are only a few destinations where every page call will result in something being delivered, including [amplitude](https://documentation.freshpaint.io/integrations/destinations/apps/amplitude "mention") and [june](https://documentation.freshpaint.io/integrations/destinations/apps/june "mention"), as called out in "Destination Info" in the documentation. {% endhint %} {% hint style="warning" %} The SDK `page` call will only trigger a pageview for client-side destinations. Server-side page views are automatically tracked, please visit the destination specific documentation for more information. {% endhint %} The `page` will trigger a virtual pageview in your downstream destinations. If you have some notion of a page view that does not match the automatic pageview tracking, you should set up a custom event by using [freshpaint.track()](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#track) instead. | Argument | Type | Required | Description | | -------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **category** | `String` | No | The category this page belongs to (such as a marketing page or product page). | | **name** | `string` | No | The name of this specific page. | | **properties** | `Object` | No | A JSON object of properties to send to the destintions. | | **options** | `Object` | No | This is an advanced feature. Options is a JSON object that can be used to configure what data is sent to what destinations. See the docs on [Passing in Options to the Freshpaint SDK](https://documentation.freshpaint.io/developer/freshpaint-sdk-options). | | **callback** | `Function` | No | A function that will be called after the page call completes. | ## Utility Methods ### ready The `ready` call will call the provided callback after the Freshpaint SDK and the SDK for all destinations has finished loading. ```javascript freshpaint.ready(function() { console.log("The Freshpaint SDK has loaded"); }); ``` | Argument | Type | Required | Description | | ------------ | ---------- | -------- | ------------------------------------------------------------------ | | **callback** | `Function` | Yes | The function to call once the Freshpaint SDK has completely loaded | ### reset The `reset` call clears any local Freshpaint data attached to this user. This does not clear any local data for any of your destinations. For example this may be useful if a user logs out and logs in to a different account. ```javascript freshpaint.reset(); ``` ### addEventProperties The `addEventProperties` call can be used to set data layer properties. Once a property is set through `addEventProperties` all events going forward will contain that property. The call ```javascript freshpaint.addEventProperties({"pricing plan": "enterprise"}); ``` will include the property `pricing plan` with the value `enterprise` until either the value is overwritten or you delete the property with `removeEventProperty`. `addEventProperties` should be used to set any properties that can change. {% hint style="warning" %} If you need to add properties to a pageview event using `addEventProperties`, you must use custom pageviews for destinations that support them. Refer to the destination specific documentation for more information. {% endhint %} | Argument | Type | Required | Description | | ---------- | -------- | -------- | ------------------------------------------------------------------------- | | properties | `Object` | Yes | An object of properties and values to attach to all events going forward. | ### addPageviewProperties The `addPageviewProperties` call creates data layer properties that persist until the user leaves the page. The properties created with `addPageviewProperties` are automatically removed once the user leaves the current page. The call: ```javascript freshpaint.addPageviewProperties({"product name": "pair of shoes"}); ``` will send the property `product name` with the value `pair of shoes` as part of all events that occur on the current page. Once the user leaves the current page, the property will no longer be sent. The `addPageviewProperties` call should be used to set any properties that are specific to the page the user is currently on. {% hint style="warning" %} If you need to add properties to a pageview event using `addPageviewProperties`, you must use custom pageviews for destinations that support them. Refer to the destination specific documentation for more information. {% endhint %} | Argument | Type | Required | Description | | ---------- | -------- | -------- | ------------------------------------------------------------------------------------------ | | properties | `Object` | Yes | An object of properties and values to attach to all events that occur on the current page. | ### addInitialEventProperties The `addInitialEventProperties` call works the same way as `addEventProperties` except if a property is already set, `addInitialEventProperties` will not override it. This is useful for when you care about the first value of some property. As an example, the call ```javascript freshpaint.addInitialEventProperties({"initial landing page": "/article"}); ``` will set the value of the property `initial landing page` to `/article`. Even after calling `addInitialEventProperties` with a different of `initial landing page` the value of `initial landing page` will still be `/article`. `addInitialEventProperties` should be used to set properties that you never want to change. {% hint style="warning" %} If you need to add properties to a pageview event using `addInitialEventProperties`, you must use custom pageviews for destinations that support them. Refer to the destination specific documentation for more information. {% endhint %} | Argument | Type | Required | Description | | ---------- | -------- | -------- | ------------------------------------------------------------------------- | | properties | `Object` | Yes | An object of properties and values to attach to all events going forward. | ### removeEventProperty The `removeEventProperty` call can be used to remove data layer properties. Once used, freshpaint will no longer send the given property. As an example, the call: ```javascript freshpaint.removeEventProperty('search term'); ``` will delete the current `search term` property and Freshpaint will stop sending it going forward. | Argument | Type | Required | Description | | -------- | -------- | -------- | ----------------------------------- | | property | `String` | Yes | The name of the property to remove. | ## Using the Integrations Object You can pass in an `integrations` object in for each of the tracking methods (track, identify, etc.) to specify which destinations to send a precision-tracked event. For example, the following sends the `identify` call to only Mixpanel and Braze: {% hint style="info" %} Please note that for `freshpaint.identify` calls, the integrations object is **not** nested within the `$options` object. {% endhint %} ``` freshpaint.identify('user_123', { email: "ada.lovelace@example.com", name: "Ada Lovelace" }, { integrations: { 'All': false, 'Mixpanel': true, 'Braze': true } }); ``` This example sends a `track` call to only Mixpanel and Braze: {% hint style="info" %} Please note that for `freshpaint.track` calls, the integrations object **is** nested within the `$options` object. {% endhint %} ``` freshpaint.track( "some-event-name", { "some_property": 123, "$options": { integrations: { All: false, Mixpanel: true, Iterable: true } } } ); ``` `All: false` tells Freshpaint to not send the message to any destinations unless the destination is explicitly set to `true`. You can also use the integration objects to specify which destinations a message should *not* be sent to. This example will send the `identify` message to all destinations except Mixpanel and Braze: ``` freshpaint.identify('user_123', { email: "ada.lovelace@example.com", name: "Ada Lovelace" }, { integrations: { 'Mixpanel': false, 'Braze': false } }); ``` {% hint style="info" %} If you have multiple configured instances of a given destination type, you can choose a specific one with a suffix, such as: **Facebook Conversions API::0123456789012345.** The [configuration page](https://app.freshpaint.io/destinations/apps) for the instance shows the full value to use. When no suffix is specified, all configured instances of the destination type are selected for inclusion / exclusion. {% endhint %} Note that for messages triggered by `freshpaint.track()`, you can specify which destinations an event should be sent to without code. To do this, find the event in the Freshpaint UI and enable "override hardcoded destinations" in "Event Destinations: Settings", then toggle the destinations of interest. {% hint style="info" %} Enabling "override hardcoded destination" in the UI will take precedence over the configuration specified in the integrations object. {% endhint %} {% hint style="danger" %} Enabling 'override hardcoded destination' in the UI is not compatible with events sent from the [Freshpaint Google Tag Manager Integration](https://documentation.freshpaint.io/integrations/google-tag-manager-integration). {% endhint %} ## Typescript declaration file If you are using the Freshpaint SDK within a typescript application, you can include the following type declaration file {% file src="" %} ## Troubleshooting * If you are having trouble accessing the Freshpaint SDK, please ensure you are calling `freshpaint.identify()` instead of `window.freshpaint.identify()`