JavaScript, Node, Deno V2.3.X

Introduction

SDK overview

Welcome to the Flagship JavaScript / TypeScript / NodeJS & Deno SDK documentation!

The following article will guide you through the steps to get Flagship up and running on your JavaScript environment (client-side or server-side) using our library with preconfigured methods to implement the Decision API or Bucketing Mode.

SDK features

That SDK version helps you :

• Set a visitor ID
• Update user context
• Assign campaigns via the Decision API or via Bucketing Mode
• Get flag
• Manage visitor consent
• Use experience continuity
• Activate campaigns
• Send hits to our Universal Collect
• Manage visitor cache

Prerequisites

Good to know

Getting Started

Installation

NodeJS

The SDK can be added as dependency via NPM or YARN

npm install @flagship.io/js-sdk

yarn add @flagship.io/js-sdk@beta

Deno

Deno supports 2 methods:

• URLs for dependency management, so you just need to add the deno.land URL

import { Flagship } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

• and import maps

{
   "imports": {
      "@flagship.io/js-sdk": "https://deno.land/x/flagship_io_js_sdk/mod.ts"
   }
}

Initialization

The first step to use the SDK is to create an instance of Flagship that defines your Flagship account and targeted environment.
Here's the simplest way to initialize Flagship, including the import :

import { Flagship } from "@flagship.io/js-sdk";

Flagship.start("<ENV_ID>", "<API_KEY>");

// or

const fsInstance = Flagship.start("<ENV_ID>", "<API_KEY>");

import { Flagship } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

Flagship.start("<ENV_ID>", "<API_KEY>");

// or

const fsInstance = Flagship.start("<ENV_ID>", "<API_KEY>");

start function

Start the flagship SDK and return the Flagship instance or null if the start has failed.

• static start (envId: string, apiKey: string, config?: IFlagshipConfig): Flagship | null

Advanced Configuration

Here are all available settings you can set on the SDK.

Those settings can be setup only at the start function.

Here's the full pure example of usage :

import { Flagship, DecisionMode, LogLevel } from "@flagship.io/js-sdk";

Flagship.start("<ENV_ID>", "<API_KEY>", {
  decisionMode: DecisionMode.BUCKETING,
  fetchNow: false,
  timeout: 10,
  enableClientCache: true,
  logLevel: LogLevel.CRITICAL,
  logManager: sentryMiddleware,
  decisionApiUrl: 'https://example.com',
  pollingInterval: 100,
  activateDeduplicationTime: 0,
  hitDeduplicationTime: 0,
  initialBucketing: {},
  statusChangedCallback: function(status){
    console.log(status)
  },
  onBucketingSuccess: function(status, payload){
    console.log(status, payload)
  },
  onBucketingFail: function(error){
    console.log(error)
  },
  onBucketingUpdated: function(lastUpdate){
    console.log(lastUpdate)
  }
});

import { Flagship, DecisionMode, LogLevel } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

Flagship.start("<ENV_ID>", "<API_KEY>", {
  decisionMode: DecisionMode.BUCKETING,
  fetchNow: false,
  timeout: 10,
  enableClientCache: true,
  logLevel: LogLevel.CRITICAL,
  logManager: sentryMiddleware,
  decisionApiUrl: 'https://example.com',
  pollingInterval: 100,
  activateDeduplicationTime: 0,
  hitDeduplicationTime: 0,
  initialBucketing: {},
  statusChangedCallback: function(status){
    console.log(status)
  },
  onBucketingSuccess: function(status, payload){
    console.log(status, payload)
  },
  onBucketingFail: function(error){
    console.log(error)
  },
  onBucketingUpdated: function(lastUpdate){
    console.log(lastUpdate)
  }
});

Below the details of every attribute you can set inside the SDK config object :

Decision Mode

API Mode (by default)

When the SDK is running in API mode, the campaign assignments and targeting validation will be run through our Decision API. In this mode, each time a new Decision is required, it will create an HTTPS request to the API.
This mode is used by default for all our SDK.

Bucketing Mode

When the SDK is running in Bucketing mode, the SDK downloads all the campaigns configurations at once in a single bucketing file so that variation assignment can be computed client-side by the SDK. This bucketing file is stored in cache and will only be downloaded again when campaign configurations are modified in the Flagship interface. Learn more

