Retrieve attributes using the inspect tool

This guide will walk you through the process of using your browser's Inspect tool to retrieve HTML attributes from elements on a webpage. You need attributes when you want to setup a Tracker with a mouse click action.

Opening the Inspect Tool

To begin, navigate to the webpage containing the element from which you wish to retrieve attributes. For this example, we'll use the "become a partner" page on our sidetracker.io website.

1. Open the Inspect Tool:
   • On Google Chrome, Mozilla Firefox, or Microsoft Edge: Right-click on the webpage and select Inspect , or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).
   • On Safari: First, enable the Developer menu by going to Safari > Preferences > Advanced and checking the box at the bottom that says "Show Develop menu in menu bar." Then right-click on the webpage, select Inspect Element , or press Cmd+Option+I .
2. Navigate to the Elements Tab: The Inspect tool will open either at the bottom or side of your browser window. Ensure that the Elements tab is selected to view the HTML structure of the page.

Locating the Element

To find the element whose attributes you want to retrieve:

• Use the Selector Tool:

• Click on the small cursor icon in the top left of the Inspect tool panel or press Ctrl+Shift+C (Windows/Linux) or Cmd+Shift+C (Mac). This enables the selector mode.
• Hover over the webpage elements until you find the element that you want to inspect. In our case this is the "Submit" button int the form. It should highlight as you hover.
• Click on the element to select it. The HTML code in the Elements tab will jump to the corresponding HTML tag.

Retrieving the Attribute

Once the desired element is highlighted in the Elements tab you can see the HTML code of this element in the Elements tab.

Here you can now inspect the full button element of your page in HTML. Each key="value" is called an attribute. They all have their own function in the page. On buttons you will almost always find a name and id that are unique and these are very convenient values to use for the mouse click action we could use the id="wpforms-submit-1526" key and value.

Conclusion

Thats it, you now know how to retrieve attributes from elements on a webpage. If you have any questions feel free to contact our support team. We're here to help!