No results for ""
EXPAND ALL
  • Home
  • API docs

GIVE DOCS FEEDBACK

Click conversion metrics

Read time: 6 minutes
Last edited: Mar 18, 2024

Overview

This topic explains how to create a click conversion metric in LaunchDarkly.

Some metrics require certain SDKs

Click conversion metrics are only compatible with the following SDKs:

  • Electron
  • JavaScript
  • Node.js (client-side)
  • React Web
  • Vue

If you do not use one of these SDKs and would like to track clicks or page views, use a custom conversion/binary metric instead.

Call track and flush when an end user is redirected

SDKs send events at regular intervals, such as every five seconds. If a browser redirects an end user to another page, any events that occurred between when the SDK last sent events and when the browser redirected will be lost. To avoid this, call track and then flush when you know the browser will redirect an end user to another page, such as on click. To learn more, read Sending custom events and Flushing events.

Click conversion metrics track how often an end user interacts with an element of your product's UI. Click conversion metrics must be used with either the JavaScript or React SDK.

For example, you might want to track how often a customer clicks a "Save" button when it is red versus how often a customer clicks the "Save" button when it is blue. You can create a metric that monitors clicks on the button as designated by a CSS selector located at a specific URL.

You can even monitor clicks on the button across different URLs by telling the metric to track different URLs based on substrings or simple matches. For example, you could track an event on every URL with /checkout-page/ in the URL path.

CSS selectors

CSS selectors designate specific areas of your product UI, like buttons or images, that your end users can interact with. You can create a metric that monitors interaction with one or more CSS selectors.

For example, some CSS selectors include:

  • #example-element-id
  • .example-classname
  • button.example-button
  • .example-button, .example-button-alt

The CSS selector must be present in your application after the end user interacts with it in order for LaunchDarkly to record the metric. For example, if the end user clicks an element that is dynamically removed from your application in response to the click, then LaunchDarkly will not record the metric event.

If the CSS selector will not be present after the end user interacts with it, we recommend using a custom conversion/binary metric instead. To learn more, read Custom conversion/binary metrics.

Metric analysis

When you create a metric you must decide how you want to handle its metric analysis:

  • Unit aggregation method: Select either "Sum individual unit values" or "Average individual unit values," depending on what the metric is measuring. For metrics you plan to use in funnel experiments, you must select "Average individual unit values." To learn more, read Unit aggregation method.

Creating click conversion metrics

To create a click conversion metric:

  1. Navigate to the Metrics list.
  2. Click Create metric. The "Create metric" panel appears.
  3. Enter a human-readable Name for the metric.
  4. (Optional) Enter a Description.
  5. (Optional) Type or choose from available Tags.
  6. (Optional) Choose a Maintainer. By default, the person who creates the metric is set as the Maintainer.
  7. In the "Event information" section select Click:
The "Event information" section with "Click" selected.
The "Event information" section with "Click" selected.
  1. Enter one or more CSS selectors in the Click targets field. If you include multiple CSS selectors, separate them with commas.
  2. Specify the Target type you want to track behavior on. Expand the section below to view the four types of URL matching.
Expand URL matching options
URL matching schemaDescriptionExample
Simple match

This sends an event when the end user accesses a URL, or clicks on an element hosted at a URL, that matches the string you enter in the Target URL field or a formulation of that URL that included appended parameters. If you want events to record for URLs with substrings, specify each URL individually.

If you specify:

  • https://www.example.com

Then LaunchDarkly sends events from views or clicks at:

  • https://www.example.com
  • https://www.example.com#signin

If you specify:

  • https://www.example.com, and
  • https://www.example.com/login

Then LaunchDarkly sends events from views or clicks at:

  • https://www.example.com
  • https://www.example.com/login
Exact match

This sends an event when the end user accesses a URL, or clicks on an element hosted at a URL, that exactly matches what you enter in the Target URL field. Identical base URLs with different substrings do not send events.

If you specify:

  • https://www.example.com

Then LaunchDarkly sends events from views or clicks at:

  • https://www.example.com

Views and clicks at https://www.example.com/login and https://www.example.com#signin do not send events.

Regular expression

This sends an event based on a regex expression you specify. This lets you designate more precise locations to send click and page view events.

If you specify:

  • example.com\/account\/.*\/billing

Then LaunchDarkly sends events from views or clicks at any string between account/ and /billing, such as http://example.com/account/12345/billing.

Substring match

This sends an event when the end user accesses a URL, or clicks on an element hosted at a URL with a specific string of text in it.

If you specify:

  • your-substring

Then LaunchDarkly sends events from views or clicks at:

  • example.com/your-substring
  • example.com/username/your-substring/
  • example.com/your-substring/settings

Because all of these URLs contain your-substring, clicks on the CSS selectors you specify on each page send events.

  1. Enter the Target URL.
  2. (Optional) Click Add target URL to track behavior on more than one URL.
  1. Choose one or more randomization units for the metric to measure events from.
Metrics must use valid randomization units

Using invalid randomization units will result in invalid experiment results. To learn more, read Randomization units. If you're unsure of which randomization unit to use, contact Support for help determining valid context kind selections.

  1. Choose a Unit aggregation method. For metrics you plan to use in funnel experiments, you must select "Average individual unit values."
  2. Click Create metric.

After you create a metric, you can connect it to an experiment or use it to monitor the performance of flag changes. To learn how, read Creating experiments and Release guardian.

You can also use the REST API: Create metric