DecisionMode is an enum defined decision type

import { DecisionMode } from "@flagship.io/js-sdk";

//const mode = DecisionMode.DECISION_API;
const mode = DecisionMode.BUCKETING;

Flagship.start("<ENV_ID>", "<API_KEY>", {
  decisionMode:mode
});

import { DecisionMode } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

//const mode = DecisionMode.DECISION_API;
const mode = DecisionMode.BUCKETING;

Flagship.start("<ENV_ID>", "<API_KEY>", {
  decisionMode:mode
});

LogLevel

LogLevel is an enum defined the level of log to receive

import { LogLevel } from "@flagship.io/js-sdk";

const level = LogLevel.ERROR;

Flagship.start("<ENV_ID>", "<API_KEY>", {
  logLevel:level
});

import { LogLevel } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

const level = LogLevel.ERROR;

Flagship.start("<ENV_ID>", "<API_KEY>", {
  logLevel:level
});

IFlagshipLogManager

The aims of this Interface is to define methods that an object must have in order to receive Flagship SDK logs

interface IFlagshipLogManager {
  emergency(message: string, tag: string): void;
  alert(message: string, tag: string): void;
  critical(message: string, tag: string): void;
  error(message: string, tag: string): void;
  warning(message: string, tag: string): void;
  notice(message: string, tag: string): void;
  info(message: string, tag: string): void;
  debug(message: string, tag: string): void;
  log(level: LogLevel, message: string, tag: string): void;
}

Usage :

import { LogLevel, Flagship } from "@flagship.io/js-sdk";

const customLog = {
  emergency(message, tag) {
    this.log(LogLevel.EMERGENCY, message, tag);
  },

  alert(message, tag) {
    this.log(LogLevel.ALERT, message, tag);
  },

  critical(message, tag) {
    this.log(LogLevel.CRITICAL, message, tag);
  },

  error(message, tag) {
    this.log(LogLevel.ERROR, message, tag);
  },

  warning(message, tag) {
    this.log(LogLevel.WARNING, message, tag);
  },

  notice(message, tag) {
    this.log(LogLevel.NOTICE, message, tag);
  },

  info(message, tag) {
    this.log(LogLevel.INFO, message, tag);
  },

  debug(message, tag) {
    this.log(LogLevel.DEBUG, message, tag);
  },

  log(level, message, tag) {
    console.log(`[${LogLevel[level]}] [${tag}] : ${message}`);
  },
};

Flagship.start("<ENV_ID>", "<API_KEY>", {
  logManager: customLog,
  logLevel: LogLevel.ALL
});

import { LogLevel, Flagship } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

const customLog = {
  emergency(message, tag) {
    this.log(LogLevel.EMERGENCY, message, tag);
  },

  alert(message, tag) {
    this.log(LogLevel.ALERT, message, tag);
  },

  critical(message, tag) {
    this.log(LogLevel.CRITICAL, message, tag);
  },

  error(message, tag) {
    this.log(LogLevel.ERROR, message, tag);
  },

  warning(message, tag) {
    this.log(LogLevel.WARNING, message, tag);
  },

  notice(message, tag) {
    this.log(LogLevel.NOTICE, message, tag);
  },

  info(message, tag) {
    this.log(LogLevel.INFO, message, tag);
  },

  debug(message, tag) {
    this.log(LogLevel.DEBUG, message, tag);
  },

  log(level, message, tag) {
    console.log(`[${LogLevel[level]}] [${tag}] : ${message}`);
  },
};

Flagship.start("your_env_id", "your_api_key", {
  logManager: customLog,
  logLevel: LogLevel.ALL,
  fetchNow: false,
  timeout: 2,
});

FlagshipStatus

FlagshipStatus is an enum defining the different status of Flagship SDK

import { FlagshipStatus } from "@flagship.io/js-sdk";

const status = FlagshipStatus.READY;

import { FlagshipStatus } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

const status = FlagshipStatus.READY;

statusChangedCallback

The statusChangedCallback function has one argument

onBucketingSuccess

The onBucketingSuccess function has one argument with the following shape:

