Zones

A zone is a page block you want to track: a pricing grid, a banner, a reviews block, a sign-up box. Mark it with an attribute:

<section data-eodia-zone="tarifs">
  …
</section>

The script tracks it, with no other code:

• its visibility time: the time during which the zone is at least 50% visible, with the page in the foreground (a background tab does not count);
• the clicks it contains: each click carries the key of the nearest zone.

Zones added after loading (a carousel, client-side rendering) are detected automatically.

The key

The key is a short, stable text with no spaces: tarifs, avis, hero, newsletter-footer (64 characters at most). It also serves as a stable selector for clicks: a button inside [data-eodia-zone="tarifs"] keeps the same selector when the layout changes around it.

Declaring a zone

In the site’s Metadata tab, a zone receives a label and a description:

Key	Label	Description
hero	Home banner	The large visual at the top of the home page.
avis	Customer reviews	The reviews block below the product page.
tarifs	Pricing grid	The price table for the gift card.

The label ends up in the label column of analytics.zone_views, and the list of zones in analytics.zones. An undeclared zone is measured all the same.

What the views provide

• analytics.zone_views: one row per zone and per page view, with visible_seconds and seen (true if the zone stayed visible for at least one second);
• analytics.clicks: one row per click, with selector, zone, the relative position x and y (from 0 to 1 within the element) and the device.

-- Share of page views where the pricing grid was actually seen, by device
SELECT p.device,
       avg(CASE WHEN z.seen THEN 1.0 ELSE 0 END) AS seen_share,
       avg(z.visible_seconds)                    AS seconds
FROM analytics.zone_views z
JOIN analytics.page_views p ON p.page_view_id = z.page_view_id
WHERE z.zone = 'tarifs'
GROUP BY 1

Heatmaps

The relative click positions and the zone visibility times feed the heatmaps: with data-preview in the tag, a page opened by eodia insights with #eodia-preview stops measuring and draws, on the real page, the map that insights sends it. Only the configured insights origin (INSIGHTS_URL) is listened to.