Using the CSS Selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.

One of the biggest advantages of DTM is the ability to event off behaviors or page interactions on your website. However, finding the desired CSS elements to include in your rules is sometimes difficult and time-consuming.

The following sections contain more information:

Example with Unique Element

As an example, we want to create a rule that triggers when users click the "Sign In or Register" link on our website, as shown in the following illustration. This example is simple because the "Sign In or Register" link does not have any similar elements in the CSS.

The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

To use the CSS Selector:

  1. Access the CSS Selector widget within DTM by clicking the icon while creating a rule.

    In this example, we are creating an event-based rule that uses the Click event type to trigger the rule when users click the "Sign in or Register" link.

  2. Specify the website's URL, then click Load.

    Note: Be as specific to the web page that you want to event off as possible. Be aware that CSS style sheets might change from one page to another, depending on your website and its architecture. It is helpful to experiment to see how often your style sheet changes.

    The website is now loaded in an iFrame with the CSS Selector widget embedded. Mouse over different elements to get a feel for how the tool works.

    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.

  3. Click "Sign In or Register."

    When you click a page element that you want the selector to match, it turns green. The CSS Selector then generates a minimal CSS selector for that element.

    Notice the panel at the bottom that contains information about the selected element and a button to send the information to DTM.

    The number in parenthesis next to Clear indicates the number of items selected. In this example, the "Sign In or Register" link does not have anything similar to it on the specified page, so "1" displays. Click Clear to remove selected items. Click Toggle Position to move the panel to the top or bottom of the iFrame as desired. Click ? to view help information about the CSS Selector.

  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.

  5. Finish configuring the rule as described in Create conditions for event-based rules.

    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click the "Sign In or Register" link.

Example with Similar Elements

Now let's suppose that we want to create a rule that triggers when users click the "Men's" tab at the top or our website. The difference between this example and the simple example discussed above is that the "Men's" tab has many similar elements on the page.

  1. Access the CSS Selector widget within DTM by clicking the icon while creating a rule.

  2. Specify the website's URL, then click Load.

  3. Click the "Men's" tab to select it.

    Notice that many elements on the page are selected and are highlighted in yellow. The number next to Clear in parenthesis is 28 in this example, which means there are 28 elements on the page that use the "a" tag.

    We want to trigger the rule when users click the "Men's" link, so we need to deselect the other similar elements.

    Mouse over any similar, highlighted element (for example "Women's) and you'll notice that a red box displays around the element.

    When you click a page element that you want the selector to match, it turns green. The CSS Selector then generates a minimal CSS selector for that element. In addition, the selector highlights everything that matches that element in yellow. The CSS Selector starts out broad and then lets you narrow your selection.

    Click a highlighted element to reject it (red), or click an unhighlighted element to add it (green). Through this process of selection and rejection, you can come up with the perfect CSS selector for your needs. Pressing Shift while moving the mouse lets you select elements inside of other selected elements.

  4. Click the element with the red box (Women's) to deselect it and all other similar elements.

    Notice that the number in parenthesis next to Clear is now 1.

  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.

  6. Finish configuring the rule as described in Create conditions for event-based rules.

CSS Selector Limitations

The CSS Selector is in Beta and might not work well for some sites due to technical limitations.