Set up content

What is content tracking?

Trustlytics counts page views automatically. Meaning you know right away which pages were visited.

But more happens inside a page. Header, blog teaser, pricing box, and call to action. Which of them actually gets seen? Which one gets the clicks? You only know that if you mark it yourself.

That is exactly what content tracking is for. You put a marker on an area of your website (we call that a "block"), and from that moment on Trustlytics counts who sees it and who clicks it.

In the report that shows up as a heatmap. Blocks that many visitors see are dark blue. Blocks that hardly anybody notices stay light blue. That way you see at a glance where you are leaving potential on the table.

Before we start: you choose the names yourself

In the examples below you read words like Blog home, Blog title A, Newsletter signup. Those are examples. None of them is fixed.

Two things you decide yourself:

1. The group name of the page (that goes after data-trustlytics-content="...")
2. The block name for each individual area (that goes after data-trustlytics-content-block="...")

Trustlytics stores exactly what you write. There is no list you have to pick from.

Content tracking runs in two steps

You place at least two markers in your website:

1. On the <body> tag: activates content tracking for the page and gives the page a group name.
2. On every block: gives each area a name of its own.

Without step 1, Trustlytics does nothing. If step 1 is there but no blocks are marked, the report stays empty.

Step 1: activate the page

Find the <body> tag in your HTML. It sits at the very beginning of the page and looks roughly like this:

<body>
 ...
</body>

Add the attribute:

<body data-trustlytics-content="Blog home">
 ...
</body>

"Blog home" is the name of the content group. That is exactly the name you will recognize later in the dropdown in your Trustlytics report.

You give each page its own name. For example:

• "Home"
• "Blog overview"
• "Product page shoes"
• "Pricing"

Whatever makes sense to you is right.

Step 2: mark the blocks

For every area you want to measure, you add an attribute. That works on any HTML element that wraps the area. Usually an <article>, <section> or <div>.

Here is what a normal blog teaser looks like:

<article>
 <h2><a href="/blog/post-a">My first blog post</a></h2>
 <p>Teaser text...</p>
 <a href="/blog/post-a">Read more</a>
</article>

You mark it with a name:

<article data-trustlytics-content-block="Blog title A">
 <h2><a href="/blog/post-a">My first blog post</a></h2>
 <p>Teaser text...</p>
 <a href="/blog/post-a">Read more</a>
</article>

Done. From now on Trustlytics counts every time a visitor sees or clicks this block.

You may mark as many blocks per page as you want. Typical is 5 to 30.

Example 1: a complete blog overview

<body data-trustlytics-content="Blog home">

 <header>
 <h1>Small business blog</h1>
 </header>

 <main>
 <article data-trustlytics-content-block="Blog title A">
 <h2><a href="/blog/post-a">Do your own bookkeeping or outsource it?</a></h2>
 <p>Lorem ipsum...</p>
 </article>

 <article data-trustlytics-content-block="Blog title B">
 <h2><a href="/blog/post-b">Finding employees when nobody applies</a></h2>
 <p>Lorem ipsum...</p>
 </article>

 <article data-trustlytics-content-block="Blog title C">
 <h2><a href="/blog/post-c">Is LinkedIn worth it for my small business?</a></h2>
 <p>Lorem ipsum...</p>
 </article>
 </main>

</body>

In Trustlytics, under "Content" in the group "Blog home", you see a heatmap with three blocks:

• Blog title A: 1,240 impressions (78%), 312 clicks (25%)
• Blog title B: 1,180 impressions (74%), 198 clicks (17%)
• Blog title C: 540 impressions (34%), 42 clicks (8%)

You see it immediately: blog C gets seen far less often. Probably because it sits far down the page. And the people who do see it click less often. Maybe the title is less interesting.

Example 2: this very article (how we do it ourselves)

The page you are reading right now is marked the same way. We track every section separately so we can see which parts get read and which ones readers skip. Simplified, it looks like this:

<body data-trustlytics-content="Support article: Set up content">

 <article data-trustlytics-content-block="What is content tracking?">
 ...
 </article>

 <article data-trustlytics-content-block="Content tracking runs in two steps">
 ...
 </article>

 <article data-trustlytics-content-block="Step 1: activate the page">
 ...
 </article>

 <article data-trustlytics-content-block="Step 2: mark the blocks">
 ...
 </article>

</body>

Why we do it exactly this way:

1. The page name in the <body> contains the article title. That way we know later that this report belongs to the article "Set up content". With 100 support articles, "Support article" on its own would be useless.
2. Every section is a block of its own. So we see not only whether somebody opens the page, but also how far they read. If 90% see the opening but only 30% make it to "Step 2", we know where to improve.
3. The block names are written in plain language. No block_1, no section-a. When we open the report in two months, we understand immediately which section is meant.

