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 not only reduces the manual effort of defining IDs and classes but also 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 simply 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, then your website uses the mechanism to generate the element attributes dynamically else not.

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 content that is dynamically created, 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 (that is created using IDs and classes) to locate the elements that you have changed and 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).

In the websites that used dynamic IDs and Classes, when you create changes using VWO Editor and if VWO uses IDs and Classes to identify the elements and apply changes on it, the changes may not correctly apply. Therefore it is important that VWO Editor is 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 campaign-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, the attributes other than IDs and classes are used to target the elements present on the webpage.
   
   NOTE: VWO not only allows you to configure this setting at a campaign level, but you can also configure them at account level such that it becomes applicable for all the campaigns that you create in the future.
   

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 that got 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.

NOTE: This change would only be applicable to the current campaign. 

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 account level such that it’s applicable for all the campaigns that 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.

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

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.