Event Library

The event library is where you manage all your event definitions. There are several actions you can take to manage each of your events:

• View, Edit, and Label Single Events

• Create Dynamic Properties

• Send Events to new Destinations

• Use the Freshpaint Time Machine Backfills and Replay Backfills to Recover Historical Data

On the next page, we'll go over how to use bulk actions to make changes to several events at once.

Editing Event Labels

There are five parts to an event label:

• The Event Name

• The Library and Event Type

• The URL or CSS Selector

• An Optional Description

• Any Additional Filters

Event Name

This is the name of the event and how it will show up in destinations. We highly recommend using a consistent naming convention and sticking with it. Please see our FAQ on naming events for more:

What Should I Name My Events?

Because events in Freshpaint aren't tied to code, you can update the name of the event without needing to update any code.

Library and Event Type

The Library refers to the source of the event, or where the event originated from. Depending on the chosen Library, you will have different Event Type options to choose from. For instance, Freshpaint supports the following event types for Web Events:

• Click - A click event is for when a user clicks part of your site.

• Pageview - A pageview event is when a user views a page on your site.

• Form Submission - When a user submits a form on your site.

• Change - When a user changes an input field on your site (Freshpaint captures the fact the field was changed, but does not capture the text the user put in the field).

Freshpaint also supports two additional additional kinds of events that have limited configurability in the UI:

• Server - Events that come from the Freshpaint server side source.

• Precision (Also known as custom events) - These are events from the precision tracked source. They're frontend events written with tracking code.

For precision and server events, you cannot change the name of the event or add any filters.

URL Path

This is a component of the event definition that ties the event definition to an action on your site.

For pageview events, the event definition is tied to your site based on the URL path. The URL path is the URL without the domain included.

The URL filter uses the same syntax as the event definition filter. This means you can use the * character to match any number of characters. As an example, you can use the URL pattern /docs/*/page to match the pages /docs/directory1/page and /docs/directory2/page.

Description

This is an optional description to help you remember what the event is and what it's used for.

CSS Selector

CSS selectors also tie the event definition to an action on your site.

For click, form submission, and change events, the event definition is tied to your site based on a CSS selector. Here's the full list of the CSS attributes that Freshpaint captures.

If you are creating new events, you should be using the Freshpaint Visual Tagger. It will generate the CSS selector for you.

Some examples of CSS selectors are listed below, but any CSS selector can be used.

• .class1.class2

  • targets all elements with both class1 and class2 set within its class attribute

• .class1 .class2

  • targets all elements with class2 that is a descendant of an element with class1 within its class attribute

• div, p

  • targets all <div> elements and <p> elements

• div > p

  • targets all <p> elements where the parent is a <div> element

• [class*="example"]

  • targets all elements where the class attribute value contains example

• [id*="example"]

  • targets all elements where the id attribute value contains example

Comma separated values in the CSS selector event filter act as an "OR" operator. This means the event will fire when any of the conditions are met.

For example, in the following example,

div.[data-component="ScrollLinkItem"],[data-element="ListItem"],[data-source-file="ScrollLinkItem.jsx"]

the event will fire every time an element is clicked with any of those attributes. If you wanted the event to fire when matching on multiple attributes of an element, you would instead use a filter like this:

div[data-component="ScrollLinkItem"][data-element="ListItem"][data-source-file="ScrollLinkItem.jsx"]

Additional Filters

Filters let you narrow down the event definition you create. For example, you may limit an event definition to a specific page on your site. Checkout the docs on filters for information on what exactly you can do with them:

Event Definition Filters

Create Dynamic Properties

Through the event library page, you can also create Dynamic Properties. A Dynamic Property is an additional piece of data attached to an event definition whenever the event fires. Checkout the Dynamic Property section of the setting up properties guide for more information on them:

Setting up Properties

Send Events to Destinations

At the bottom of the events library page you'll see the destinations panel.

This is where you can control what destinations an event definition is sent to. To send or stop sending an event definition to a destination, just flip the toggle.

It takes 2 minutes for the Freshpaint CDN to clear. After toggling a new destination, it can take up to 2 minutes before the destination starts showing up on your website.

Time Machine Backfills

When you toggle a destination for an event definition, that will send all events going forward.

If you want to send data from before the event definition was labeled, you can use the Time Machine. Just click the Backfill button next to a destination and that will send every event in Freshpaint that matches the event definition to the destination, regardless of when the event was labeled. Checkout the docs on the Time Machine for more information:

🔁Time Machine

Export Event Library

On the top-right, you'll see an Export Events button:

You can click this button to download a CSV file which will provide you with the following information on all of your existing events:

• ID

• Name

• Description

• Type

• Destinations

• Configuration Criteria (if the event is an Autotrack event)

  • Filters

  • Dynamic Properties

• Created at Timestamp

• Updated at Timestamp

• Tags