onBucketingFail

The onBucketingFail function has one argument

onBucketingUpdated

The onBucketingUpdated function has one argument

Other Flagship methods

getStatus function

Return current status of Flagship SDK. seeFlagshipStatus

• getStatus (): FlagshipStatus
• static getStatus (): FlagshipStatus

getConfig function

Return the current config used by the SDK. see configuration attribute

• getConfig (): IFlagshipConfig
• static getConfig (): IFlagshipConfig

getVisitor function

Return the last visitor created and saved or return undefined if no visitor has been saved. see newVisitor.

• getVisitor ():Visitor|undefined
• static getVisitor ():Visitor|undefined

import { Flagship } from "@flagship.io/js-sdk";

const fsInstance = Flagship.start("<ENV_ID>", "<API_KEY>");
const status = fsInstance.getStatus();

//or

const status = Flagship.getStatus();

import { Flagship } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

const fsInstance = Flagship.start("<ENV_ID>", "<API_KEY>");
const status = fsInstance.getStatus();

//or

const status = Flagship.getStatus();

Create a visitor

The Visitor instance is an object that contains everything related to your visitor, its data but also the Decision of Flagship.

By creating a new visitor, you be able to set all the data relevant for Flagship to take a Decision and know your visitor, this includes :

• Visitor ID
• Visitor Context
• GDPR Consent
• Authenticated or not (See Experience Continuity Feature)

The visitor context is a dataset (object) that defines your current visitor.
This dataset is sent to Flagship for targeting purposes (use-case assignment) but also to enrich your reporting with Context Filters.
You may have to sync with your team to know what data is useful for them to have into Flagship reporting.

By default, depending on IFlagshipConfig, this will automatically trigger a Decision of Flagship and will be available through the Getting modifications method

import { Flagship } from "@flagship.io/js-sdk";

const fsInstance = Flagship.start("<ENV_ID>", "<API_KEY>");

const fsVisitor = fsInstance.newVisitor({
  visitorId: "<VISITOR_ID>",
  context: {
   // <CONTEXT_KEY>: <CONTEXT_KEY>,
  }
});

// or 

const fsVisitor = Flagship.newVisitor({
  visitorId: "<VISITOR_ID>",
  context: {
   // <CONTEXT_KEY>: <CONTEXT_KEY>,
  }
});

import { Flagship } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

const fsInstance = Flagship.start("<ENV_ID>", "<API_KEY>");

const fsVisitor = fsInstance.newVisitor({
  visitorId: "<VISITOR_ID>",
  context: {
   // <CONTEXT_KEY>: <CONTEXT_KEY>,
  }
});

// or 

const fsVisitor = Flagship.newVisitor({
  visitorId: "<VISITOR_ID>",
  context: {
   // <CONTEXT_KEY>: <CONTEXT_KEY>,
  }
});

Let's take an example:
if you want to enable a specific feature to all your VIPs user,
you'll need to add this data as an attribute into the visitor context (key-value pair) in the visitor context: isVIP: true.
Based on your targeting criteria defined in your use-case (isVIP === true), Flagship will take the Decision and show your feature to visitors that at least contains isVIP in their context and for which isVIP is equal to true.

import { Flagship } from "@flagship.io/js-sdk";

const fsInstance = Flagship.start("<ENV_ID>", "<API_KEY>");

const fsVisitor = fsInstance.newVisitor({
  visitorId: "<VISITOR_ID>",
  isAuthenticated: true,
  hasConsented: true,
  context: {
    isVIP: true,
    country: "NL",
    loginProvider: "Google"
  }
});

import { Flagship } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

const fsInstance = Flagship.start("<ENV_ID>", "<API_KEY>");

const fsVisitor = fsInstance.newVisitor({
  visitorId: "<VISITOR_ID>",
  isAuthenticated: true,
  hasConsented: true,
  context: {
    isVIP: true,
    country: "NL",
    loginProvider: "Google"
  }
});

newVisitor function

Creates and returns a new Visitor or null if the SDK hasn't started successfully.

This method should always be called after the Flagship SDK has started.

• static newVisitor (params: INewVisitor): Visitor | null

• newVisitor (params: INewVisitor): Visitor | null

