{"id":14010,"date":"2024-03-20T20:50:52","date_gmt":"2024-03-20T19:50:52","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/how-to-select-the-xpath\/"},"modified":"2024-04-23T15:48:59","modified_gmt":"2024-04-23T13:48:59","slug":"how-to-select-the-xpath","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/how-to-select-the-xpath\/","title":{"rendered":"How to select the XPath"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/932509254?dnt=1&amp;app_id=122963\" width=\"699\" height=\"393\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Often to <a href=\"https:\/\/helpcenter.streamwise.it\/en\/article\/how-to-create-a-new-recommendation\/\" data-type=\"article\" data-id=\"6364\">rank Recommendation<\/a> and <a href=\"https:\/\/helpcenter.streamwise.it\/en\/article\/how-to-set-up-a-behavioural-message\/\" data-type=\"article\" data-id=\"6439\">Behavioural Message<\/a>, 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>What is XPath?<\/b><\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<br>Let&#8217;s take a look at the various methods of taking XPath.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>How to get XPath?<\/b><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Use the browser inspector<\/b><\/h3>\n\n\n\n<p>To be able to obtain the XPath it will be enough to use a common browser such as Google Chrome or Firefox.<br>In this case, we show you step by step how to withdraw XPath via<strong> Google Chrome<\/strong>.<br>Once you&#8217;ve located the area where you want to place your element, right-click and select &#8220;I<b>inspect.&#8221;<\/b><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.37.18.png\" data-lbwps-width=\"2880\" data-lbwps-height=\"1544\" data-lbwps-srcsmall=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.37.18.png\"><img data-original=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.37.18-1024x549.png\" alt=\"\" class=\"wp-image-3324\"\/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">An analysis console will appear where the area you are interested in will be highlighted in blue.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">By right-clicking in the selected blue area, a drop-down menu will open where you can select<\/span><b> &#8220;copy&#8221; <\/b><span style=\"font-weight: 400;\">and then &#8220;<\/span><b>copy XPath<\/b><span style=\"font-weight: 400;\">&#8220;.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.39.52.png\" data-lbwps-width=\"2880\" data-lbwps-height=\"1608\" data-lbwps-srcsmall=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.39.52.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/helpcenter.blendee.com\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.39.52-1024x572.png\" alt=\"\" class=\"wp-image-3325\" srcset=\"https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.39.52-1024x572.png 1024w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.39.52-300x168.png 300w, https:\/\/helpcenter.streamwise.it\/wp-content\/uploads\/2017\/11\/Schermata-2017-11-16-alle-10.39.52-768x429.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><b>Derive the XPath via a unique id.  <\/b><\/h3>\n\n\n\n<p>It is possible to provide the XPath in a very simple way if the element we want to select has a unique id. Let&#8217;s look at the example.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Xpath&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;header&gt;\n      &lt;h1 id=\"page_title\"&gt;Anagrafica Utente&lt;\/h1&gt;\n      &lt;div&gt;\n        &lt;h3&gt;Giovanni Rossi&lt;\/h3&gt;\n      &lt;\/div&gt;\n    &lt;\/header&gt;\n  &lt;\/body&gt;\n&lt;html&gt;<\/code><\/pre>\n\n\n\n<p>In this example, we can select the element <h1> with unique id id=&#8221;page_title&#8221; simply like this<\/h1><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/*&#91;@id='page_title']<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Derive XPath using a unique class.<\/b><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Xpath&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;section class=\"page_body\"&gt;\n      &lt;h4&gt;Indirizzo&lt;\/h4&gt;\n      &lt;div&gt;\n        &lt;ul&gt;\n          &lt;li class=\"page_street\"&gt;Via della Repubblica 3&lt;\/li&gt;\n          &lt;li&gt;52100, Arezzo&lt;\/li&gt;\n          &lt;li class=\"page_country\" id=\"italy\"&gt;Italia&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/div&gt;\n    &lt;\/section&gt;\t\t\n  &lt;\/body&gt;\n&lt;html&gt;<\/code><\/pre>\n\n\n\n<p>In this example, if we want to select the element <li> with the class &#8220;page_street&#8221; we just need to use the following syntax:<\/li><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/*&#91;contains(concat(' ', normalize-space(@class), ' '), '&nbsp;page_street ')]<\/code><\/pre>\n\n\n\n<p>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.<br>In addition, an element can have more than one class, so in this case it is preferable to use the &#8220;contains&#8221; feature instead of entering the exact value.<\/p>\n\n\n\n<p>Once you have successfully selected the XPath of your interest, you can use it in the configuration of Product Recommendation and Behavioral Message.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">To learn more, don&#8217;t miss other articles: <\/span><a href=\"https:\/\/helpcenter.blendee.com\/article\/introduzione-product-recommendation\/\">\n  <span style=\"font-weight: 400;\">Introduction to Product Recommendations<\/span>\n<\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/helpcenter.streamwise.it\/article\/introduzione-behavioral-messages\/\">\n  <span style=\"font-weight: 400;\">Introduction to Behavioural Messages.<\/span>\n<\/a><\/p>\n<div class=\"wrap-post-useful post_useful_14010\">\n<p><div style=\"color: black; margin-bottom: 15px;\"><strong>Was this content useful?<\/strong><\/div><\/p>\n<p class=\"post_useful_success post_useful_success_14010\">Thanks for contributing!<\/p>\n<div class=\"post-useful-buttons post_useful_buttons_14010\">\n<a href=\"javascript:;\" style=\"border:0px;\" title=\"Yes\" class=\"post-useful-vote post-useful-vote-yes\" data-id=\"14010\" data-rate=\"1\">Yes<\/a>\n<a href=\"javascript:;\" style=\"border:0px;\" title=\"No\" class=\"post-useful-vote post-useful-vote-no\" data-id=\"14010\" data-rate=\"0\">No<\/a>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[204,169],"article-tag":[791],"class_list":["post-14010","article","type-article","status-publish","format-standard","hentry","article-category-web-site-behavioral-messages","article-category-web-site-product-recommendations","article-tag-xpath-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/14010"}],"collection":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":3,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/14010\/revisions"}],"predecessor-version":[{"id":14946,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/14010\/revisions\/14946"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=14010"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=14010"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=14010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}