Skip to main content

Page Tags and Global Rules

The Chrome extension lets you tag elements visually so the kenbun beacon tracks clicks and form submissions without adding code. There are two flavors:

  • Page Tags apply only to the exact URL where you tagged them
  • Global Rules match elements across multiple pages by URL pattern

Both produce events that flow into kenbun in real time once the Web Beacon is installed on the site.

Prerequisites​

The kenbun Web Beacon must be installed on the website you want to tag. The extension creates the rules; the beacon delivers the events. See Web Beacon installation.

Tagging Elements on a Page​

This creates page-specific tags that only apply to the exact URL you're on.

  1. Navigate to the page you want to tag (e.g., https://example.com/pricing)
  2. Open the side panel (click the extension icon)
  3. Select the Page Tags, Global Rules, or DOM Scrapers tab — Start Tagging is not available while the LinkedIn Intelligence tab is active
  4. Click Start Tagging
  5. Hover over elements on the page:
    • Purple solid outline: Clickable elements (buttons, links)
    • Purple dashed outline: Forms
  6. Click an element to select it
  7. A tagging dialog appears with:
    • Event Name: A descriptive name (e.g., Add to Quote)
    • Element preview: Shows what you selected
    • Additional Attributes (optional): Custom key-value pairs for the event payload
  8. Click Save Tag
  9. The element now has a green outline (it's tagged)
  10. Tagged elements appear in the side panel under the page URL

What Gets Tracked​

Click Events (Element Click):

  • Element type (button, link, div)
  • Element text content (first 100 characters)
  • Element ID and CSS classes
  • Link destination (for <a> tags)
  • Your custom event name in the event_name metadata field
  • Any custom attributes you defined when tagging

Form Submissions (Form Submit):

  • Form ID and action URL
  • Form method (GET/POST)
  • Values from all form fields
  • Your custom event name in the event_name metadata field
  • Auto-identification: If any field contains an email address, kenbun automatically identifies the visitor

Global Tagging (Cross-Page Rules)​

Global tags apply to elements that appear on multiple pages — like navigation buttons, footers, or persistent CTAs.

When to Use Global Tags​

  • Header/Navigation: Sign in buttons, navigation links
  • Footer: Contact links, social media buttons
  • Persistent CTAs: Buttons that appear site-wide
  • Sticky Elements: Floating chat widgets, banners

Creating a Global Tag​

  1. Open the side panel
  2. Click the Global Rules tab
  3. Click + New Global Tag
  4. Fill in the form:
FieldDescriptionExample
Event NameYour tracking nameHeader Sign In Click
Pattern TypeHow to match URLsWildcard, Hostname, or Regex
URL PatternThe pattern to match*.example.com/*
CSS SelectorElement to trackbutton.header-signin or use "Pick Element"
  1. Click Save Global Tag

Pattern Matching Examples​

Wildcard Patterns (use * for flexible matching):

*.example.com/*

Matches:

  • https://www.example.com/pricing
  • https://app.example.com/dashboard
https://example.com/*

Matches https://example.com/pricing and https://example.com/about, but not subdomains like app.example.com.

Hostname Patterns (entire domain plus subdomains):

example.com

Matches any URL whose host is example.com or any subdomain of it.

Regex Patterns (advanced):

^https://example\.com/(pricing|plans)$

Matches https://example.com/pricing and https://example.com/plans only.

Rule Priority​

If multiple rules could apply to the same element:

  1. Page-specific rules take precedence (exact URL match)
  2. Global rules apply when no page-specific rule exists
  3. If multiple global rules match, the most recent is used

Custom Attributes​

When tagging an element, you can add custom key-value attribute pairs that get included in the event payload metadata. This lets you attach context to click events without modifying your website's code.

  1. Tag an element as usual
  2. In the tagging dialog, click + Add Attribute under "Additional Attributes"
  3. Enter a Key (e.g., product_category) and a Value (e.g., enterprise)
  4. Add as many attributes as you need (the x button removes any of them)
  5. Click Save Tag

Custom attributes are sent as top-level keys in the event metadata alongside the standard fields. For example, an attribute with key plan_tier and value premium shows up as "plan_tier": "premium" in the event.

Useful Custom Attributes​

  • Product context: product_name: "Enterprise Plan" to distinguish CTAs
  • Campaign tracking: campaign: "spring_promo" on landing pages
  • A/B test variants: variant: "B" to identify which design was clicked
  • Page section: section: "hero" vs section: "footer" for the same CTA in different parts of a page

Event Naming Conventions​

Use consistent, descriptive names in Title Case:

  • Title Case: Pricing CTA Click, Contact Form Submit
  • Be specific: Header Sign In Click is better than Click 1
  • Include context: Pricing Free Trial Click tells you where and what

Managing Tags​

Tags are organized in the side panel:

  • Page Tags tab: Page-specific tags grouped by URL
  • Global Rules tab: Cross-page tags grouped by pattern

On the page itself:

  • Green outline: Element is tagged and tracking
  • Purple outline: Element is being selected (tagging mode active)
  • Purple dashed outline: Form element being selected

Click the × button next to any tag in the side panel to remove it. Changes take effect immediately.