This method has only one argument with the following shape:

🚧

• When both initialCampaigns and initialModifications are provided, only initialModifications will be used.
• User context keys must have a type of string
• User context values must have a type of string, boolean, number
• User context keys and values are case sensitive

Updating the visitor context

The user context is a property dataset that defines the current user of your app. This dataset is sent and used as targeting criteria for campaign assignment.

The following method from the Visitor instance allows you to set new context values matching the given keys.

//... import code

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { age: 31, isVip: true },
});

visitor.updateContext({ lastPurchaseDate: 1615384464 });

updateContext function

Update the visitor context values, matching the given keys, used for targeting.

A new context value associated with this key will be created if there is no previous matching value.

• public updateContext(context: Record<string, string | number | boolean>): void

It has one argument :

context property

This property returns all the visitor's current context as an object

• get context () : Record<string, string | number | boolean>

clearContext function

Clear the actual visitor context

• clearContext(): void

🚧

• User context keys must have a type of string
• User context values must have a type of string, bool, numeric
• User context keys and values are case sensitive

update context with predefined keys of context

import { Flagship, DEVICE_LOCALE, OS_NAME } from "@flagship.io/js-sdk";

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { age: 31, isVip: true },
});

visitor.updateContext({
  [DEVICE_LOCALE]: "fr",
  [OS_NAME]: "Ubuntu",
});

import { Flagship, DEVICE_LOCALE, OS_NAME } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { age: 31, isVip: true },
});

visitor.updateContext({
  [DEVICE_LOCALE]: "fr",
  [OS_NAME]: "Ubuntu",
});

Learn more about predefined keys of context

Managing visitor campaigns

Synchronizing campaigns

The synchronizeModifications() method of the Visitor instance, according to Decision Mode, will either automatically call the Flagship Decision API to run campaign assignments according to the current user context and retrieve applicable modifications,
or check bucketing file, validate campaigns targeting the visitor, assign a variation and retrieve applicable modifications

These modifications are then stored in the SDK and updated asynchronously when synchronizeModifications() is called.

//... import code

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { key: "value" },
});

visitor.synchronizeModifications().then(() => {
  //ready to use all features from the SDK
});

synchronizeModifications function

In DecisionApi Mode this function calls the Flagship Decision API to run
campaign assignments according to the current user context
and retrieve applicable modifications.

In bucketing Mode, it checks bucketing file,
validates campaigns targeting the visitor,
assigns a variation and retrieve applicable modifications

• synchronizeModifications(): Promise<void>

Event listeners

The Visitor instance includes event listeners to help you handle the SDK.

//... import code

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { key: "value" },
});

visitor.on("ready", (error) => {
  if (error) {
    //do some stuff
    return;
  }
  //ready to use all features from the SDK
  //do some stuff
});

visitor.synchronizeModifications();

❗️

Before using any function from Visitor, it is important that you have listened the ready event to ensure everything is working properly and your visitor is up to date with campaigns assignment.

Getting modifications

Once the campaign has been assigned and synchronized, all the modifications are stored in the SDK. You can retrieve these modifications using the following functions from the Visitor instance:

//...import code

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { isVip: true },
});

visitor.on("ready", async (error) => {
  if (error) {
    //do some stuff
    return;
  }

  //Get flag displayVipFeature
  const modification = await visitor.getModification({
    key: "displayVipFeature",
    defaultValue: false,
    activate: false,
  });

  //do some stuff
});

visitor.synchronizeModifications();

getModification function

Retrieve a modification value by its key. If no modification match the given key or if the stored value type and default value type do not match, default value will be returned.

• getModification<T> (params: modificationsRequested<T>): Promise<T>

getModificationSync function

See getModification. But running synchronously

• getModificationSync<T> (params: modificationsRequested<T>): T

These 2 functions have one argument with the following structure:

modificationsRequested

🚧

• Default value must be one of the following type : string, number, boolean, object, array.

getModifications function

Return an object where each key corresponds to flag name and the value corresponds to the matching modification's value. If no modification match a given key or if the stored value type and default value type do not match, default value will be returned.

• getModifications<T> (params: modificationsRequested<T>[], activateAll?: boolean): Promise<Record<string, T>>

