Step 3: Initializing Elements

Prev Next

After activating the plugin, you must define which content elements should be tracked. This is done by adding a short JavaScript snippet to your website or tag manager, using a global array called window.wt_rt.

This step is required for all integration types — whether you use Smart Pixel, Tag Integration, or Pixel Version 4.

The plugin automatically reads this array when the page loads. Make sure it is defined — and includes all tracked elements — before the plugin is executed.


Where to place the code

You can insert the JavaScript either:

  • in your website’s HTML code (e.g., inside a <script> tag),

  • or in a tag within your Tag Management System (e.g. Mapp Tag Integration or Google Tag Manager).

Just make sure this code runs before the plugin loads.


Use Case 1: Tracking the entire page

Use the body selector to track the full page. The page name will be used as the element name in reporting.

window.wt_rt = window.wt_rt || [];
window.wt_rt.push({
  selector: 'body'
});

Note

This setup works similarly to classic scroll tracking — but with more precision.

The plugin tracks how long each part of the page was visible, using 200 segments, configurable thresholds, and screen-size-specific timing.

It’s a direct upgrade to the Scroll Depth Plugin.


Use Case 2: Tracking multiple elements on a page

You can also track several distinct parts of a page — for example, articles, sections, or promotional blocks. Each element must be registered individually using its CSS selector and a name for reporting.

window.wt_rt.push({ selector: '#article-main', name: 'Main Article' });
window.wt_rt.push({ selector: '#article-related', name: 'Related Content' });

Example in HTML:

<div id="article-main">...</div>
<div id="article-related">...</div>

Tip

Use this setup when you want to understand which parts of the page get the most attention — not just whether the user scrolled down.


Use Case 3: Overriding plugin settings for individual elements

You can override the global plugin configuration for individual elements if they require different engagement logic.

For example, you might want to only count engagement for your main article when at least 50% of it has been viewed — instead of sending data when the user leaves the page.

window.wt_rt.push({
  selector: '#article-main',
  name: 'Main Article',
  config: {
    sendContentEngagement: 1,
    percentageReached: 50
  }
});

Parameter

Description

selector

CSS selector of the element to be tracked.

name

Optional. Display name in reporting. If omitted, the page name (content ID) is used.

config

Optional. Overrides plugin settings for this specific element.

Note

Only the specified values are overridden. All other settings fall back to the global configuration set via .config() in Step 2.

Use this when you want to define different thresholds for specific elements — for example, stricter conditions for long articles or promotional content.


Use Case 4: Tracking on dynamic pages or SPAs

If your page layout changes after load — for example through JavaScript, AJAX, or single-page routing — the plugin cannot automatically detect the new element positions. In these cases, you must manually trigger recalculations.

Use the window.wt_rt.push() method to simulate system events:

// Recalculate visible positions after scroll or layout change
window.wt_rt.push('scroll');

// Recalculate after window or container resize
window.wt_rt.push('resize');

// Send remaining data before navigating away or replacing content
window.wt_rt.push('unload');

Trigger

Description

scroll

Re-evaluates which parts of each element are currently visible.

resize

Updates the layout and simulates a scroll event.

unload

Finalizes tracking and sends pending data (based on configuration).

Use this if your site uses dynamic content, lazy loading, or route changes without full reloads.