Configure Metrics in Wingify Editor

This article covers the following:

• Overview
• Configure Metrics in Visual Editor
  • Track Multiple Elements in an Existing Metric
  • Track Clicks on Links
  • Track Form Submission
  • Use AI Suggested Metrics
  • Edit Metrics
  • Track Iframe or Shadow DOM Elements

Overview

Configuring metrics directly in the Visual Editor lets you define and track user visitor interactions without leaving the design interface. This ensures that your experimentation or personalization goals are accurately captured as you modify your website's elements. By configuring metrics directly in the editor, you can track relevant interactions such as button clicks, form submissions, and element visibility events to measure campaign performance.

For example, if you are testing a new Request Demo button, you can use the Visual Editor to create a Click metric for that specific button. Creating metrics from the Visual Editor eliminates the need to manually identify selectors or switch to the campaign settings page, saving time and reducing configuration errors.

Configure Metrics in Visual Editor

You can configure a new primary or secondary metric for your campaign directly in the Visual Editor.

To configure a new metric for a target element in the visual editor, follow these steps:

1. Open the Visual Editor for your campaign and navigate to the element you want to track.

2. Click on the desired element for which you want to configure the metric, for example, Request Demo.

   Note: Metrics configured through element selection in the Visual Editor apply only to the current campaign. These metrics are not added to Data 360 and are unavailable for use in other campaigns.

3. Click Track and select the event type, for example, Click, Hover, Focus, Blur, Element Visible, and Mousedown.

4. In the submenu, click In a New Metric.

   The Create Metric dialog box appears with the selector path of the selected element pre-filled.

5. In the Create Metric dialog box, enter a Metric Name.
6. In the Metric will calculate section, select either Unique visitors or Event totals. For more information, see Working with Metrics.
7. Select the Direction of Better (Increase or Decrease) based on your goal.
8. Click Create. Your Click metric is now configured, and it tracks all the clicks on the Explore for free CTA.

If you have already configured a primary metric during campaign setup and want to track additional elements, you can add them as secondary metrics.

To add secondary metrics:

1. In the Visual Editor, click Metrics from the left sidebar.
2. Click + Add in the Secondary metric and search for the metric you want to include.
3. Select the metric and click Add.

Your additional metrics are added to the campaign.

Track Multiple Elements in an Existing Metric

You can track multiple website elements to an existing metric. This is useful when different UI elements represent the same conversion goal.

To track multiple elements within an existing metric:

1. Select the element you want to track, for example, a secondary CTA button.
2. In the contextual menu, click Track and select the event you want to track, such as Click, Hover, or Focus.
3. From the sub-menu, select in an existing metric.
4. From the Metric dropdown, choose the existing metric in which you want to track the respective event.
5. Click Save.

The new element selector is appended to the original metric. Wingify will now record a conversion whenever a visitor interacts with any of the defined selectors for that metric.

Track Clicks on Links

When you select an anchor tag (<a>) in the Visual Editor, Wingify provides a specialized tracking option to accurately capture link clicks.

To capture clicks on links:

1. Select a link or an anchor tag element on your web page in the Visual Editor.
2. Select Track > Click on Link.
3. In the Create Metric dialog box, provide a Metric Name.
4. Configure the Target URL settings if you want to restrict the tracking to specific link destinations.
5. Click Create.

Clicks on the selected link/anchor tag will be tracked in the configured metric.

Track Form Submission

Wingify can automatically track successful form submissions. This form submission event is triggered by buttons within a <form> tag with the type="submit" attribute.

1. In the Visual Editor, open the Layers panel from the top-left corner to identify the <form> element wrapping your input fields.
2. Right-click the <form> element in the layers list or select the submit button itself.
3. Select Track > Form Submit.
4. In the Create Metric dialog box, name your metric and configure any Target URL settings if required.
5. Click Create.

Use AI Suggested Metrics

The Visual Editor identifies common trackable elements on your page and lists them as suggestions. To view these AI-suggested metrics in the Visual Editor:

1. Click Metrics in the left sidebar, then navigate to the Suggested metrics tab.
2. Browse the list of suggested elements, for example, Request Demo Button Clicks.
3. Click + Add next to the desired suggestion to add it to your campaign instantly.

If you have not configured a Primary metric already, the selected metric is added as the Primary metric.

Edit Metrics

You can edit the metrics that you have created in the Visual Editor to track an element. You can rename the metrics, update the element selector, or adjust calculation methods after you have created a metric in the editor. You can also edit your tracking criteria without disrupting your design workflow. For example, if you initially set up a Click metric for a Request Demo button in the editor but later decide to track only unique visitors rather than total clicks, you can quickly update metric settings within the editor. Note: You can only edit metrics configured in the Visual Editor. Data360 metrics can not be edited.

To edit your metric:

1. Click Metrics from the left sidebar in the Visual editor dashboard.
2. In the Added Metrics tab, locate the metric you want to edit.
3. From the vertical ellipsis menu adjacent to the metric name, click Edit.

The Modify Metric dialog appears. It allows you to update the core functional details of your metric, such as:

• Metric Name: Enter a new name in the Metric Name field to update how the metric appears in your reports.
• Element Tracking: To use a different attribute for tracking, click the Selector Path dropdown menu and choose options like HTML ID, HTML Class, or HTML Tags.
• Metric will calculate: Select Unique visitors or Event totals to change how conversions are counted. For more information, refer to this article.
• Direction of Better: Adjust the Increase or Decrease toggle to redefine the desired campaign outcome.
• Click Save to apply the changes. Your metric is now updated.

You can also change the Primary metric for your campaign if required.

To change the Primary metric:

1. Click Metrics from the left sidebar in the Visual editor dashboard.
2. In the Added Metrics tab, locate the Primary metric you want to change.
3. From the vertical ellipsis adjacent to the Primary metric name, click Choose different metric.
4. Select the new Primary metrics from the available metrics list, or create a new one. Your metric is configured as a Primary metric.

The next section explains how to configure metrics to track iframe or Shadow DOM elements in the Visual Editor.

Track Iframe or Shadow DOM Elements

Attention: To track elements in an iframe, the iframe must be hosted on the same domain as the parent website. Wingify cannot access or modify cross-domain iframes due to browser security restrictions.

Tracking interactions on Shadow DOM or iframe elements follows the standard metric-creation process in the Visual Editor, with Wingify automatically handling the underlying hierarchy.

To track an iframe or Shadow DOM element:

1. Open your campaign in the Visual Editor.
2. Navigate to the section of your page containing the Shadow DOM or iframe element.
3. Select the specific element you want to track, for example, a button inside a shadow root.
4. Click Track and select Track event on element.
5. Select the event type, for example, Click, Element Visible, or Submit.
6. From the submenu, click In a New Metric.

The Create Metric dialog box appears with the selector path of the selected iframe or Shadow DOM element pre-filled.

1. Enter a Metric Name and click Create.
2. In the Metric will calculate section, select Unique visitors or Event totals. For more information, see Working with Metrics.
3. Select the Direction of Better (Increase or Decrease) based on your goal.
4. Click Create.

Your metric to track a particular Shadow DOM or iframe element is configured.

Need more help?

For more information or further assistance, contact Wingify Support.