‍

Introduction

To ensure our pixel can track user interactions with email input fields on your website, we need to identify the correct querySelector for each input field. This process involves using browser developer tools to locate the specific selector that corresponds to the email input field.

‍

Prerequisites

Before you begin, ensure you have the following:

• Access to your website
• Google Chrome browser (recommended for its Developer Tools)
• Basic understanding of HTML and CSS (optional but helpful)

‍

Step-by-Step Guide

‍

Accessing the Web Page

1. Open Google Chrome.
2. Navigate to the web page that contains the email input field you want to track.

‍

Using Browser Developer Tools

1. Right-click on the page and select Inspect or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac) to open the Developer Tools.

‍

Identifying the Email Input Field

1. In the Developer Tools, use the Elements tab to inspect the HTML structure of the page.
2. Locate the email input field. You can do this by hovering over elements in the Elements tab until you see the email input field highlighted on the page.

‍

Options for Finding the querySelector

Using ID (the best approach)

If the email input field has a unique id attribute, you can use it directly as the querySelector.

document.querySelector('#emailInputID')

Using Class

If the email input field has a class attribute, you can use the class as the querySelector. Note that if multiple elements share the same class, you might need to make the selector more specific.

document.querySelector('.emailInputClass')

Using Attribute Selectors

If the email input field has specific attributes, you can use attribute selectors. This is useful for fields identified by type, name, or other attributes.

document.querySelector('input[type="email"]') document.querySelector('input[name="email"]')

Using Hierarchical Selectors

If the email input field is within a specific section or nested within other elements, you can use hierarchical selectors to pinpoint it.

document.querySelector('form#signupForm input[type="email"]') document.querySelector('div.registration-container input.emailInputClass')

Using Selector Copy (not recommended)

Once the email input field is highlighted, right-click on the HTML element and select Copy > Copy selector. This will copy the CSS selector for the email input field to your clipboard.

This approach is not recommended because it is prone to break with any change that’s made to your websites html, but if you are not able to do any of the ones above feel free to use this one, just keep in mind you might have to update your querySelectors a lot more

‍

Testing the querySelector

1. To ensure the copied querySelector is correct, go to the Console tab in the Developer Tools.
2. Type document.querySelectorAll('PASTE_SELECTOR_HERE') and press Enter. Replace PASTE_SELECTOR_HERE with the selector you copied or constructed.
3. If the correct element is selected the NodeList [...] will appear like in the image below. If NodeList(x) appears where x is a number bigger than 1 than it means multiple nodes where found for the same selector, if this happens then you have to be more specific with the querySelector. In the image below you see what you should expect (disregard the body and the array content)

‍

‍

‍

Common Issues and Troubleshooting

• Multiple Matches: If your querySelector matches multiple elements, you may need to refine it by adding more specific attributes (e.g., input[type="email"]#uniqueID).
• Dynamic Content: If the email input field is loaded dynamically (e.g., via JavaScript), ensure the field is present in the DOM when you copy the selector.

‍