Decibel Insight
Knowledgebase

How to identify selectors when creating goals

When creating Goals, you can use the JavaScript On-click Event integration method which allows you to add a Selector to the goal, enabling the goal to fire without script needing to be added to the website.

Identifying Selectors using point-and-click

When selecting the JavaScript On-click Event, if you have the page of your website that you wish to trigger the goal on open in another tab, you can use our simple point-and-click magnifying glass icon which will give you the option to select the element from another tab, such as in the image below.

Clicking the relevant tab's title will take you to that tab, where you can simply click on the relevant element that you wish to trigger the goal for, and this will populate the Selector field in Decibel for the element in question. In the example below, we are looking to trigger a goal when a user clicks on the "Blog" link in the menu. Hovering our mouse over the element shows us that this has an ID of blog-nav, and if we click the element, this will populate the Decibel selector field with #blog-nav.

Identifying Selectors using the browser console

There may be occasions where you wish to use the browser console to identify selectors, which we will take you through below.

In the example, we will take the Goals page of the Knowledgebase to help show you how to identify the selectors. If we want to add the Contact Us button as a goal, we simply right click and select Inspect (see below, it may look a bit different for you and may say Inspect Element, we are using Google Chrome in this example).

From here, this will usually bring up the Console, with Elements selected, and highlighting the element that you have just selected. However, this is not always the case. To find the Selector you want, simply right click the button/link again and click Inspect or Inspect Element, or hover over Elements in the Console where you will see the Element highlighted on the page as you hover over it (see below). The mouse is hovering over the h4 which is highlighting it on the page, however this is not the Selector we are after.

Now in the picture below, we can see that we are hovering over the correct Selector for the button. We can see that this has an ID of ContactFooter (see id="ContactFooter"). You would imagine with this naming that this will more than likely be a unique selector. Please remember that if the ID is used by any other links or buttons, the goal will also trigger when these are clicked. However, in this case, the selector is unique and can be used.

Because this selector is an ID, we can use this and can copy it from the Console. Simply double click anywhere between the two "" after ID. So in this case, anywhere over ContactFooter and copy this. Because it is an ID, we will need to add # to it when adding it as our selector, so we would add the following when creating the goal:

#ContactFooter

If this were a class instead of an ID, we would need to add a . character, so it would be the following:

.ContactFooter

Not all goals are as simple. For example, in the image above, we can see that there is no ID on the Raise a Support Ticket link, and it has the same class as the Contact Us link, being "btn btn-sm btn-primary contact-link". In this instance, we can use Chrome to help us identify the Selector. Just like in the example above, ensure that you are hovered over the correct Selector, right click, hover over Copy and then click Copy Selector (see image below). This will copy the Selector for you which you should be able to paste into Decibel Insight.

In this instance, Chrome gives us the following Selector which we can use for the goal of clicking the Raise a Support Ticket button:

#content-container > div > a:nth-child(1)

We get to this by using the div ID of #content-container, which we can see three rows above the selector that we have highlighted. We then go below that to look for a div inside #content-container, and then look for a:nth-child(1), which refers to the first anchor link inside the div, in this instance, the Raise a Support Ticket link. If we were to create a goal for the Contact us link, the Selector would be the following:

#content-container > div > a:nth-child(2)

This is because it is the second link inside the div, hence the only difference is the number 2.

Please note: When using this method, any development changes made to the site which can affect classes and divs (i.e. website redesigns or changes to templates) can result in these Goals no longer firing due to changes in paths.

If you require any help creating Goals, you can always Raise a Support Ticket.