Skip to content
CustomerLabs Docs

Modifying the selector (Deprecated)

When you track an event on a clickable element — button, link, icon — you can target a specific element on the page by modifying its selector. This is useful when multiple elements share the same name or class, and you want to track only one of them (or capture a specific subset).

Modifying a selector step by step

Section titled “Modifying a selector step by step”

  1. Log in to your CustomerLabs account.

  2. Launch the No-Code Event Tracker from the Events Manager screen.

    Launch No-Code Event Tracker button on Events Manager

  3. You’ll be redirected to your website and the No-Code Tracker panel opens.

  4. Click Record Action to start tracking the event.

    Record Action button in the tracker panel

  5. As an example, configure a custom Button click event.

  6. Select Custom from the Action Name drop-down and enter Button click.

    Entering Button click as the custom action name

  7. Select On Click under Action Type.

    On Click option selected

  8. Click Element picker.

    Element picker button in the panel

  9. Select the element on the page — in this example, the SHOP button.

    Picking the SHOP button on a sample page

  10. Click the Edit icon on the selected element to edit it.

    Edit icon on the picked element

  11. Modify the Selector and Inner text as required to target only the specific element.

    Selector and Inner text fields in the edit panel

Selector vs. Inner text

Section titled “Selector vs. Inner text”

Selector — When you have two SHOP buttons under different categories on the same page and you want to track only one of them, pick the element and modify the selector to target only the specific button. Even if two buttons share the same name, they will have different selectors.

Inner text — When you have a SHOP NOW and a SHOP button on the same page with the same selectors and you want to track both for the same event, pick the SHOP button and confirm the Inner text contains value is set to SHOP. This will let you track both the SHOP and SHOP NOW buttons for the event.

  1. After modifying the Selector and Inner text, click Verify to verify the modifications.

    Verify button confirming the selector

    If you provide an invalid Inner Text that isn’t present in the DOM, you’ll get an error message. Otherwise, the verification succeeds.

  2. A sample selector looks like:

    #ImageWithText--template--16373137965291__image-with-text .button
    • If a part starts with # (#ImageWithText), it is an ID selector.
    • If a part starts with . (.button), it is a class selector.

    For the full list of supported CSS selectors, see MDN: CSS Selectors.

  3. Once you’ve verified the element details, click Save.

    Save button on the selector edit panel

  4. Move to the next step by clicking Add Details.

    Add Details button

  5. Add the attributes you want to track. You can track a specific attribute by modifying its selector here — click Element Picker and follow steps 8–14.

    After modifying, click Next | Post Action trigger.

    Element picker option inside the attributes step

  6. Modify the selector to track specific static text by clicking Element Picker. If you have any success scenarios, add them and click Next | Tracking Rule.

    Element picker for success scenario step

  7. Add the pages you want to track with the No-Code Tracker and click Save Action.

    Tracking rule and pages screen

  8. Click Save & Close. The event will be tracked successfully.

    Save and Close button

Next steps

Section titled “Next steps”
  • URL patterns with Regex — restrict where the event fires using regex-like URL patterns.
  • Debug mode — verify that your event fires correctly before sending it to the server.