getModificationsSync function

See getModifications. But running synchronously

• getModificationsSync<T> (params: modificationsRequested<T>[], activateAll?: boolean): Record<string, T>

//... other code

const { flag1, flag2 } = await visitor.getModifications([
  {
    key: "flag1",
    defaultValue: "defaultValue",
    activate: false,
  },
  {
    key: "flag2",
    defaultValue: false,
    activate: false,
  },
]);

These 2 functions have 2 arguments:

modifications property

Return all flags for all the campaigns associated with the current visitor.

• get modifications (): Map<string, Modification>

A Modification has the following structure

Getting campaign information

You may need to send campaign IDs to a third-party for reporting and/or analytics purposes. It is possible to retrieve campaigns IDs for a specific modification key.

// import code

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { isVip: true },
});

visitor.on("ready", async (error) => {
  if (error) {
    //do some stuff
    return;
  }

  //Get flag information
  const modificationInfo = await visitor.getModificationInfo(
    "displayVipFeature"
  );

  //do some stuff
});

visitor.synchronizeModifications();

getModificationInfo function

Get the campaign Modification information value matching the given key or null if the modification is not found.

• getModificationInfo(key: string): Promise<Modification | null>

getModificationInfoSync function

See getModificationInfo. But it's running synchronously

• getModificationInfoSync(key: string): Modification | null

Activating modifications

Once a modification is displayed on the screen for a user, you must send an activate event to tell Flagship that the user has seen it.

There are 3 options for activating a modification:

1. Pass an activate=true parameter to the getModification() function
2. Pass an activateAll=true parameter to the getModifications function
3. Use the following activateModification() method from the visitor instance.

//... import code

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  context: { isVip: true },
});

visitor.on("ready", async (error) => {
  if (error) {
    //do some stuff
    return;
  }

  const modification = await visitor.getModification({
    key: "displayVipFeature",
    defaultValue: false,
    activate: true, //Pass an `activate=true` parameter
  });

  const modifications = await visitor.getModifications(
    [
      {
        key: "flag1",
        defaultValue: false,
        activate: false,
      },
      {
        key: "flag2",
        defaultValue: false,
        activate: false,
      },
    ],
    true //Pass an `activateAll=true` parameter
  );

  //or send via activateModification method
  visitor.activateModification("displayVipFeature");

  //do some stuff
});

visitor.synchronizeModifications();

activateModification function

Report this user has seen this modification.

• activateModification(key: string): Promise<void>

activateModifications function

Report this user has seen theses modifications.

• activateModifications(keys: Array<string>): Promise<void>

Managing visitor consent

The Visitor class provides a method to let you manage visitor consent for data privacy usage. When False, campaign activation and hits will be disabled.
There are 2 ways to set visitor consent :

1. Set hasConsented key to true when creating a new visitor
2. Use setConsent method of visitor instance

//... import code

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  hasConsented: true, // set hasConsented to true
  context: { isVip: true },
});

// or use setConsent method
visitor.setConsent(true);

setConsent function

Set if visitor has consented for protected data usage.

• setConsent(hasConsented: boolean): void

hasConsented property

Return True if the visitor has consented for private data usage, otherwise return False.

• hasConsented: boolean

Experience Continuity

In some situations, you may want experience consistency between an anonymous visitor and an authenticated visitor. Flagship provides the following two methods in order to help you to specify when a visitor is authenticated or not.

Authenticate

There are 2 ways to authenticate a visitor:

1. Set key isAuthenticated to true when creating a new visitor
2. Use authenticate of method of Visitor instance

Authenticate anonymous visitor

• authenticate(visitorId: string): void

Unauthenticate

This function change authenticated Visitor to anonymous visitor

• unauthenticate(): void

Code example

Let's assume basic scenario to understand how things work:

1. Your visitor arrives on your app for the first time.
   We need to initialize the visitor but as we don't known anything about this visitor, we'll create a random visitor id or let the SDK do it for us. You can also specify some visitor context if necessary.

const visitor = Flagship.newVisitor({
  context: { key: "value" },
});

We don't set visitorId property so the SDK has auto-created an id for our visitor.

