Track clicks & views with CSS selectors in WordPress (Burst Guide)

Advanced goal tracking: Using CSS selectors for tracking clicks in WordPress

Burst Statistics’ Goals feature is a powerful way to track your progress and understand user interaction on your WordPress site. While you could previously track clicks and views using simple class or ID selectors, we’ve enhanced this functionality to support a wide range of CSS selectors. This gives you much greater flexibility and precision in defining exactly what you want to track, from specific buttons and links to complex element combinations.

This guide will walk you through how to use custom CSS selectors to track “Clicks on element” and “Views of element” goals, complete with practical examples to get you started.

What are CSS selectors?

CSS selectors are patterns that match against elements in an HTML document. They are the same selectors you might use to style elements with CSS. Burst Statistics utilizes the browser’s document.querySelectorAll functionality, meaning almost any selector that works in CSS will work for your goals.

If you’re new to CSS selectors, don’t worry. We’ll cover the most common and useful types with examples. For a deeper dive, resources like the MDN Web Docs on CSS Selectors are excellent.

Setting up your click or view goal

When you create or edit a goal in Burst Statistics and choose either “Clicks” (Track clicks on element) or “Views” (Track views of element) as the type, you’ll see a field labeled “What element do you want to track?”. This is where you’ll input your custom CSS selector.

Common CSS selectors and how to use them

Here are some common types of CSS selectors you can use:

• Element selector: Targets all instances of an HTML element.
  • Example: button (tracks all <button> elements)
• Class selector: Targets elements with a specific class. Starts with a period (.).
  • Example: .my-custom-button (tracks all elements with class="my-custom-button")
• ID selector: Targets a single element with a specific ID. Starts with a hash (#). IDs must be unique on a page.
  • Example: #main-cta-button (tracks the element with id="main-cta-button")
• Attribute selector: Targets elements based on the presence or value of an attribute.
  • Example: a[href="https://burst-statistics.com"] (tracks links pointing to a specific URL)
• Descendant selector: Targets elements that are descendants of another element. Uses a space.
  • Example: .sidebar .widget-title (tracks elements with class widget-title only if they are inside an element with class sidebar)

Practical examples for tracking goals

Let’s dive into some practical examples for common tracking scenarios. Remember to replace example selectors with ones that match your website’s HTML structure.

Tracking clicks

1. Clicks on all links:

a

2. Clicks on primary call-to-action buttons:
If your main CTA buttons have a common class, for example, .button-primary:

.button-primary

Or, if it’s an ID:

#unique-cta

3. Clicks on download links (e.g., PDF files):
This targets links whose href attribute ends with .pdf.

a[href$=".pdf"]

You can adapt this for other file types like .zip, .docx, etc.

4. Clicks on external links:
Track engagement with outbound resources like affiliate partners or social media. This helps measure the performance of external calls-to-action.

Primary Selector: Targets links starting with http that don’t contain your domain (replace yourdomain.com).

a[href^="http"]:not([href*="yourdomain.com"])

Usefulness: Identify popular external resources, measure affiliate link effectiveness, understand user flow to partner sites, track social media link clicks.

Alternative Selectors for External Links:

• Links opening in a new tab: a[target="_blank"] (Use with caution, as internal links might also use this).
• More accurate new tab tracking: a[target="_blank"]:not([href*="yourdomain.com"])
• Links with rel="external": a[rel~="external"] (Reliable if your site uses this attribute consistently).
• External links in a specific section (e.g., ID #site-resources): #site-resources a[href^="http"]:not([href*="yourdomain.com"])

5. Clicks on links to a specific domain:
Measure how often users click through to a particular partner, sister site, or any specific external domain you link to (e.g., specificdomain.com).

Primary Selector: Targets links starting with “https://specificdomain.com”. Replace with the target domain and ensure the protocol (http:// or https://) matches.

a[href^="https://specificdomain.com"]

Usefulness: Track referrals to partners, monitor clicks to social profiles (e.g., a[href^="https://twitter.com/yourprofile"]), see user movement between related sites, measure engagement with recommended resources.

Broader Match (use with care): To track any link containing “specificdomain.com” (e.g., subdomains, different paths):

a[href*="specificdomain.com"]

Caution: a[href*="..."] can be less precise than a[href^="..."] if the domain string appears in unexpected places on other URLs.

6. Clicks on “mailto” (email) links:

a[href^="mailto:"]

7. Clicks on “tel” (telephone) links:

a[href^="tel:"]

8. Clicks on a specific form’s submit button:
If your form has an ID #contact-form and the submit button is an input type="submit":

#contact-form input[type="submit"]

Or if the button has a specific class like .wpforms-submit:

.wpforms-submit

9. Clicks on elements with a specific data attribute (useful for custom tracking):
If you add data-track-click="header-promo" to an element:

[data-track-click="header-promo"]

Tracking element views

Element view tracking counts when an element becomes visible in the user’s viewport.

1. Views of a specific section, like a pricing table:
If your pricing table has an ID #pricing-section:

#pricing-section

2. Views of important notices or alerts:
If your notices have a class like .site-notice or a WordPress core class like .wp-block-notice:

.site-notice

.wp-block-notice

3. Views of product images within a product grid:
If product images have a class .product-image inside a container with class .product-grid:

.product-grid .product-image

4. Views of embedded videos (the container holding the video):
If your videos are wrapped in a div with class .video-wrapper:

.video-wrapper

5. Views of a “Pro Feature” banner to see how many users see your upsell message:
If the banner has a class .pro-feature-banner:

.pro-feature-banner

Tips for finding and testing selectors

Use browser developer tools: The easiest way to find a selector is to use your browser’s developer tools. Right-click on the element you want to track on your website and choose “Inspect” or “Inspect Element.” This will open a panel showing the HTML structure.

Be specific but not too specific: Your selector should be specific enough to target only the desired elements, but not so overly specific that minor changes to your site’s theme or content break the tracking. For example, div > div > section > article > p > button.my-button is probably too fragile. .my-button or .checkout-area .my-button might be more robust.

Identify unique attributes: Look for unique IDs, specific classes, or other attributes like data-* attributes that can reliably identify the element(s).

Test your selector: Before saving your goal, you can test your selector in the browser’s developer console. Open the console (usually a tab next to “Elements” or “Inspector”) and type document.querySelectorAll('your-selector-here') (replace your-selector-here with your actual selector). Press Enter. This will show you a list of elements that match your selector. If it’s empty or shows the wrong elements, you’ll need to adjust your selector.

Prefer classes or data attributes for reusability: IDs are great for unique elements, but if you might have multiple similar elements you want to track (e.g., several “Add to Cart” buttons), using a common class or a data-* attribute is more flexible.

Troubleshooting

Your goal is not tracking:

• Double-check your selector for typos or syntax errors.
• Test the selector in your browser’s developer console (document.querySelectorAll(‘your-selector’)) on the page where the element should be. Does it return the expected element(s)?
• Ensure the element actually exists on the page(s) where the goal is active.
• For “View” goals, confirm the element becomes visible in the viewport. Elements hidden with display: none; or similar will not be tracked as viewed until they become visible.
• If you’re tracking an element added by JavaScript, ensure your goal tracking script runs after the element has been added to the page. Burst’s tracking is generally robust for this, but complex JavaScript interactions can sometimes cause issues.

By leveraging the power of CSS selectors, you can create highly specific and meaningful goals in Burst Statistics. This allows you to track exactly what matters for your website’s objectives, from key conversion actions to engagement with specific content, all while respecting user privacy. If you have any questions or need further assistance, please refer to our support documentation or contact our support team.