Configuration

Constructor options

const saasco = new Saasco({
  projectId: "YOUR-PROJECT-ID",
  enabled: true,
  debug: false,
  debugVerbose: false,
  proxy: "https://t.saasco.com/",
  autoPageTracking: {
    enabled: true,
    trackQueryParams: true,
    trackHash: true,
  },
  integrations: [],
});

support and socialProof only matter for non-standard hosting. Whether either widget loads at all is decided by its dashboard toggle, not by these options. See Widgets.

Public methods

| Method | What it does | | ---------------- | ----------------------------------------------------------------------------------------------------------------------- | --- | ------------------------ | -------------------------------------- | | init() | Starts page tracking and injects the widget loaders. Constructing the instance is not enough. | | track(...) | Send a custom event. track(name, properties?) in the browser, object form on a server. Tracking | | identify(...) | Tie events to a CRM contact; mirrored into the support widget. Identify | | page() | Record a Page View by hand. Browser-only; dedupes the last path. | | logout() | Sign-out helper. Clears the user cookie, session, anonymous id, support identity and last-touch attribution. | | enableDebug() | Turn on console logging after init. | | disableDebug() | Turn it off again. ?saasco-debug=true still wins. | | getIntegrationsStats() | Inspect the ad-pixel queue and status. |

The support widget's own host API lives on window.SaascoSupport. See Widgets.

Script-tag attributes

The hosted build takes the common options as data-* attributes and calls init() for you:

<script
  src="https://www.saasco.com/sdk/saasco-sdk.js"
  data-projectId="YOUR-PROJECT-ID"
  data-debug="true"
  data-enabled="true"
  data-autoPageTracking="true"
></script>

Nested options (autoPageTracking.trackQueryParams, autoPageTracking.trackHash, debugVerbose) have no attribute; use the npm package, or ?saasco-debug-verbose=true for verbose logs.

Then track from anywhere on the page:

saasco.track("Searched Movies");

For types in a TypeScript project:

import { Saasco } from "saasco-sdk";

declare global {
  interface Window {
    saasco?: Saasco;
  }
}

Debugging

Turn logging on with debug: true (or debugVerbose: true) on the constructor, or append ?saasco-debug=true / ?saasco-debug-verbose=true to any page URL. URL parameters win over the constructor, which is what makes them useful on a production build. The URL parameter is read when the page loads, so add it again after a full-page redirect.

The log starts with Saasco started, then Sending to test project test_… on test hosts, then one line per request: Page View <url>, identify, or track. Events go to https://t.saasco.com/events and identifies to https://t.saasco.com/identify, unless you set proxy.

init() sets window.saasco to the instance for npm and script-tag installs alike, so it is undefined until init() has run. To check delivery without a console, coding agents can use the setup progress check.

export const saasco = new Saasco({
  projectId: "YOUR-PROJECT-ID",
  enabled: process.env.NODE_ENV === "production",
  debug: true,
});

Logs still print while enabled is false. The events just aren't sent, which is the fastest way to check your instrumentation without polluting production data.

You can also flip it after init:

saasco.enableDebug();
saasco.disableDebug();

?saasco-debug=true still overrides disableDebug().

Ad pixels

The SDK can load Facebook Pixel, TikTok Pixel and Pinterest Tag, then forward your track and identify calls to them. You supply the mapping from your event names to each network's standard events:

export const saasco = new Saasco({
  projectId: "YOUR-PROJECT-ID",
  integrations: [
    {
      type: "facebook-pixel",
      config: {
        pixelId: "YOUR_PIXEL_ID",
        eventMapping: {
          "Added to Cart": "AddToCart",
          "Payment Completed": "Purchase",
        },
      },
    },
    {
      type: "tiktok-pixel",
      config: {
        pixelId: "YOUR_PIXEL_ID",
        eventMapping: {
          "Added to Cart": "AddToCart",
          "Payment Completed": "Purchase",
        },
      },
    },
    {
      type: "pinterest-tag",
      config: {
        tagId: "YOUR_TAG_ID",
        eventMapping: {
          "Added to Cart": "addtocart",
          "Payment Completed": "checkout",
        },
      },
    },
  ],
});

On the hosted script tag, pass ids and optional JSON mappings as attributes:

<script
  src="https://www.saasco.com/sdk/saasco-sdk.js"
  data-projectId="YOUR-PROJECT-ID"
  data-facebook-pixel-id="YOUR_PIXEL_ID"
  data-facebook-pixel-event-mapping='{"Added to Cart":"AddToCart"}'
  data-tiktok-pixel-id="YOUR_PIXEL_ID"
  data-pinterest-tag-id="YOUR_TAG_ID"
></script>

Pixels only initialize while analytics enabled is true, so the same NODE_ENV gate keeps them out of development. getIntegrationsStats() reports the queue and status if something looks like it isn't firing.