Whatever how it has been set, the actual visitor id will be what we call its anonymous id.

2. Your visitor is signing in.

To tell the SDK about this change, you'll have to call authenticate function which takes a visitor id as argument.

The visitor id set in argument is required and should be an existing visitor id (that has previously seen specific campaign's modifications) in order to make the experience continuity effective.

visitor.authenticate("VISITOR_ID_ALREADY_KNOWN_BY_FLAGSHIP");

This new visitor id is what we call its authenticated id.

The visitor is updated as authenticated, keeping the previous variations from campaigns that are still matched and thus gives you same modifications as before being logged in.

📘

Keep in mind that if the visitor also has its context changed, you might still have changes on modifications as your visitor might target new campaigns.

3. Your visitor decide to sign out.

If you want to keep the same visitor experience, then you should do:

visitor.unauthenticate();

Hit Tracking

This section helps you track your users in your application and learn how to build hits in order to feed your reports. For more information about our measurement protocol, read our Universal Collect documentation.

There are five different types of Hits available:

• Page
• Screen
• Transaction
• Item
• Event

HitType

import { HitType } from "@flagship.io/js-sdk";

const page = HitType.PAGE;

import { HitType } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

const page = HitType.PAGE;

They must all be built and sent with the following function from the Visitor instance:

import { Flagship, HitType } from "@flagship.io/js-sdk";

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  hasConsented: true, // set hasConsented to true
  context: { isVip: true },
});

visitor.sendHit({
  type: HitType.PAGE,
  documentLocation: "https://localhost",
});

//or

visitor.sendHits([
  {
    type: HitType.PAGE,
    documentLocation: "https://localhost",
  },
  {
    type: HitType.SCREEN,
    documentLocation: "home",
  },
]);

import { Flagship, HitType } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

Flagship.start("your_env_id", "your_api_key");

const visitor = Flagship.newVisitor({
  visitorId: "your_visitor_id",
  hasConsented: true, // set hasConsented to true
  context: { isVip: true },
});

visitor.sendHit({
  type: HitType.PAGE,
  documentLocation: "https://localhost",
});

//or

visitor.sendHits([
  {
    type: HitType.PAGE,
    documentLocation: "https://localhost",
  },
  {
    type: HitType.SCREEN,
    documentLocation: "home",
  },
]);

sendHit function

Send Hit to Flagship servers for reporting.

• sendHit (hit: IHit): Promise<void>

sendHits function

Send Hits to Flagship servers for reporting.

• sendHits (hits: IHit[]): Promise<void>

Hit common optional parameters

import { HitType } from "@flagship.io/js-sdk";

visitor.sendHit({
  type: HitType.PAGE,
  documentLocation: "https://localhost",
  userIp: "127.0.0.1",
  screenResolution: "800X600",
  locale: "fr",
  sessionNumber: "1234",
});

import { HitType } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

visitor.sendHit({
  type: HitType.PAGE,
  documentLocation: "https://localhost",
  userIp: "127.0.0.1",
  screenResolution: "800X600",
  locale: "fr",
  sessionNumber: "1234",
});

Page

This hit should be sent each time a visitor arrives on a new page.

import { HitType } from "@flagship.io/js-sdk";

visitor.sendHit({
  type: HitType.PAGE, //or "PAGEVIEW"
  documentLocation: "https://www.my_domain_com/my_page",
});

import { HitType } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

visitor.sendHit({
  type: HitType.PAGE, //or "PAGEVIEW"
  documentLocation: "https://www.my_domain_com/my_page",
});

• A hit of type Page has this following structure:

Screen

This hit should be sent each time a visitor arrives on an interface on client side.

import { HitType } from "@flagship.io/js-sdk";

visitor.sendHit({
  type: HitType.SCREEN, //or "SCREENVIEW"
  documentLocation: "home_screen",
});

import { HitType } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

visitor.sendHit({
  type: HitType.SCREEN, //or "SCREENVIEW"
  documentLocation: "home_screen",
});

• A hit of type Screen has this following structure:

Transaction

This hit should be sent when a user complete a Transaction.

import { HitType } from "@flagship.io/js-sdk";

