Tracking code – Quick Setup Guide

Last updated on 

A simple, copy‑paste guide to get the Customerscore.io tracker running on any website. Includes GTM instructions and testing tips.

0) Prerequisites

1) Install the loader script (in <head> or via GTM)

Place this exact snippet in your site’s <head> (before other scripts if possible). It safely queues calls until the library loads.

<script type="text/javascript">
  (function (t) { typeof define == "function" && define.amd ? define(t) : t() })(function () { "use strict"; (function () { var t = "CustomerScoreTracker", i = window, n = [], s = i[t] || {}; s.__stub__ = !0; function d(e) { s[e] = function () { n.push({ name: e, args: Array.prototype.slice.call(arguments) }) } } for (var f = ["init", "identify", "resetIdentity", "track", "pageView", "group", "set", "unset", "setOnce", "config", "eventStart"], o = 0; o < f.length; o++)d(f[o]); i[t] = s; function l() { var e = i[t]; if (e && !e.__stub__) { for (var u = 0; u < n.length; u++) { var c = n[u]; typeof e[c.name] == "function" && e[c.name].apply(e, c.args) } return n.length = 0, !0 } return !1 } var v = setInterval(function () { l() && clearInterval(v) }, 500), r = document.createElement("script"); r.async = !0, r.src = "<https://tracker.customerscore.io/tracker/v1/lib.js>", r.crossOrigin = "use-credentials"; var a = document.getElementsByTagName("head")[0] || document.documentElement; a.firstChild ? a.insertBefore(r, a.firstChild) : a.appendChild(r) })() });
</script>
What this does: it defines a window.CustomerScoreTracker stub that buffers calls (e.g., init, track) until the hosted library finishes loading.

2) Initialize the tracker (in <body> or after page load)

Add one of the following right after the opening <body> tag or in your app’s startup code (e.g., DOM ready, app bootstrap).

Minimal

<script>
  CustomerScoreTracker.init('CS-123456');
</script>

Or with configuration object:

<script>
  CustomerScoreTracker.init('CS-123456', {
    // config options
  });
</script>
Tip: Call init exactly once per page/app load and before any identify or track calls.

3) Identify the logged‑in user (after login)

Call as soon as you know who the user is. customer is required; contact is optional.

<script>
  CustomerScoreTracker.identify({
    customer: { id: 'cust-23749' }, // required – your external customer ID
    contact: { id: 'thomas@example.com' } // optional – your external contact ID or email
  });
</script>
When to call: immediately after a successful login or when the user context becomes available. Re‑call if the logged‑in user changes.

Alternatively, you can specify contact as an object with extra data:

<script>
  CustomerScoreTracker.identify({
    customer: { id: 'cust-23749' }, // required – your external customer ID
    contact: {
	    id: 'thomas@example.com',  // optional – your external contact ID or email
	    contact_name: 'Thomas Doe', // "contact_name" is reserved property
	    birth_date: '1999-01-01' // value will be stored to a corresponding property on contact
	  }
  });
</script>

4) Track custom events

Use this for button clicks, feature usage, or milestones.

<script>
  CustomerScoreTracker.track('my_event');
</script>
  • my_event should correspond to a metric/attribute key you’ve defined in the CustomerScore app (but any string is accepted).
  • You can call this anywhere in your code (after init).
  • It is possible to include extra data with track method:
<script>
  CustomerScoreTracker.track('my_event', {
	  contact: {
        contact_name: 'Thomas Doe', // "contact_name" is reserved property
        birth_date: '1999-01-01' // value will be stored to a corresponding property on contact
	    }
	  });
</script>
  • Data sent this way will be added to identified contact

5) Track page views

Page views can be captured automatically by using autocapture config option within CustomerScoreTracker.init() function.

Autocapture

Choose the mode that fits your site:

  • "hard-navigation" – traditional sites where page loads cause full reloads.
  • "soft-navigation" – single‑page apps (SPAs) where the URL changes without a full reload.
  • true – enable general autocapture behavior.
<script>
  CustomerScoreTracker.init('CS-123456', {
    autocapture: {
      pageview: "hard-navigation" // or "soft-navigation" or true
    }
  });
</script>

Or simply:

<script>
  CustomerScoreTracker.init('CS-123456', { autocapture: true });
</script>

If the autocapture configuration option is not specified, page views are not captured by default.

Explicit page view

If you disabled autocapture or need explicit control (e.g., on SPA route changes), call:

<script>
  CustomerScoreTracker.pageView();
</script>
SPA note: call pageView() on every route change if you’re not using autocapture with soft-navigation.

6) Reset identity on logout

Clear the current user’s identity when they log out.

<script>
  CustomerScoreTracker.resetIdentity();
</script>

7) Google Tag Manager (GTM) setup (optional)

You can deploy the same code via GTM.

A. Loader tag

  1. Create Tag → Custom HTML.
  2. Paste the loader snippet from section 1 (including <script>...</script>).
  3. Trigger: All Pages (Page View – All Pages).
  4. Save & Publish.

B. Init tag

  1. Create another Tag → Custom HTML.
  2. Trigger: DOM Ready (or Window Loaded), All Pages.
  3. Set Tag Sequencing (optional): fire after the Loader tag.

Paste:

<script>
  CustomerScoreTracker.init('CS-123456', { autocapture: true });
</script>

C. Identify / events

For custom events, create GTM triggers (e.g., clicks) that run:

<script>
  CustomerScoreTracker.track('my_event');
</script>

Fire additional Custom HTML tags on your login success trigger or button click triggers, e.g.:

<script>
  CustomerScoreTracker.identify({ customer: { id: '{{User Id}}' }, contact: { id: '{{User Email}}' }});
</script>

8) Test & verify

  1. Open your site → DevTools Console.

If autocapture is off in an SPA, navigate and call:

CustomerScoreTracker.pageView()

Send a test event:

CustomerScoreTracker.track('test_event')

Run:

window.CustomerScoreTracker && typeof CustomerScoreTracker.init === 'function'

Should return true after the library loads.

9) Common pitfalls

  • Missing init: always call CustomerScoreTracker.init(...) before identify/track/pageView.
  • Identify timing: call identify after login and whenever the active user changes.
  • SPA page views: if you don’t use autocapture with soft-navigation, call pageView() on every route change.
  • Caching/CDN: ensure the loader snippet is not stripped by your templating/CDN.

That’s it!

Paste the loader, initialize with your key, identify users, and start tracking events and page views.

Next steps

Now it’s time to configure metrics and attributes if not done already. This is crucial for visibility of tracked events within your customer’s data.

You can read how to do it on the page Metrics and Attributes setup for Tracker or navigate to Settings > Tracker, section “Setup Metrics and Attributes” (https://app.customerscore.io/settings/tracker).