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

  • A tracker key from the CustomerScore app, e.g. CS-123456.
  • Your domain set on Tracker settings page.
  • Access to your site’s HTML (or Google Tag Manager).

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>

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>
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: 'cust-23749', // required – your external customer ID
    contact: 'thomas@supercustomer.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.

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).

5) Track page views manually

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: '{{User Id}}', contact: '{{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.

10) Quick copy‑paste section

Loader (head):

<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>

Init (body/startup):

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

Identify (after login):

<script>
  CustomerScoreTracker.identify({ customer: 'cus_XXX', contact: 'user@example.com' });
</script>

Custom event:

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

Manual page view:

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

Logout:

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

That’s it!

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