visitor.sendHit({
  type: HitType.TRANSACTION, //or "TRANSACTION"
  transactionId: "#12345",
  affiliation: "affiliation",
  taxes: 19.99,
  currency: "USD",
  couponCode: "code",
  itemCount: 1,
  shippingMethod: "road",
  shippingCosts: 5,
  paymentMethod: "credit_card",
  totalRevenue: "199.99",
});

import { HitType } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

visitor.sendHit({
  type: HitType.TRANSACTION, //or "TRANSACTION"
  transactionId: "#12345",
  affiliation: "affiliation",
  taxes: 19.99,
  currency: "USD",
  couponCode: "code",
  itemCount: 1,
  shippingMethod: "road",
  shippingCosts: 5,
  paymentMethod: "credit_card",
  totalRevenue: "199.99",
});

A hit of type TRANSACTION has this following structure:

Item

This hit is used to link an item with a transaction. It must be sent after the corresponding transaction hit.

import { HitType } from "@flagship.io/js-sdk";

visitor.sendHit({
  type: HitType.ITEM, //or "ITEM"
  transactionId: "#12345",
  productName: "product",
  productSku: "sku123",
  itemPrice: 199.99,
  itemQuantity: 1,
  itemCategory: "test",
});

import { HitType } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

visitor.sendHit({
  type: HitType.ITEM, //or "ITEM"
  transactionId: "#12345",
  productName: "product",
  productSku: "sku123",
  itemPrice: 199.99,
  itemQuantity: 1,
  itemCategory: "test",
});

A hit of type ITEM has this following structure:

📘

The Item hit isn't available yet in the Flagship reporting view.

Event

This hit can be used for any event (e.g. Add To Cart click, newsletter subscription).

import { HitType, EventCategory } from "@flagship.io/js-sdk";

visitor.sendHit({
  type: HitType.EVENT, //or "EVENT"
  category: EventCategory.USER_ENGAGEMENT, // or EventCategory.ACTION_TRACKING
  eventLabel: "label",
  eventValue: 100,
});

import { HitType, EventCategory } from "https://deno.land/x/flagship_io_js_sdk/mod.ts";

visitor.sendHit({
  type: HitType.EVENT, //or "EVENT"
  category: EventCategory.USER_ENGAGEMENT, // or EventCategory.ACTION_TRACKING
  eventLabel: "label",
  eventValue: 100,
});

A hit of type EVENT has this following structure:

Managing visitor cache

The aims of the cache management is the response to the following problematic:

• Re-allocation in bucketing mode :

In bucketing mode, the SDK will always keep visitor in variation where he was allocated first, in case of the customer or the dynamic allocation has changed the traffic allocation. Indeed in bucketing mode the assignation is made on local device so changing campaign allocation in the platform would make visitors to see different campaigns.

• Handle offline mode on client side :

With the cache enabled, the SDK will try to retrieve the latest visitor data (campaign assignations) from the cache, also will save all the failed hits and activateModification in order to resend them later.

By default the Flagship JS SDK provide a default cache manager implementation. It is possible to use your own cache manager by implementing the intefaces IVisitorCacheImplementation and IHitCacheImplementation.

Visitor Cache

The visitor cache is used to store the visitor data in a database through the IVisitorCacheImplementation interface which defines the methods that an object must implement in order to handle it.

interface IVisitorCacheImplementation {
  cacheVisitor: (visitorId: string, Data: VisitorSaveCacheDTO) => void;
  lookupVisitor(visitorId: string): VisitorLookupCacheDTO;
  flushVisitor(visitorId: string): void;
}

cacheVisitor function

This method is called when the SDK needs to cache visitor information in your database.

• public cacheVisitor(visitorId: string, Data: object):void

It has 2 arguments :

lookupVisitor function

This method is called when the SDK needs to get the visitor information corresponding to visitor ID from your database.

It has to return an object of type VisitorLookupCacheDTO which follows this shape see.

• public lookupVisitor(visitorId: string): object

It has one argument :

flushVisitor function

This method is called when the SDK needs to erase the visitor information corresponding to visitor ID in your database.

It will be called every time setConsent get false.

• public flushVisitor(visitorId: string): void

It has one argument :

📘

