# Web

### Initializing the Apxor SDK

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

```javascript
import Apxor from "apxor"; // ES6

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

#### Initialization options <a href="#initialization-options" id="initialization-options"></a>

* **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 <support@apxor.com> to get your unique SITE\_ID

***

### Identifying Users <a href="#userid" id="userid"></a>

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 :

```javascript
Apxor.setUserId(String);
```

Example:

```javascript
Apxor.setUserId("user@example.com");
```

***

### Setting up campaign triggers, capturing data for targeting and goal tracking[​](http://localhost:3000/docs/android-sdk/Tracking#setting-up-campaign-triggerscapturing-data-for-targetting-and-goal-tracking) <a href="#setting-up-campaign-triggerscapturing-data-for-targetting-and-goal-tracking" id="setting-up-campaign-triggerscapturing-data-for-targetting-and-goal-tracking"></a>

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 :

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FO0IyF5MCgJqDjDZFaMhk%2FScenario.png?alt=media&#x26;token=d58b91d7-a239-4f33-90bf-fa2fc3511724" alt=""><figcaption></figcaption></figure>

### App Events <a href="#app-events" id="app-events"></a>

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:

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FsPezIDe2pRzYYolpCwpA%2FEvents.png?alt=media&#x26;token=0fb7a53a-6777-45e7-a675-ca07c15ac434" alt=""><figcaption></figcaption></figure>

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:

```javascript
Apxor.logEvent(eventName, eventProperties, forceReport);
```

Example:

```javascript
Apxor.logEvent("ADD_TO_CART", {
  userId: "user@example.com",
  value: 1299,
  item: "Sony Head Phone 1201",
});
```

#### Immediate Reporting of an event <a href="#immediate-reporting-of-an-event" id="immediate-reporting-of-an-event"></a>

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.

```javascript
Apxor.logEvent(
  "BEFORE_REFRESH",
  {
    userId: "user@example.com",
    value: 123,
  },
  true
);
```

### Client Events <a href="#client-events" id="client-events"></a>

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

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.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FKAKGQ9qyAeizA7J0nQxA%2FTrackUIInteractions.png?alt=media&#x26;token=81d59224-d3f0-4775-9e85-a38ca29cf236" alt=""><figcaption></figcaption></figure>

> Example:
>
> Soft back button, user reaching end of page, etc.

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

### Event tracking via Google Tag Manager (GTM) <a href="#event-tracking-via-google-tag-manager-gtm" id="event-tracking-via-google-tag-manager-gtm"></a>

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.

![](https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2FMSBPGrFwaQgsAqSLaz1U%2FWebSDK-%20GTM.png?alt=media\&token=75646a3f-47e0-4947-bb2c-95c67091187b)

### User Properties <a href="#user-properties" id="user-properties"></a>

#### Personalizing and targeting by user persona[​](http://localhost:3000/docs/android-sdk/Tracking#personalising-and-targetting-by-user-persona) <a href="#personalising-and-targetting-by-user-persona" id="personalising-and-targetting-by-user-persona"></a>

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

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

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.

<figure><img src="https://300211688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQuYbJ9bg7CFtrBaVp9pB%2Fuploads%2F087vKxZUNxLzTIjzrLd6%2FUserProperties.png?alt=media&#x26;token=abec42df-d497-4529-a9a5-c8961151f279" alt=""><figcaption></figcaption></figure>

This is how you log user information to Apxor :

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

Example:

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

***

### Session Properties <a href="#session-properties" id="session-properties"></a>

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:

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

Example:

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

***

### PageView <a href="#pageview" id="pageview"></a>

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

Usage:

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

Example:

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

***

### Get Client Id <a href="#get-client-id" id="get-client-id"></a>

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

Example:

```javascript
const clientId = Apxor.getClientId();
```

***

### Start New Session <a href="#start-new-session" id="start-new-session"></a>

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

```javascript
Apxor.startNewSession();
```

***

### End Session <a href="#end-session" id="end-session"></a>

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

```javascript
Apxor.endSession();
```

***

### Handle Deeplink Redirection <a href="#handle-deeplink-redirection" id="handle-deeplink-redirection"></a>

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 <a href="#example" id="example"></a>

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

### Yeah! You are ready to create your first [Campaign](https://guides.apxor.com/product-guides/create-a-campaign/mobile) or [Survey](https://guides.apxor.com/product-guides/create-a-survey/legacy)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guides.apxor.com/getting-started-with-apxor/api-guides/web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
