JavaScript for Website Tracking

This guide is for developers who already have the LeadBoxer tracking script installed and want to use the more advanced features of the JavaScript library.

It focuses on:

• Custom events and properties
• Enriching pageviews on load
• Capturing JSON-LD metadata
• Cross device and cross browser identity stitching
• Behaviour based content personalisation
• Running a self hosted (static) version of the script

1. Prerequisites

Before using the options below you should:

• Have the standard tracking script installed on all pages you want to track
  https://script.leadboxer.com/?dataset=YourDatasetId help.leadboxer.com
• Confirm that pageviews are appearing in LeadBoxer

Key global objects and functions exposed by the script: help.leadboxer.com

• OTLogService.sendEvent(name, map?, async?)
• OTMap for custom properties
• _otmap global map used by the on load hook
• ot_onload() hook for page load enrichment
• ot_log_state() to flush _otmap into the first request
• ot_uid() current user id
• ot_sid() current session id

2. Custom events and properties

Use OTLogService.sendEvent and OTMap to track non pageview actions and attach arbitrary data. help.leadboxer.com

2.1 Basic custom event

<script src="https://script.leadboxer.com/?dataset=YourDatasetId"></script>
<script>
  OTLogService.sendEvent("clicked signup CTA");
</script>

2.2 Event with properties

<script src="https://script.leadboxer.com/?dataset=YourDatasetId"></script>
<script>
  var map = new OTMap();
  map.put("plan", "pro");
  map.put("cta_location", "pricing_footer");

  OTLogService.sendEvent("signup_cta_click", map);
</script>

Typical uses: • Tracking SPA route changes • Tracking downloads and outbound clicks • Logging product usage events (feature toggles, in app actions, etc)

👍

Tip: keep property names stable and use machine friendly names (plan_tier, account_id, utm_campaign) so they map cleanly to LeadBoxer custom fields.

3. Page load enrichment using ot_onload

The tracking script checks for a function named ot_onload and calls it before sending the default pageview. Use this to attach user or account context to every pageview.  

3.1 How it works

• You define ot_onload before you load the LeadBoxer script
• nside ot_onload you write to the global _otmap
• You finish by calling ot_log_state()
• The first request for that page will then include all properties from _otmap

3.2 Example

<script>
  function ot_onload() {
    var accountId = window.appUser && window.appUser.accountId;
    var accountType = window.appUser && window.appUser.accountType;

    if (accountId) {
      _otmap.put("account_id", accountId);
    }
    if (accountType) {
      _otmap.put("account_type", accountType);
    }

    // flush properties into the initial pageview
    ot_log_state();
  }
</script>

<script src="https://script.leadboxer.com/?dataset=YourDatasetId"></script>

Good use cases:

• Attach internal account ids, user ids, subscription tier, lifecycle stage
• Mark traffic as customer vs trial vs prospect
• Add ABM list flags or segment names

4. Capturing JSON LD metadata

If your pages already expose rich metadata in application/ld+json blocks, you can reuse that data in LeadBoxer instead of duplicating it.  

4.1 Basic pattern

1. Read the JSON LD script from the DOM
2. Parse it
3. Put the values you care about into _otmap
4. Call ot_log_state() inside ot_onload

4.2 Example

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "url": "https://mysite.com/my-article",
  "creator": "Jane Doe",
  "keywords": ["Analytics", "B2B", "Data"],
  "headline": "How to use behavioural data",
  "articleSection": "Insights",
  "datePublished": "2024-09-01T03:35:20-0700"
}
</script>

<script>
  function ot_onload() {
    var el = document.querySelector('script[type="application/ld+json"]');
    if (!el) {
      ot_log_state();
      return;
    }

    var jsonld = JSON.parse(el.innerText);

    var articleSection = jsonld.articleSection || "undefined";
    var creator = jsonld.creator || "undefined";
    var datePublished = jsonld.datePublished
      ? jsonld.datePublished.split("T")[0]
      : "undefined";

    _otmap.put("lb_articleSection", articleSection);
    _otmap.put("lb_creator", creator);
    _otmap.put("lb_datePublished", datePublished);
    _otmap.put(
      "lb_topTitles",
      document.title + "|" + datePublished + "|" + articleSection
    );

    ot_log_state();
  }
</script>

<script src="https://script.leadboxer.com/?dataset=YourDatasetId"></script>

Typical fields to capture:

• Article / product category (articleSection, category, productType)
• Author or creator
• Publish date
• Tags or keywords

5 Cross device and identity stitching

By default LeadBoxer stores a generated user id in a first party cookie and reuses it for all future events from that browser.  

To reduce duplicates across devices and browsers there are two override options:

• lb_uid override
• Email override

5.1 lb_uid override

Include lb_uid as a query parameter on a landing page.

https://www.yourdomain.com/pricing?lb\_uid=1495157259.1528045459293

Behaviour:

• If the uid exists in your data, the new session is merged into that profile
• If it does not exist, a new profile is created with that uid
• The cookie is set or updated with this uid

Use cases:

You know the LeadBoxer uid from an API call and want to reconnect an offline flow to the same profile

You want to use your own user id scheme and fully control the uid (still in . format)

Risk:

• If a link with lb_uid is shared internally, multiple people can end up with the same uid and their behaviour is merged into a single profile

5.2 Email override

Include an email address in the landing page URL.

https://www.yourdomain.com/[email protected]

Behaviour:

•LeadBoxer looks up an existing profile with that email and reuses it

•If none exists, a new user is created with that email attached as a property

Use cases:

•Email campaigns that should tie back to existing website profiles

•Triggered emails from product or CRM that should stitch to known users

Considerations:

•The email is visible in the URL, browser history and server access logs

•Make sure this fits your privacy policy and legal basis