What counts as a block being seen?

Trustlytics uses the industry standard for ad viewability:

• A block counts as seen when at least 50% of it is in the visitor's visible area.
• And it stays there for at least 1 second.

So scrolling past quickly does not count. Per page view, each block is only counted as seen once, even if the visitor scrolls up and down.

What counts as a click on a block?

As soon as your visitor clicks inside a marked block and hits a link doing so, Trustlytics saves that as an interaction. We note the name of the block and the target the link leads to.

If a block has several links (a title link plus a "Read more" button), every click is measured separately with its own target.

Special case: a click without a classic link

If your block contains no <a> link but opens a modal on click or navigates through JavaScript, you set the click target yourself:

<div data-trustlytics-content-block="Newsletter signup"
 data-trustlytics-content-target="newsletter-modal">
 <h2>Subscribe to the newsletter</h2>
 <button>Sign up now</button>
</div>

With data-trustlytics-content-target="newsletter-modal" every click anywhere in the block counts as an interaction with the target "newsletter-modal". You are free to choose the value.

Special case: renaming a block without losing data

If you use WordPress, Drupal, or Typo3 and want to change block names later without losing the history, set a stable ID:

<article data-trustlytics-content-block="Blog title A"
 data-trustlytics-content-block-id="post-1234">
 ...
</article>

As long as data-trustlytics-content-block-id="post-1234" stays the same, Trustlytics merges the data. Even when you later change the name from "Blog title A" to "Blog post A".

Without that ID, the block name serves as the identity. A rename then creates a new block entry, and the old numbers keep running under the old name.

Rules and limits

How to check that it works

1. Place the markers in your HTML (step 1 and step 2).
2. Save the change on your website.
3. Open your website in a new browser window.
4. Scroll over the blocks and click one of them.
5. Wait one to two minutes.
6. Switch to the "Content" area in Trustlytics.
7. Pick your group name in the dropdown.

You now see the blocks in the heatmap.

Tips for choosing names

• Use terms people understand. "Hero area" is better than "div1".
• Spaces and accented characters are allowed in group and block names. "Café menu" works without a problem.
• Stay consistent. If you call a block "Newsletter" on page A and "Newsletter signup" on page B, those are two different blocks to Trustlytics. That can be intentional. Or an oversight.
• Unique per page. Give every block on the same page its own name. Otherwise Trustlytics adds several blocks together. (Unless that is exactly what you want.)

When does content tracking make sense?

• Blog overviews with lots of post previews. Which articles get clicked, which ones go unnoticed?
• Landing pages. Does your hero section get seen? Do visitors even make it down to the pricing list? Or do they drop out before that?
• Long articles. Mark the introduction, the middle, the ending, and the call to action. That way you see how far your readers actually read.
• Product pages. Image gallery, description, pricing box, and reviews. Which section pulls the most attention?

Common mistakes

Forgetting data-trustlytics-content in the <body>.
Trustlytics then does not activate content tracking. Right-click on the page, choose "Inspect element" and check whether the attribute really sits on the <body> tag.

Several blocks with the same name on the same page.
Trustlytics merges them into one block. If you want to see them separately, give them different names. Or use data-trustlytics-content-block-id with different IDs.

Marking an empty container.
The element does get tracked, but the visibility measurement says little. Always mark the container holding the content that is actually visible.

Blocks inside an iframe.
Content in iframes (embedded YouTube videos or third party ads, for example) cannot be measured for technical reasons.

Common questions

Are bots counted?
No. We detect crawlers from Google, Bing, ChatGPT, and the rest automatically. They do not show up in your statistics.

How accurate is the measurement?
Every impression and every click gets saved. The current day is evaluated live, the values from the previous day appear final the next morning.

Does this also work with React, Vue, or Next.js?
Yes. The attributes work in every framework. Just set them in the JSX or the template on the matching element, the same way as in plain HTML.

What if I remove a block attribute?
From that moment on the block is no longer tracked. Data already collected stays in your reports.

What if I change a block name?
Without data-trustlytics-content-block-id Trustlytics sees it as a new block. With an ID, the history keeps running.

How does this behave on mobile compared with desktop?
Trustlytics measures both separately. Blocks that sit side by side on desktop and stacked on mobile appear correctly per device in the report. You switch between desktop, tablet, and mobile through tabs.

What about blocks loaded later through JavaScript?
Trustlytics detects dynamically loaded blocks automatically as well. As long as they carry the data-trustlytics-content-block attribute.