Custom Properties

Custom properties let you attach additional information to events.

They help you understand what happened, where it happened, or which variant was used.

For example, instead of tracking multiple events like:

plan_pro_selected
plan_basic_selected
plan_enterprise_selected

You can track a single event with a property.

Sending custom properties #

Pass a properties object as the second argument to loglesk().

loglesk("plan_selected", {
  props: {
    plan: "pro",
    billing: "yearly"
  }
})

This records the event plan_selected with two properties:

plan = pro
billing = yearly

Use short, consistent property names.

Good examples:

plan
billing
location
format
variant

Instead of:

button_hero_clicked
button_footer_clicked

Use:

loglesk("button_clicked", {
  props: {
    location: "hero"
  }
})

Property values can be:

Example:

loglesk("checkout_started", {
  props: {
    plan: "pro",
    price: 29,
    trial: false
  }
})

Avoid sending large objects or nested data.

You can also attach custom properties directly in your HTML using CSS classes.

This is useful when you want to track events without writing additional JavaScript.

Add a class that contains the property name and value:

<button 
  class="loglesk-event-name=signup_clicked loglesk-event-location=hero">
  Start free trial
</button>

When the button is clicked, the following event will be recorded:

Event

signup_clicked

Properties

location = hero

You can add multiple property classes to the same element.

<button
  class="loglesk-event-name=plan_selected
         loglesk-event-plan=pro
         loglesk-event-billing=yearly">
  Choose Pro
</button>

This sends:

Event

plan_selected

Properties

plan = pro
billing = yearly

The tracking script automatically scans for elements containing:

loglesk-event-name={name}

and reads properties from classes starting with:

loglesk-event-{key}={value}

There are limits to how many events you can send and how they are structured: