askbowtie

Section Engagement Analytics: See What Parts of a Page Convert

7 min read Machine reference Plaintext for LLMs

Open any analytics report and you get numbers about what happened: pageviews, sessions, bounce rate. What you almost never get is why, or how. You cannot look at a pageviews chart and say "312 people actually engaged with this page." You end up stitching data together, guessing from which page someone visited next, or asking an AI to investigate. That guesswork is fragile because there is no source of truth underneath it.

Here is a real example. On vpn.com, a visitor gets a "use case" assigned only when they click a button in the homepage hero. Site-wide that is about 4% of traffic. But look only at people who landed on the homepage and did not bounce, and it jumps to 30%+. That completely changes the story. It also opens an obvious gap: how do the other 70% engage? By what pages they visited next? That is a coin flip, not an answer.

askbowtie closes that gap with a simple idea: declare the things that matter, then ask plain questions. You add two kinds of lightweight markers to your site, and from then on the answers come from a source of truth instead of inference. This guide covers both, and how they combine into analytics that actually answer questions.

The idea: declare, don't infer

Traditional analytics infers meaning from behavior. It sees a URL and a click and tries to reconstruct intent. askbowtie flips that around. You declare what a page is and which parts of it matter, using two HTML attributes. Nothing else about your site changes. From then on, every metric about "editorial pages" or "the hero section" is grounded in your declaration, not a heuristic that breaks the moment you redesign.

Two markers, two questions:

  • data-askbowtie-tag on a page answers "what kind of page is this?" (its role).
  • data-askbowtie-section on a section answers "how did visitors engage this page?" (which part they used).

You do not tag everything. You tag the pages that are clearly one kind, and the few sections that matter. The rest stays untyped and visible, so nothing hides. That middle ground is the whole point: real signal, no maintenance debt.

Page roles: analytics by kind, not slug

A role is a label for what a page is for. Set it once on the page body:

<body data-askbowtie-tag="editorial">

Common roles are editorial, commercial, conversion, and lander, but the vocabulary is yours. Any lowercase slug works, so pricing, quiz, or comparison are all valid. bowtie reads the marker two ways: when the page is crawled (so even zero-traffic pages self-classify) and on every pageview. New pages inherit the role from your template automatically, with no per-page reminders.

Once pages carry roles, you stop scanning hundreds of URLs to find "the editorial ones." You ask for the whole role at once:

  • How is each kind of content performing? One call returns every role with its page count, sessions, conversions, and conversion rate, plus an always-visible untyped bucket.
  • Compare blog pages to product pages. Filter your top-pages table to type: "commercial" and every row also carries its role, so the split is one query rather than a manual sort.

You can also assign a role manually for legacy pages you will not edit, or tag a whole section of the site by path in one move. And because the marker lives in your template, removing a role is as easy as deleting the attribute.

Section engagement: how visitors actually use a page

Roles describe pages. Sections describe the parts of a page people click. Mark the containers that matter:

<header data-askbowtie-section="nav:header"> ... </header>
<section data-askbowtie-section="hero"> ... </section>
<a data-askbowtie-section="cta:start-quiz" href="/quiz">Start the quiz</a>

The value is a slug, with an optional sublabel after a colon: hero, nav:header, cta:start-quiz. When someone clicks anywhere inside a marked section, bowtie walks up to the nearest marker and stamps that section onto the click. Clicks on an icon or a span inside a button are handled for you, so you mark the container, not every child.

Now the black box opens. For any page, you can see its viewers split by which section they engaged, each with its share of viewers and its downstream conversion rate (did that session go on to convert). Two patterns jump out immediately:

  • Silent killers: a section with a high share of clicks but low downstream conversion. It eats attention and pays nothing.
  • Underexposed winners: a section with a low share but high downstream conversion. Few people find it, but those who do convert.

The report also tells you how many viewers clicked nothing, which is the honest size of your scroll-and-leave audience. On vpn.com's homepage over 30 days, that number is 49.7%: half of all viewers engage no interactive element at all. Of the half that do, the primary button (btn-solid) drew 2,586 sessions at a 23.6% downstream conversion rate. That is a concrete answer to "how do the other 70% proceed," pulled from data that was already being collected.

The retroactive shortcut: no code changes required

You do not have to add a single marker to get started. bowtie already records the CSS class and link target of every click. So you can map an existing click signature to a section with a rule, and it classifies your historical clicks instantly, with zero re-tracking.

The workflow is a loop. Ask for a page's engagement, and any click that has no marker and no rule shows up in a suggestions list, grouped by its real class or link. You see, for example, "2,586 sessions clicked .btn-solid, 23.6% converted." You confirm the ones that matter by adding a rule that maps btn-solid to cta:primary, and re-run the report to see it named. Nothing is auto-applied, so a wrong guess can never sneak into your numbers. Rules are revertible: delete the rule and the classification is gone.

Markers and rules work together. A page's own marker is always the source of truth and wins over any rule, so you use markers for precise, going-forward truth and rules for the retroactive backfill.

Questions you can now answer

