Web npm based

Apxor Web SDK Integration

Check here the latest release notes.

Add and Initialize Apxor SDK and Plugins

You can find the description and default values for Initialization options here

• Run the following command in your terminal to add Apxor SDK and plugins into your Website

npm install --save apxor apxor-qe apxor-rtm

• Add the following import statements in application root component or page to make sure that these two packages will be bundled when you build your Website

import Apxor from "apxor"; //ES6
import CE from "apxor-qe";
import ApxorRTM from "apxor-rtm";

• Add the following values in Initialization option's plugin and deps array

Apxor.init("YOUR_SITE_ID", {
  // ...
  plugins: ["ApxorRTM"],
  deps: [ApxorRTM, CE],
  version: "<YOUR_WEBSITE_VERSION>", // Optional (If provided, use semantic version eg. "1.4.4")
  // ...
});

Note

Contact [e-mail] to get your unique SITE_ID

Tracking Events and Pages

Add-Ons

Initializing the Apxor SDK

To start tracking with the Apxor SDK, you must first initialize it with your project token. To initialize the SDK,

import Apxor from "apxor"; // ES6

Apxor.init("YOUR_SITE_ID", {
  // Initialization options
});

Initialization options

• honorDNT: boolean [false]

  If this flag is set to TRUE and users enable the doNotTrack in their browser settings, the SDK won't be initialized. Default Value is FALSE

• idle_time_out: number(seconds) [3600]

  Tells SDK that when to create new session when users are idle for the configured amount of time. Default value is 3600 seconds (1 hour)

• plugins: []

  Indicates what plugins needs to be initialized when SDK initializes. Default value is []

• deps: []

  To make sure the packages to be bundled when you build your application. Default value is []

• version: string [ALL]

  Helps you to undestand the events based on a specific version that you set. Default value is ALL

Note:

Contact [e-mail] to get your unique SITE_ID

---

Identifying Users

The Apxor SDK automatically captures device IDs and this is used to identify users uniquely by Apxor. Apart from this, you can log a custom user identifier that you use to uniquely identify users in your app.

This identifier would be very instrumental especially when exporting data of a certain campaign or survey to your analytics system to create a cohort and measure the results of the campaign.

Similarly, when you are importing data to Apxor from your system that your marketing/product / data science team has identified and wants to run campaigns specifically to them the custom user identifier will serve as the bridge to communicate between your systems and Apxor effectively.

Here is how you can set your user identifier for Apxor to recognize your users :

Apxor.setUserId(String);

Example:

Apxor.setUserId("[e-mail]");

---

Setting up campaign triggers, capturing data for targeting and goal tracking​

The product/marketing or the growth team lists out the use cases with an idea of when to launch and to whom to launch. To do this we need to capture data in the form of events. Let us consider the following use case as an example :

App Events

In the above scenario, we want to trigger the campaign for users who have spent 'x' seconds and haven't tapped on a product. To understand that if the user has tapped the product we should log an event along with its attributes as follows to capture data:

Similarly if you want to send promotions to users who have viewed at least five products of the category shoes in the last three days or you want to measure how many people added an item to a cart from the campaign as a goal all this information is captured in the form of events.

These types of events are classified as app events - the data that is transferred to the servers at Apxor where you can segment users based on historic behavior or measure your goals as specified above.

Here is how we track app events:

Apxor.logEvent(eventName, eventProperties, forceReport);

Example:

Apxor.logEvent("ADD_TO_CART", {
  userId: "[e-mail]",
  value: 1299,
  item: "Sony Head Phone 1201",
});

Immediate Reporting of an event

forceReport is an optional parameter with default value false sent to Apxor.logEvent API. Send forceReport as true if the event has to be immediately reported to Apxor. Use it only in specific cases. For example if the event has to be logged just before the browser refresh, use the forceReport flag.

Apxor.logEvent(
  "BEFORE_REFRESH",
  {
    userId: "[e-mail]",
    value: 123,
  },
  true
);

Client Events

In the below scenario, let's assume you want to launch a survey when the soft back button is pressed asking the user for product feedback. In this, we don't need to capture the data of how many people pressed the back button which is useless and it bloats your event storage as it is a high-frequency event which increases your cost unnecessarily. This data point doesn't potentially answer any of your product questions and hence there is no ROI in storing data from this event.

So for such scenarios where we need the behavioral data to launch a campaign or to collect feedback, which doesn't provide ROI on storing for measuring goals, answering your product questions or segmenting your target audience, we log these events as Client Events which involves zero transfer of data and is used only to set up your triggers on behavioral information from the user.

Example:

Soft back button, user reaching end of page, etc.

let additionalInfo = {
  page: "/index.html",
};
Apxor.logClientEvent("SoftBackPressed", additionalInfo);

Event tracking via Google Tag Manager (GTM)

You can also place the above function as a Custom HTML Tag inside GTM. This Tag can be fired once per event and triggered on the elements where you wish to track website events. The event attributes can be picked up from GTM Data Layer.

User Properties

Personalizing and targeting by user persona​

We can personalize the messaging copy in the experiences we build for the user or target based on his persona using information that is centric to individual users. Let us consider the following example where we know the user is an English with Gold membership.

This information helps to tailor content in English to that specific user and gives us the flexibility to different messaging to different membership tiers. This is how the information captured here is used for segmenting.

Similarly capturing attributes like Name can help to personalize your message copy where it reads Hi {username} can't find your product? where the username is replaced by the attribute value of the property from the nudges dashboard along with providing meaningful defaults in their absence.

This is how you log user information to Apxor :

Apxor.setUserProperties({
  userProperty1: "value1",
  userProperty2: "value2",
});

Example:

Apxor.setUserProperties({
  gender: "Male",
  age: 24,
  isPaidUser: true,
  creditsLeft: 250,
});

---

Session Properties

A Session can be simply defined as user journey as he opens the app, until he closes the app. There can be various pieces of information that be very impactful when accumulated in a session. For example, location in a session can be useful to know exactly where, the user is utilizing the app most.

Usage:

Apxor.setSessionProperties({
  property1: "value1",
  property2: "value2",
});

Example:

Apxor.setSessionProperties({
  language: "en",
  location: "Hyderabad",
});

---

PageView

You can log a page view event when users navigate through your website

Usage:

Apxor.logPageView(String); //String URL pathname

Example:

Apxor.logPageView("/about.html");

---

Get Client Id

Apxor SDK maintains a unique ID for every user. To get the Apxor Device ID, use below

Example:

const clientId = Apxor.getClientId();

---

Start New Session

Starts new session if there is no active session. If a session is already in progress, it acts as a no-op

Apxor.startNewSession();

---

End Session

Ends the active session if any active session in progress. After this call, none of the Apxor APIs work, except startNewSession() API.

Apxor.endSession();

---

Handle Deeplink Redirection

For single page websites built with React/Angular/Vue, you need to handle the internal redirection on your own by using the setRedirectionHandler method.

Example

Apxor.setRedirectionHandler((url) => {
  // Interpret the URL and redirect user to the specific URL
});

Yeah! You are ready to create your first Campaign or Survey

Additional features API Guide

Click here for guides to log user properties, events and event properties.