Configuring Selector Path Options in Editor Settings for Your Website Elements in Wingify – Wingify

close this to read article

Every element on a webpage is addressed with a unique identifier, using which they are selected and applied with a definite change (remove, edit the text, change the color, etc.) via Wingify. These identifiers are referred to as Selectors or Selector Paths.

There may be some places on your webpage, where a certain style is to be applied alike. You can do that by declaring their style under a group attribute, called Class. A Class encompasses several elements within it and can be applied to various places on a webpage any number of times. This also means that altering the Class would reflect the changes in all the relevant areas.

To apply a distinctive style to a given element, an Element ID (aka ID) is used. An ID is a unique element attribute that cannot be repeated on a page. Therefore, the changes made to an ID are solely confined to that element.

The selector paths of the elements on a web page are created either using their corresponding IDs or classes or using their relative paths. In the former case, the selector paths appear as a combination of those attributes and their corresponding values. The following image features an example, where the selector path of an element is created using the ID attribute.

But, when selector paths are not created with IDs or classes, they are created with their corresponding relative paths. Refer to the following image for an example.

These attributes are either static or dynamically generated from a website build process. In the latter case, the values of the element attributes often change every time the web page is updated.

In Wingify Editor, you can see the selector path of an element by hovering over it (refer to the one pointed out in the image below).

Selector Path in Wingify

In Wingify, when you make changes to your webpages and make them live, Wingify typically looks for the selector paths (created using IDs and classes) to locate the elements you have changed. Whenever the campaign runs, the changes are applied to these elements.

This goes well as long as the IDs and classes are static. But, if they are dynamic, their values keep changing and so are their respective selector paths. Thereby, Wingify will not be able to identify those elements, resulting in the changes not getting applied correctly. To overcome this, Wingify allows you to configure the selector paths in the editor so that the elements can be successfully identified on every page load and the subsequent changes get applied.

Selector Path Options in Wingify Editor

The Selector path options section in Wingify Editor settings presents you with a range of options to configure the selector paths with IDs and classes, along with an option to exclude as many of these attributes (with values) as needed.

Tip: Wish to apply a different setting to each campaign element? Click here.

You can choose one from the following options to configure the selection of the element IDs and classes on your webpage:

Consider both IDs and Classes (recommended): By default, this option is selected. If your website does not use dynamic IDs or classes, we recommend using this option as it gives the flexibility to use both IDs and classes to build an element selector. Here, the elements present on your website are targeted using IDs or classes as they remain unchanged each time the campaign is loaded.

Info: Though both IDs and classes are chosen for creating the selector path, IDs are given the first preference.

Consider only Classes: If your website uses dynamic IDs, choose this option. Here, classes are used to target the elements present on the webpage as they remain static.
Consider only IDs: If your website uses dynamic classes, choose this option. Here, IDs are used to target the elements present on the webpage as they remain static.
Ignore both IDs and Classes: If your website uses dynamic IDs and classes, choose this option. Here, the relative paths are used to target the respective elements present on the webpage.

If your website uses alphanumeric IDs, you can select the Consider alphanumeric values for IDs option if you have chosen to consider IDs for specifying the selector path.

NOTE: If the attribute patterns in your website remain the same in general, you can configure this setting to be applied at the workspace level such that it becomes applicable for all the campaigns that you create in the future. To do so, refer to Configuring Editor Settings at Workspace Level.

Excluding IDs and Classes from Selector Paths

Let’s say you are looking to modify your campaign page, which features elements that have static and dynamic IDs. Here, instead of choosing Ignore both IDs and Classes option you can choose the Consider both IDs and Classes option and exclude those elements with dynamic IDs and classes. This way, the selector paths for these elements will be created using their relative paths; while for others, it will be using IDs or classes.

This facility is available in the Exclude IDs and Classes from selector paths section. With this, you can specify any number of IDs and classes that are to be excluded from being modified.

It also comes with the following pattern conditions that can be used to specify the selector path patterns:

Exactly matches - This is the default condition. You can use it when you want Wingify to exclude the element, whose selector path exactly matches with the one you specify.
Contains - Use this condition when you want to exclude an element/group of elements, whose selector paths contain the string that you specify.
Starts with - Use this condition when you want to exclude an element/group of elements, whose selector paths start with the string that you specify.
Ends with - Use this condition when you want to exclude an element/group of elements, whose selector paths end with the string that you specify.
Regex matches - Use this condition, when you want to exclude a group of elements, whose selector paths contain the regex (used with wildcards and special characters) that you specify.

Simply select an attribute type, choose a pattern condition, enter the selector path string, and click Exclude.

The selector path strings of the IDs and classes that you have specified for exclusion are grouped based on their respective attribute types. Wingify excludes any element that fits any of the specified criteria. To delete a string, simply click on the ‘X’ against them.

Note: Exclusion of the IDs and classes is purely dependent on how you configure them to be considered. The specified attributes are stored and applied based on the selected consideration. Therefore, if you choose the Ignore both IDs and Classes option, the exclusion feature is dynamically disabled, and Wingify considers the relative paths of the elements to build the selector path.

INFO: If you are using dynamic IDs and classes from Styled Components or Shopify, Wingify automatically detects those attributes and ignores them while creating the selector paths.

Things To Consider

Editor settings configured at the campaign level override the ones made at the workspace level only for the current campaign.
Say, you have selected the option Consider both IDs and Classes (recommended) for your campaign and notice that the changes you made to your campaign didn't get applied in real-time as the IDs or classes attribute changed. Now, you edit the editor setting of your campaign and set it to Ignore both IDs and Classes. In such a scenario, you have to delete the code generated in the Wingify Editor's JS section and make the changes to your campaign from scratch again.

Configuring Editor Settings at the Campaign Level

To handle the dynamic IDs and Classes at a campaign level, Wingify lets you configure the settings using the Wingify Editor.

Note: This change would only apply to the current campaign.

Procedure

Login to your Wingify account.
Go to Testing and create a campaign, say A/B.
Enter the relevant information in the fields present on the URL(S) page and click NEXT.
In the Wingify editor, choose the SETTINGS option.
From the available options, choose the one relevant to you.
Once done, click SAVE.

Configuring Editor Settings at the Workspace Level

If you know that your whole website has dynamic IDs and Classes, you can configure the editor settings at the workspace level such that it’s applicable for all the campaigns you create in your workspace. This typically saves a lot of effort as you do not have to configure this setting for every campaign individually.

Note: NOTE: This setting only applies to future campaigns. It does not apply to the campaigns created in the past.