These are the questions that are usually a guess. With roles and sections in place, each maps to a direct answer:

The questionHow it's answered
Which kind of page converts best?The role rollup: every role with its conversion rate, side by side.
How are all my commercial pages doing?Filter the page table to that role. One call, not a manual sort of 400 URLs.
What percentage of this page's traffic uses the navigation?The section breakdown for that page: nav's share of viewers.
Which section on this page is a silent killer?Sort sections by share against downstream conversion. High share, low conversion is the leak.
How do the visitors who ignore the hero proceed?The other named sections, the unknown bucket, and the "clicked nothing" share, all on one page.
Is my most-clicked button actually earning its place?Its section's downstream conversion rate, not just its click count.

Why this is trustworthy

Three rules keep the numbers honest:

  • Declaration over inference. A section is the section you named, not a pattern a model guessed. When your numbers move, the meaning is stable.
  • Suggestions never own the truth. Auto-detection only ever proposes. It surfaces high-volume untagged clicks and likely page roles, but a human or agent confirms before anything is stored. A wrong label cannot appear on its own.
  • Everything is revertible. Remove a marker, or delete a rule, and the classification disappears. There is no migration and no lock-in, so experimenting is cheap.

Getting started in five minutes

  1. Add data-askbowtie-tag to your page templates for the roles you already know: editorial on articles, commercial on product pages, conversion on checkout.
  2. On your most important page, add data-askbowtie-section to the hero, the primary navigation, and your main call to action.
  3. Ask for that page's engagement and read the suggestions list. It shows the real clicks your visitors make.
  4. Confirm the meaningful untagged clicks by adding a rule, which also classifies all of your history.
  5. Ask your questions in plain language. The role rollup and the per-page section breakdown answer them from a source of truth.

Everything here is queryable through the askbowtie MCP server, so an AI agent can do all of it for you: read the engagement, propose the roles and sections, confirm them with your sign-off, and report which parts of your site are worth money. The next section is written for that agent.

For AI agents (machine reference)

This section is a dense, exact reference for an LLM using the askbowtie MCP server. Everything above is prose. This is the contract. A clean plaintext copy of this whole guide lives at /learn/new-analytics/index.md.

Markers (declared on the site, the source of truth)

# Page role. On the <body>. Read on crawl AND every pageview.
<body data-askbowtie-tag="ROLE">
  ROLE = lowercase slug. Common: editorial | commercial | conversion | lander. Free vocabulary.
  Fallback: <meta name="askbowtie:tag" content="ROLE">. SPA/JS: bowtie.tag('ROLE').

# Section. On a section CONTAINER. A click is attributed to its NEAREST such ancestor.
<… data-askbowtie-section="SECTION[:SUBLABEL]">
  Each part a lowercase slug. Examples: hero | nav:header | content | cta:start-quiz | footer.
  Stamped onto the click event at click time (meta.section). Wins over any rule.

MCP tools

# Page roles
get_page_types { domain, period?, limit? }
  => { tags[{tag, pages, sessions, conversions, conversion_rate}], untyped{...},
       suggestions[{page, suggested_tag, why, confidence}], tagged_pages[...], warnings[] }
tag_pages { domain, tag, pages[]?, match?(path substring), clear? }   # manual assign (wins over declared)
get_top_pages { domain, type?(a role) }                               # each row carries its tag

# Section engagement (per page)
get_engagement { domain, page, period? }
  => { viewed_sessions, non_bounce_sessions, no_interaction_share_pct,
       sections[{section, sessions_engaged, share_pct, conversion_rate}],
       unknown{sessions_engaged, share_pct, conversion_rate},
       suggestions[{signature, field(class|href|selector), sessions, share_pct, conversion_rate}], warnings[] }
manage_sections { domain, action:list_rules|add_rule|clear_rule,
                  match_type?(class|href|selector), pattern?, section?, priority?, id? }
  # add_rule maps an existing click signature to a section (RETROACTIVE, classifies history).

Question to tool

"which kind of page converts best"          => get_page_types (compare tags[].conversion_rate)
"tackle all commercial pages"               => get_top_pages { type: "commercial" }
"what % of page X uses the nav"             => get_engagement { page: X } (sections[section=nav].share_pct)
"which section is a silent killer"          => get_engagement (high share_pct, low conversion_rate)
"how do non-clickers of the hero proceed"   => get_engagement (other sections + unknown + no_interaction)

Rules and precedence

  • Section of a click: marker (meta.section) > first matching section_rules by priority > (unknown).
  • Page role on write: manual > declared (marker) > suggested. A manual tag is never overwritten.
  • Suggestions are proposals only. Never auto-applied. Confirm with tag_pages or manage_sections add_rule.
  • get_engagement is per page and per window. Ask about specific pages, starting with the highest-traffic ones.
  • Recommended agent loop: get_engagement a key page, read suggestions, add_rule the meaningful ones, re-run to confirm names, then report silent killers (high share, low conversion) and underexposed winners (low share, high conversion).

Read the full tracking reference for every event and tool, or connect your site and ask your first question.