• flushVisitor method will be called every time setConsent get false.

VisitorSaveCacheDTO

type VisitorSaveCacheDTO = {
  version: number;
  data: {
    visitorId: string;
    anonymousId: string | null;
    consent: boolean;
    context: Record<string, primitive>;
    campaigns: Array<{
      campaignId: string;
      variationGroupId: string;
      variationId: string;
      isReference?: boolean;
      type: string;
      activated: boolean;
      flags: Record<string, unknown>;
    }>;
  };
};

VisitorLookupCacheDTO

type VisitorLookupCacheDTO = {
  version: number;
  data: {
    visitorId: string;
    anonymousId: string | null;
    consent?: boolean;
    context?: Record<string, primitive>;
    campaigns?: Array<{
      campaignId: string;
      variationGroupId: string;
      variationId: string;
      isReference?: boolean;
      type: string;
      activated?: boolean;
      flags?: Record<string, unknown>;
    }>;
  };
};

Hit Cache

The hit cache is used to store the failed hits and activateModification in your database through the IHitCacheImplementation interface which defines the methods that an object must implement in order to handle it.

interface IHitCacheImplementation {
  cacheHit(visitorId: string, data: HitCacheSaveDTO): void;
  lookupHits(visitorId: string): HitCacheLookupDTO;
  flushHits(visitorId: string): void;
}

cacheHit function

This method will be called to cache visitor hits when a hit has failed to be sent if there is no internet, there has been a timeout or if the request responded with something > 2XX.

• public cacheHit(visitorId: string, data: object):void

It has 2 arguments :

lookupHits function

This method will be called to load hits corresponding to visitor ID from your database and trying to send them again in the background.

It has to return an object of type HitCacheLookupDTO which follows this shape see.

• public lookupHits(visitorId: string):object

It has one argument :

flushHits function

This method will be called to erase the visitor hits cache corresponding to visitor ID from your database.

NOTE: It will be called every time setConsent get false.

• public flushHits(visitorId: string):void

It has one argument :

HitCacheSaveDTO

type HitCacheSaveDTO = {
  version: number;
  data: {
    visitorId: string;
    anonymousId: string | null;
    type: HitType | "ACTIVATE";
    time: number;
    content: Record<string, unknown>;
  };
};

HitCacheLookupDTO

type HitCacheLookupDTO = {
  version: number;
  data: {
    visitorId: string;
    anonymousId: string | null;
    type: HitType | "ACTIVATE";
    time: number;
    content?: Record<string, unknown>;
  };
};

📘

• flushHits method will be called every time setConsent get false.
• After lookupHits has returned the visitor hits information corresponding to visitor ID, this data must be deleted from persistent storage.
• Hits older than 4H will be ignored during the resending process.

API reference

Flagship class

• start
• newVisitor

Visitor class

• updateContext
• context
• clearContext
• synchronizeModifications
• Event listeners
• modifications
• getModification
• getModificationSync
• getModifications
• getModificationsSync
• getModificationInfo
• getModificationInfoSync
• activateModification
• activateModifications
• setConsent
• hasConsented
• Authenticate
• Unauthenticate
• sendHit
• sendHits

Release notes

2.3.1-beta.10

• Managing visitor cache

2.3.1-alpha.0

Fixed

• webpack minify issue

2.3.0-alpha.0

Added

• SDK Status / Status changed callback.
• Visitor consent.
• Predefined context.
• Visitor.clearContext
• Visitor.getModification
• Visitor.getModificationSync and getModificationsSync in order to run synchronously
• Visitor.getModificationInfoSync
• Custom log manager

Changed

• Flagship.newVisitor signature.
• Visitor.sendHit and Visitor.sendHits signature
• Visitor.activateModifications signature

Removed

• Flagship.startBucketingPolling method
• Flagship.stopBucketingPolling method

Appendix

Predefined user context keys :

The Flagship SDK contains predefined user context keys.

The keys marked as Yes in the Auto-set by SDK column will be automatically set, while the ones marked as No need to be set by customer.

You can overwrite these keys at any time. The keys-value pairs will be sent to the server in the user context and can be edited in the Persona section of the Flagship platform.

📘

To overwrite the keys, use the updateContext method