Working with Element's Selector Paths While Making Changes Using VWO's Visual Editor

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, and whenever the campaign runs, the changes are applied to these elements. 

For example, in a simple A/B testing campaign with an alternate headline on your homepage, VWO saves the headline’s selector path and the changes you made. During campaign run-time, VWO identifies the headline using the selector path and then applies the changes to it.

In VWO Editor, you can see an element’s selector path by hovering over it (refer to the one 

specified in the image).

You can view the default method used by your VWO campaign in the Settings > Selector path options section of the Editor. To learn more about the selector path settings in VWO, refer to Configuring Selector Path Options in Editor Settings for Your Website in VWO. 

The selector path settings configured here are the defaults for all the campaign elements, but what if you wish to make some changes to all the common elements on the page? For example, suppose you wish to make changes to a few similar images present on your webpage. In that case, you can use the Edit Selector Path settings to apply changes to all the images in one go instead of applying changes on each image individually.

To cater to this, VWO has Edit Selector Path settings which enables you to define the selector path settings for individual elements. This typically helps in reducing the need to perform repeated changes on individual elements.

In a nutshell, the Edit Selector Path setting enables you to choose selector path settings for individual elements, view and copy their selector path, and reset all the modifications. This capability allows you to configure your campaign modifications at a granular level with a high degree of control to ensure that changes are applied accurately. 

In VWO, you can access the Edit Selector Path settings by clicking on the View Details option corresponding to a variation.

Using the Selector Path Options in VWO

To view the available selector path options for an element on which some operation has been applied, follow this:

Procedure

1. Go to the VWO Editor.
2. Click on the View Details option corresponding to the variation you want to work with.
   
3. On clicking View Details, a panel to the right appears.
   
   
4. If you wish to view these modifications element-wise, enable the Group by element option. This gives you an intuitive way of looking at the changes made to a particular element.
5. To modify the selector path of an element, click on the arrow button present next to the element, and choose Edit.
6. All the available selector path options for the selected element appears.
   

   NOTE: These options differ from element to element.

   
   
   • Use default method: This is the method set for the campaign from the Editor’s setting.
     
     
   • Use ID/class/custom attributes: Use this when you wish to select any element’s existing data attribute. Here, VWO automatically detects the list of available attributes. This is especially helpful when you would like to apply changes to multiple elements on the page. On clicking SAVE, the change is applied to all the elements that qualify based on the attribute.
     

     INFO: Based on the selected attribute, a message toast stating 
     the number of elements selected by the chosen selector path is 
     displayed. With this, you can ensure that the right number of 
     elements are being treated with the change.
      
     
     
     For example, suppose a change is intended on only one element, 
     and the default method shows more than one element identified. 
     In that case, you might have to use another method to point out 
     the exact element. This way, you can ensure that the change does 
     not apply to elements that you do not wish to modify.
     

   • Enter path manually: If you know the selector path, you can always enter it manually. Use this when there are restrictions on the usage of IDs, Classes, or custom attributes. This can also come in handy when there are website changes after you have created a campaign. If the target element no longer exists on the website, you can check the effect of the change on the campaign's various changes and change the selector to refer to newer elements or remove the changes.
     
     
7. If you wish to copy the selector path settings, select the Copy option.
8. If you wish to remove all the modifications you’ve made to an element, click on the ellipses button corresponding to the element and choose the Remove all modifications option.
   

   INFO: If you wish to remove a particular modification corresponding 
   to an element, click on the ellipses button corresponding to the 
   specific modification and choose Delete.