Constructor’s Data Attributes Validator Extension (DAVE) is an extension that helps you validate Constructor on-site tracking by scanning for required data-cnstrc-* attributes on key page types (e.g., Search, Browse, PDPs, Autocomplete, and Recommendations).

DAVE also supports console logging and optional product validation, making it easier to debug issues and ensure tracking remains accurate after UI changes.

Install extension

Note: This extension works with any Chromium-based browser (e.g., Chrome, Brave, Microsoft Edge, etc.).

A member of the Constructor team will provide you with a link to the Data Attributes Validator Chrome extension (DAVE). Once you download the extension, you can pin it to your Chrome bookmarks bar for quick access.

1. Select Add to Chrome on the extension page.
2. Confirm the install when prompted.
3. Once installed, select the puzzle piece icon in your browser toolbar to access the extension.
   • Want quick access? Select the pin beside the extension name to pin the extension icon to your browser toolbar.

Configure extension

After you install the extension, you’ll need to configure it. To get started, navigate to your site. Launch DAVE from your browser window, and select the gear icon in the top-right corner of the extension.

1. Confirm index key

DAVE uses index keys to validate surfaced data attributes against your catalog data in Constructor. For example, it checks whether attributes like item and variation IDs are valid.

If the extension detects an index key on the page (via window.cnstrc.indexKey), it will automatically populate it in the settings tab. You can also configure the index key yourself via the settings page.

Note: If the index key is missing or incorrect, some validations may appear incomplete or fail even if the page looks correct.

1. Locate the Index Key field.
   • If an index key is present, confirm it is the correct index key for the site.
   • If the index key is missing, enter the correct index key for the site.
2. Select Save.

2. Highlight all elements

DAVE can visually highlight detected elements on the page it is validating. This makes it easier to match a checklist item to its corresponding element without manually hunting through the page.

To enable, select the Highlight All Elements checkbox. If you are a Mac user, you can easily switch between a highlighted and not highlighted state by hitting CMD + Shift + 0 on your keyboard.

3. Show hidden elements tooltips

When enabled, DAVE displays tooltips and diagnostics for DOM elements that are not currently visible to the shopper (e.g., hidden panels or off-screen UI). Enabling this setting is useful for debugging.

To enable, select the Show Hidden Elements Tooltips checkbox.

4. Dark mode

If desired, you can change DAVE’s UI theme. This does not affect what DAVE validates, only how the extension looks.

To enable, select the Dark Mode checkbox.