Often to rank Recommendation and Behavioural Message, you need to get the XPath from your site. Before we see how to pick up this route it is necessary to explain what XPath is.

What is XPath?

XPath (XML Path Language) is a language that allows you to traverse the structure, DOM (Document Object Model), of a Web page and then reach, indicating its path, a specific element of our page.

The path of a given page element can be indicated in various ways, so this technology is extremely flexible and powerful in cases where you want to manipulate a web page without, in reality, having to intervene directly on your site.
Let’s take a look at the various methods of taking XPath.

How to get XPath?

Use the browser inspector

To be able to obtain the XPath it will be enough to use a common browser such as Google Chrome or Firefox.
In this case, we show you step by step how to withdraw XPath via Google Chrome.
Once you’ve located the area where you want to place your element, right-click and select “Iinspect.”

An analysis console will appear where the area you are interested in will be highlighted in blue.

By right-clicking in the selected blue area, a drop-down menu will open where you can select “copy” and then “copy XPath“.

Derive the XPath via a unique id.

It is possible to provide the XPath in a very simple way if the element we want to select has a unique id. Let’s look at the example.

<!DOCTYPE html>
<html>
  <head>
    <title>Xpath</title>
  </head>
  <body>
    <header>
      <h1 id="page_title">Anagrafica Utente</h1>
      <div>
        <h3>Giovanni Rossi</h3>
      </div>
    </header>
  </body>
<html>

In this example, we can select the element

with unique id id=”page_title” simply like this

//*[@id='page_title']

Derive XPath using a unique class.

In the same way that we get the XPath by id, we can also select the element by its class. Let us look at the example.

<!DOCTYPE html>
<html>
  <head>
    <title>Xpath</title>
  </head>
  <body>
    <section class="page_body">
      <h4>Indirizzo</h4>
      <div>
        <ul>
          <li class="page_street">Via della Repubblica 3</li>
          <li>52100, Arezzo</li>
          <li class="page_country" id="italy">Italia</li>
        </ul>
      </div>
    </section>		
  </body>
<html>

In this example, if we want to select the element

with the class “page_street” we just need to use the following syntax:

//*[contains(concat(' ', normalize-space(@class), ' '), ' page_street ')]

Unlike the id, which is by definition unique to the entire web page, the class may not be unique, so you should be very careful when using this method.
In addition, an element can have more than one class, so in this case it is preferable to use the “contains” feature instead of entering the exact value.

Once you have successfully selected the XPath of your interest, you can use it in the configuration of Product Recommendation and Behavioral Message.

To learn more, don’t miss other articles: Introduction to Product Recommendations and Introduction to Behavioural Messages.

Was this content useful?

Thanks for contributing!

Yes No