Transfon Gateway JavaScript API

Get started with Transfon Gateway JavaScript API

Transfon Gateway provides a client-side JavaScript API to interact with the Transfon Gateway tag. The API allows you to queue events and perform checks asynchronously, even before the tag script has fully loaded.

Installation

The Transfon Gateway tag loads asynchronously (defer async), so it never blocks page rendering. To make the JavaScript API available immediately — even before the tag script has finished loading — add the one-line queue stub before the tag script:

<script>window._waf360={q:[],send:(w,c)=>window._waf360.q.push([w,c]),check:w=>window._waf360.q.push(["check",w])};</script>
<script id="waf360-tag" src="https://tag.waf360.com/tag/tag.js" data-license="YOUR_LICENSE_KEY" defer async></script>

The stub creates window._waf360 synchronously with send and check methods that queue calls into window._waf360.q. Once the tag loads, it replaces the stubs with the real implementations and replays every queued call in order. This means you can safely call the API anywhere on the page:

<script>
window._waf360.check(function(data) {
  console.log("Transfon Gateway check result:", data);
  if (data.block) {
    // handle blocked traffic
  }
});
</script>

Notes:

  • The stub must appear before the tag script tag, and the tag script must keep the id="waf360-tag" attribute — the tag uses it to read your license key.
  • The license key can be set via data-license or license; data-license is recommended as it is valid HTML.
  • Without the stub, calling window._waf360.check(...) before the tag has loaded throws a ReferenceError, because window._waf360 does not exist yet.

window._waf360.send(event, payload)

Adds a custom event to the Transfon Gateway queue. This method can be called before or after the Transfon Gateway tag is loaded.

event (string)
Name of the event to track. Example: "page_view"

payload (object, optional)
Optional data associated with the event. Example: { userId: 12345 }

Usage Example:

// Queue a custom event
window._waf360.send("page_view", { userId: 12345 });

Behavior:

  • Queued events are stored in window._waf360.q until the tag is ready.
  • Once the tag initializes, queued events are sent to the Transfon Gateway backend via Track.send.

window._waf360.check(callback)

Queues a Transfon Gateway check operation to fetch the current traffic and security evaluation. The callback is executed once the tag is ready and the response is retrieved.

callback (function, required)
A function that executes with the Transfon Gateway response data. The callback receives a single parameter: the response object.

Usage Example:

window._waf360.check(function(data) {
  console.log("Transfon Gateway check result:", data);
  if (data.block) {
    alert("Traffic is blocked");
  }
});

Behavior:

  • The callback function is queued in window._waf360.q as ['check', callback].
  • When the Transfon Gateway tag initializes, the tag executes all queued check callbacks.
  • The callback receives a response object with the following fields:
{
  "qs": false,
  "ib": false,
  "ic": true,
  "dc": "AMAZON_AWS",
  "ix": false,
  "it": false,
  "iv": false,
  "ih": false,
  "geo": "GB",
  "block": false
}

See the Transfon Gateway API documentation for the full description of each response field, including the ih/hc header consistency check fields.

Queue Behavior

All API calls (send and check) are stored in the _waf360.q array until the Transfon Gateway tag is fully loaded. This allows you to invoke the API before the tag script is available:

window._waf360.send("signup", { plan: "premium" });
window._waf360.check(function(data) { console.log(data); });

When the tag initializes, it processes the queue in order, sending events and executing check callbacks.

Example: Conditional Script Loading

In many cases, you may need to control which third-party vendor scripts are loaded based on the characteristics of your traffic. Using the Transfon Gateway JavaScript API, you can dynamically decide whether to load scripts depending on geographic location, quality check status, bot detection, or other security metrics. This approach helps:

  • Reduce unnecessary third-party script loads for suspicious traffic.
  • Comply with regional or regulatory restrictions.
  • Improve performance and security by only loading scripts for verified traffic.

The following examples demonstrate common scenarios for managing third-party vendor tags using window._waf360.check.

1. Only allow US traffic to load another JS tag

window._waf360.check(function(data) {
  if (data.geo === "US") {
    const script = document.createElement("script");
    script.src = "https://example.com/us-only-script.js";
    document.head.appendChild(script);
  }
});

2. Load a script based on block status

window._waf360.check(function(data) {
  if (!data.block) { // only load if traffic is not blocked
    const script = document.createElement("script");
    script.src = "https://example.com/allowed-script.js";
    document.head.appendChild(script);
  }
});

3. Load a script based on qs (quality check)

window._waf360.check(function(data) {
  if (data.qs) { // only load if traffic passed quality check
    const script = document.createElement("script");
    script.src = "https://example.com/quality-pass-script.js";
    document.head.appendChild(script);
  }
});

4. Load a script based on both block and qs

window._waf360.check(function(data) {
  // Load only if not blocked by rules and also passes quality check
  if (!data.block && data.qs) {
    const script = document.createElement("script");
    script.src = "https://example.com/block-pass-script.js";
    document.head.appendChild(script);
  }
});