Configuring Selector Path Options in Editor Settings for Your Website in VWO

With websites being coded in various ways, there are situations where due to some build process requirements, the element attributes such as IDs or classes cannot follow a standard pattern and are therefore generated dynamically. Having said that, the element attributes will change automatically every time the webpage is refreshed. 

Nowadays, websites have started using dynamic IDs and Classes for all the webpage elements. This reduces the manual effort of defining IDs and classes and helps in designing the websites in a better way.

To check if your website uses dynamically generated attributes for the elements present on your website, you can look for any element, say a CTA button, and check the value of its ID (or class) attribute. If it comes out to be different every time you refresh the webpage, your website uses the mechanism to generate the element attributes dynamically.

Say, if you have a blogging platform that allows users to write and post their blogs. Here, If your platform uses static IDs, you cannot cater to the needs of dynamic user requests. So if you wish to handle the dynamically created content, your platform must use dynamic IDs or even classes. This would, in turn, be true for many blogging platforms.

In VWO, when you make changes to your campaign and set it up live, VWO 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. In VWO Editor, you can see the selector path of an element by hovering over it (refer to the one pointed out in the image below).

On the websites that use dynamic IDs and Classes, when you make changes using the VWO Editor, VWO uses IDs and Classes to identify the elements and apply changes. At times, these changes may not correctly apply. Therefore, VWO Editor must be configured to set to use selector paths that remain constant throughout.

With the Editor Settings option in VWO, you can choose the best configuration for the selector paths on your website. All you need to do is, from the options present in the Editor Settings section, choose the one that best suits your requirements. 

To configure this setting at the account level such that it applies to all future campaigns, refer to Configuring Editor Settings at Account Level.

By default, the Consider both Id and class option is selected. This is also the one we recommend as it gives us the flexibility to use both Ids and classes to build an element selector. 

1. Consider both id and class (recommended): If your website does not use dynamic IDs and classes, choose this option. Here, the elements present on your website are targeted using IDs or classes as they remain unchanged, each time the campaign is loaded. 
2. Consider only class: If your website uses dynamic IDs, choose this option. Here, classes are used to target the elements present on the webpage as they remain unchanged.
3. Consider only id: If your website uses dynamic classes, choose this option. Here, IDs are used to target the elements present on the webpage as they remain unchanged.
4. Ignore both id and class: If your website uses dynamic IDs and classes, choose this option. Here, attributes other than IDs and classes are used to target the elements present on the webpage.

Things To Consider

• Editor settings configured at the campaign level override the ones made at the account level, only for the current campaign.
  
• Say, you have selected the option Consider both id and class (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 id and class. In such a scenario, you have to delete the code generated in the VWO Editor's JS section and make the changes to your campaign from scratch again.

Configuring Editor Settings at Campaign Level

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

Procedure

1. Login to your VWO account.
2. Go to TESTING and create a campaign, say A/B.
3. Enter the relevant information in the fields present on the URL(S) page and click NEXT.
4. In the VWO editor, choose the SETTINGS option.
5. From the available options, choose the one relevant for you.
6. Once done, click SAVE.

Configuring Editor Settings at Account Level

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

Procedure

1. Login to your VWO account.
2. Go to ACCOUNT SETTINGS > CAMPAIGN SETTINGS.
3. Scroll down to the Editor Settings section and choose the one relevant for you.
4. Once done, click SAVE.