User journey scripts are made up of steps and within these steps are actions. In order for the actions to interact with your site, they need selectors. Choosing the appropriate selectors is key to a successful user journey. You can choose from a variety of conditions for your selections, Here is a list of those currently available:

• cssSelector
• className
• id
• name
• linktext
• partialLinkText
• tagName
• xpath

Out of these conditions the easiest and most effective to use is the ‘cssSelector’ and ‘xpath’. To find selectors to use you need to open DevTools on your browser, we recommend using chrome. Right-click on your website and click ‘Insect’ which will open a new window. DevTools offers a vast amount of information however we are specifically interested in the ‘Elements’ tab. If you are unfamiliar with this panel there are many resources online covering each type of HTML tag and element.

To make scripting easier we recommend using an additional monitor and using DevTools in a separate window to make selectors easier to see. If you want to be taken to a specific element on your page you can right-click on it and press inspect which will highlight within DevTools. If you already have a selector and want to find it within the elements list, press ‘CMD’ + ‘F’ to open the search box.

We will now look at the two types of selectors we primarily use. We will use the example of clicking a button on the RapidSpike site. Below is a screenshot of the RapidSpike homepage, for this article we will try clicking the ‘Login’ button.

Using cssSelector

When choosing a cssSelector we are looking for a unique ‘id’ or a ‘class’ for the element you are looking to interact with. When inputting a selector into the script editor you have to take note of a few things:

• Include a # before an ID (For example: #loginbutton)
• Include a . before a class (For Example: .checkout.button)

These selectors can be used at the same time as long as you include a space between the different elements you are interacting with. If you want to use two separate parts of a class such as in the first div in this screenshot:

You can type: .faw-background.bgc-white0

It is worth noting that this only works if you enter in consecutive parts of the class and you wouldn’t be able to use a class of .faq-background.p-50 as the script editor won’t recognise this.

Going back to the RapidSpike site, our first step is to right-click the login button and click ‘inspect’ to jump to the element in DevTools.

This has selected an ‘a’ tag which signifies a hyperlink. This is the correct link as it is the URL of our login screen. Just above this in the hierarchy is a ‘li’ (a list item) with an ID and a class we could use. It is more common for an ID to be unique that a class so we will go ahead and test the ID in the search box (Remember to use a # before entering in the ID.

We can see that this is 1 of 2 meaning it isn’t unique. To ensure the script editor picks up the element you want to click it is essential that the selector we are using is unique. To make this unique we will now look up the hierarchy to see if we add another class or ID.

Here we can see an ID of ‘menu-header-menu’.

Going back to the search box we can now input this before the ID we found earlier.

This is showing as 1 of 1 meaning it is unique and good to use in our click of the login button.

There is a simpler way to find a selector however we strongly recommend you do not use this method as it will likely lead to an unstable user journey. To immediately find a selector you can right-click on the element and click ‘Copy’ then ‘Copy Selector. The reason we avoid this is that the selector may not be unique and it can rely on many elements to stay in the same place.

Here is an example of a selector for a featured product image using the ‘Copy Selector’:

maincontent > div.carousel-12-columns > div.container-fluid.container-fluid–custom-.swiper-container.content-asset-body.swiper-container-initialized.swiper-container-horizontal > div.row.row–custom-.swiper-wrapper > div.col.home-swiper-slide.swiper-slide.homepage-wrapper.swiper-slide-next > div > div > a > section > picture > img

And here is the same element using our method of finding a suitable selector:

.shop.design .image

Using xpath

Using xpath takes a little more knowledge than using CSS as you need to understand how the selectors are formed. xpath can be more powerful than using a cssSelector as you are able to search for text, move up and down the element hierarchy and more more. There are many resources online for you to access and we highly recommend doing some research.

We will briefly cover two xpath expressions that you can use:

Contains Function – This expression looks for a specified tag name containing a specific attribute. Unlike cssSelectors you are able to search for other things than just class or ID and just need to include the attribute and value within the selector.

Example Structure: //tagname[contains(@attribute,’Value’)]

Example With Values: //Input[contains(@name,’address’)]

Text Function – This expression allows you to directly select an element containing specific text. If you have a site with dynamic selectors this can be extremely useful.

Example Structure: //tagname[text()=’ActualText’]

Example With Values: //a[text()=’Terms of Use’]

Here is an alternative selector to the cssSelector we used for the login button earlier, within xpath you are even able to select the first selector on the page if it isn’t unique:

This was a very simplistic look at choosing selectors for your user journey covering the basics. It would be useful to do further reading on this topic and try using our script editor for yourself. If you have any questions or need assistance, you can always contact our support either through live chat or via email at support@rapidspike.com.