Web Tracker SDK (SDK)
The SDK can be used to track user activity on the site using standard and customized events. You can send multiple events from the same page and include customized data. SDK should be installed on all pages of the site ( not applicable to SPA applications ) including all pages that are targeted (basket, check out, subscription, and other conversion pages), as well as inside each banner if they are uploaded to iframe.
Before you start
You should have the following paramters to initialize the SDK. If you don't - please ask the technical team to provide it.
partnerId
- Identifactor of client in advertising system.baseURL
- API URL of advertising system. For example: https://test.com/.SDK URL
- URL for importing SDK into the web application (website). For example: https://test-sdk.com/wc.js.
Initialization
To use SDK you must first initialize the code on the site. After that you can register certain activities on the site.
The initialization of the library is performed by the developer by calling the method WebTracker.init()
.
import WebTracker from 'SDK_URL';
WebTracker.init({ partnerId: 'partnerId', sessionId: 'sessionId', baseUrl: 'http://localhost:5173' });
type InitParams = {
baseUrl: string;
partnerId: string;
sessionId: string;
uid?: string;
bundle?: string;
nonBounceTimeout?: number;
visitTimeout?: number;
debug?: boolean;
};
type Init = (params: InitParams) => void;
baseURL
- issued to you URL API advertising system (see above). For example:https://test.com/
.partnerId
- issued to you unique client identificator. For example:bfd0620a5017d1362431aea6c1d6e504
sessionId
- Unique session id determining the current application session. For example:bfd0620a5017d1362431aea6c1d6e504
.uid
- (optional) user unique id. The identifier can be an email hash or a user-specified phone number when registering. For example:bfd0620a5017d1362431aea6c1d6e504
.debug
- (optional) flag, which includes recording of debugging information in console.log. Default value isfalse
.bundle
- (optional) string identificator of the application if there are several of them for the same client.nonBounceTimeout
- (optional) timeout at which we believe the user is real and using the application.visitTimeout
- (optional) the time interval that determines the minimum period of inactivity of the user between his visits to the application.
Initialization via Google Tag Manager
- Open Google Tag Manager.
- Select the container of your site and click Add a new tag.
- Click Custom HTML Tag.
- Input the name of your site.
- Paste initialization code of SDK (see above) into the HTML container in Google Tag Manager.
- Click the drop-down list Advanced Settings and select Once per page in the section Tag firing options.
- In the section Fire On select All Pages.
- Click Create Tag.
User ID (UID)
User in your app can be the following status:
- anonymous - your application has open public functionality, and it does not require user authorization to access that part of the functionality.
- authorized - the user must have an account and be authorized to access some functionality in your app.
The SDK provides a setUserId
function, which allows you to set the user ID of the authenticated user. Use this function to set the value of uid
for each successful user authentication attempt in your application.
INFO
This function is similar to the field uid
in the init
function. If the application does not already have user information at the time of the init
function call, then this information can be passed later on via the setUserId
function.
<div id="placement_id" class="placement"></div>
<script type="module">
import WebTracker from 'SDK_URL';
// Call without uid field
WebTracker.init({
baseUrl: 'https://test.com/',
sessionId: 'bfd0620a5017d1362431aea6c1d6e504',
});
// Later on SignIn action call the setUserId function
WebTracker.setUserId('testUID');
</script>
export type SetUserId = (uid: string) => void;
uid
- (required) Unique user ID, authorized in your mobile app.
Tracking user activities
After we have completed the initialization of the SDK, you can add events to track certain activities of visitors to the site.
The SDK code initiates the default event page_view, which allows you to create customized audiences that match the referral URL. The list of all events available for monitoring is given below, listing their options. To track user events you need to use the following function:
WebTracker.track('event_type', { event_values });
where event_type is the string name of the event type, and { event_values } is the set of «key:value» pairs corresponding to the specified event.
How to Configure Site Event Tracking
In order to independently configure event tracking, it is necessary to include the base code when loading the page, and after it - call function track
. :
<script type="module">
WebTracker.track('purchase', [
{
sku: {
skuId: '1',
skuName: 'Lego',
price: 35,
currency: 'RUB',
},
quantity: 2.0,
category: [
{
categoryId: 1,
categoryName: 'Category Name',
children: [
{
categoryId: 11,
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
]);
</script>
Dynamic Events by pressing buttons
Dynamic events allow you trigger events when users performs a specific action on the page (not only on the page load which is done automatically).
For example, by pressing «Add to Cart» you can activate add_to_cart. To do this, you need to make SDK register the event add_to_cart when you press the button «Add to Cart». This may look like:
<!-- Somewhere there is a button that performs Add to Cart -->
<button id="addToCartButton">Add To Cart</button>
<!-- Add SDK Events to the button's click handler -->
<script type="text/javascript">
const el = document.getElementById("addToCartButton");
el.addEventListener("click", () => {
WebTracker.track("add_to_cart", [
{
sku: {
skuId: "1",
skuName: "Lego",
price: 35,
currency: "RUB",
},
deltaQuantity: 1.0,
quantity: 2.0,
category: [{
categoryId: 1,
categoryName "Toys",
children: [{
categoryId: 11,
categoryName "Kids",
}]
}],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
}
},
{
sku: {
skuId: "2",
skuName: "Lego2",
price: 35,
currency: "RUB",
},
deltaQuantity: 1.0,
quantity: 2.0,
category: [{
categoryId: 1,
categoryName "Toys",
children: [{
categoryId: 11,
categoryName "Kids",
}]
}],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
}
},
]);
});
</script>
It is worth noting that there are many ways to handle a click event. This code cannot be used in its current form because it requires a selector to bind to a button, and it is necessary to add successful and error handlers to enable users to continue in case of an error.
Dynamic events based on element visibility
Let’s say we need to measure whether the user has read the content to the right place or not. In this case, the user is expected to scroll the content to a specific location.
Example page content:
<!DOCTYPE html>
<html>
<head>
<!-- SDK base code is HERE-->
</head>
<body>
<h1>Read Page until the <b>stop_view</b> event is fired</h1>
<div style="height: 120vh; width: 100vw; background-color: #00f;"></div>
<h1 id="fire-tracker_viewing">VIEWING Event will fire when this phrase enters the screen</h1>
<div style="height: 120vh; width: 100vw; background-color: #000;"></div>
<h1 id="fire-tracker_stop">STOP_VIEW Event will fire when this phrase enters the screen</h1>
</body>
</html>
When the elements id="fire-tracker_viewing" and id="fire-tracker_stop" appear on the user’s screen we should generate relevant events in the SDK. To check the visibility of the element, use the code below:
// This code should be loaded together with SDK
const executeWhenElementIsVisible = function (dom_element, callback) {
if (!(dom_element instanceof HTMLElement)) {
console.error('dom_element must be a valid HTMLElement');
}
if (typeof callback !== 'function') {
console.error('Second parameter must be a function, got', typeof callback, 'instead');
}
function isOnViewport(elem) {
const rect = elem.getBoundingClientRect();
const docElem = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
rect.right <= (window.innerWidth || docElem.clientWidth)
);
}
const executeCallback = (function () {
const wasExecuted = false;
return function () {
if (!wasExecuted && isOnViewport(dom_element)) {
wasExecuted = true;
callback();
}
};
})();
window.addEventListener('scroll', executeCallback, false);
};
After that, we need to determine how to call the corresponding events (viewingand stop_view) when an item appears on the page:
// Get the element that should be visible to trigger the tracking fire
var start_view_element = document.getElementById('fire-tracker_start');
var stop_view_element = document.getElementById('fire-tracker_stop');
// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, () => {
WebTracker.track('start_view', [
{
contentId: '1',
contentName: 'Lego',
sku: {
skuId: '1',
skuName: 'Lego',
price: 35,
currency: 'RUB',
},
category: [
{
categoryId: 1,
categoryName: 'Category Name',
children: [
{
categoryId: 11,
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
]);
});
executeWhenElementIsVisible(element, () => {
WebTracker.track('stop_view', [
{
value: 0.6,
contentId: '1',
contentName: 'Lego',
sku: {
skuId: '1',
skuName: 'Lego',
price: 35,
currency: 'RUB',
},
category: [
{
categoryId: 1,
categoryName: 'Category Name',
children: [
{
categoryId: 11,
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
]);
});
Event Tracking via Google Tag Manager (Google Tag Manager)
- First create a new customized HTML tag (Custom HTML Tag).
- Enter the tag name and paste the code fragment related to the event, as well as other variables you want to track in the Configure Tag. Remember that the real variables may differ from the example below. Replace PARTNER_ID and parameters with the required data.
<script type="module">
WebTracker.track('search', {
value: 'Pampers',
filter: {
age: ['0-1', '1-3'],
sex: ['m'],
},
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
});
</script>
- In the section Advanced Settings, select Once per event in the section Tag firing options.
- In the section Tag Sequencing, tick the box and select the base code tag to trigger it after the base code.
- In the section Fire On select the activator that is suitable for your site.
- Click Create Tag.
- In the same way, create tags for other events on your website (for example, to add to the shopping cart or to buy).
- When you are done creating tags, press Publish to activate tags.
Standard events
You can track the following events:
- AddToCart - the user adding product items to the shopping cart in the application
- Purchase - the user purchases goods in the system
- StartView - the user starts viewing the product card
- StopView - the user ends of viewing content
- Click - the user clicks on a significant element/advertising block in the application (links, buttons, product card in the product list, etc.)
- Search - the user searches some content in application (for example, search for a product)
- AdImp - viewing advertising content by the user
- AdClick - click on advertising content by user
- Scroll - the user scrolled the content page
Add to cart product
- Trigger: the user adding product items to the shopping cart in the application.
- Payload: the list of product items that are added to the shopping cart.
WebTracker.track('add_to_cart', [
{
sku: {
skuId: '1',
skuName: 'Lego',
price: 35,
currency: 'RUB',
},
deltaQuantity: 1.0,
quantity: 2.0,
category: [
{
categoryId: 1,
categoryName: 'Category Name',
children: [
{
categoryId: 11,
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
{
sku: {
skuId: '2',
skuName: 'Doll',
price: 35,
currency: 'RUB',
},
deltaQuantity: 1.0,
quantity: 2.0,
category: [
{
categoryId: 1,
categoryName: 'Category Name',
children: [
{
categoryId: 11,
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
]);
type AddToCart = {
sku: SKU;
deltaQuantity: number;
quantity: number;
category?: Category[];
customParams?: Record<string, string>;
};
sku
- a group of the fields that describe the product's SKU data (see SKU)quantity
- the quantity of the productdeltaQuantity
- the difference (increment or decrement) between the new and current quantity of the productcategory
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
Purchase product
- Trigger: the user purchases goods in the system.
- Payload: the list of product objects that are purchased by the user
WebTracker.track('purchase', [
{
sku: {
skuId: '1',
skuName: 'Lego',
price: 35,
currency: 'RUB',
},
quantity: 2.0,
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
{
sku: {
skuId: '2',
skuName: 'Doll',
price: 35,
currency: 'RUB',
},
quantity: 2.0,
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
]);
type Purchase = {
sku: SKU;
quantity: number;
category?: Category[];
customParams?: Record<string, string>;
};
sku
- a group of the fields that describe the product's SKU data (see SKU)quantity
- the quantity of the productcategory
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
Start viewing content
- Trigger: the user starts viewing the product card.
- Payload: the list of content objects that are viewed by the user&.
WARNING
If the current content being viewed is a catalog page (for example, a list of product teasers), then DO NOT send a view event for each teaser of other content/product presented in that catalog. The view content event must be sent once and only for the catalog itself.
WebTracker.track('start_view', [
{
contentId: '1',
contentName: 'Lego',
sku: {
skuId: '1',
skuName: 'Lego',
price: 35,
currency: 'RUB',
},
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
{
contentId: '2',
contentName: 'Doll',
sku: {
skuId: '2',
skuName: 'Doll',
price: 35,
currency: 'RUB',
},
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
]);
type StartView = {
contentId: string;
contentName: string;
sku?: SKU;
category?: Category[];
customParams?: Record<string, string>;
};
contentId
- the unique identifier of the content being viewed. By default, the content URL is assumed, if such a division into identifiers is not possible, then any other ideograph clearly distinguishes one viewed content from another.contentName
- name of the content being viewedsku
- (optional) a group of the fields that describe the product's SKU data (see SKU)category
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
End viewing content
- Trigger: the user ends of viewing content.
- Payload: the list of content objects that were viewed by the user.
WARNING
If the current content being viewed is a catalog page (for example, a list of product teasers), then DO NOT send a view event for each teaser of other content/product presented in that catalog. The view content event must be sent once and only for the catalog itself.
WebTracker.track('stop_view', [
{
contentId: '2',
contentName: 'Lego',
value: 0.5,
sku: {
skuId: '1',
skuName: 'Lego',
price: 35,
currency: 'RUB',
},
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
{
contentId: '1',
contentName: 'Doll',
value: 0.6,
sku: {
skuId: '2',
skuName: 'Doll',
price: 35,
currency: 'RUB',
},
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
},
]);
type StopView = {
contentId: string;
contentName: string;
value: number;
sku?: SKU;
category?: Category[];
customParams?: Record<string, string>;
};
value
- a value between 0 and 1 that describes how much content was viewed in percentagecontentId
- the unique identifier of the content being viewed. By default, the content URL is assumed, if such a division into identifiers is not possible, then any other ideograph clearly distinguishes one viewed content from another.contentName
- name of the content being viewedsku
- (optional) a group of the fields that describe the product's SKU data (see SKU)category
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
Viewing content
DANGER
DEPRECATED
- Trigger: the user continues viewing the content.
- Payload: the list of content objects that were viewed by the user.
[
{
id: '2',
name: 'Lego',
category: 'Toys',
subcategory: 'Kids',
value: 1,
},
{
id: 2,
name: 'Doll',
category: 'Toys',
subcategory: 'Kids',
value: 0.6,
},
];
value
- a value between 0 and 1 that describes how much content was viewed in percentagecontentId
- the unique identifier of the content being viewed. By default, the content URL is assumed, if such a division into identifiers is not possible, then any other ideograph clearly distinguishes one viewed content from another.contentName
- name of the content being viewedsku
- (optional) a group of the fields that describe the product's SKU data (see SKU)category
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
Click on a significant element
- Trigger: the user clicks on a significant element/advertising block in the application ( links, buttons, product card in the product list, etc.).
- Payload: the object with a description of which element was clicked ( url for external links ).
TIP
If clicking an item is similar to any of the specialized events, it is better to use a specialized event. For example, to observe the click on the product cart buttons, you must use the event type Add to cart / Purchase .
WebTracker.track('click', {
value: 'start registration',
contentId: '1',
contentName: 'Doll',
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
sku: {
skuId: '2',
skuName: 'Doll',
price: 35,
currency: 'RUB',
},
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
});
type Click = {
value: string;
contentId: string;
contentName: string;
sku?: SKU;
category?: Category[];
customParams?: Record<string, string>;
};
value - a string with a description of which element was clicked ( url for external links ).
value
- a string with a description of which element was clicked ( url for external links ).contentId
- (optional) the unique identifier of the content being viewed. By default, the content URL is assumed, if such a division into identifiers is not possible, then any other ideograph clearly distinguishes one viewed content from another.contentName
- (optional) name of the content being viewedsku
- (optional) a group of the fields that describe the product's SKU data (see SKU)category
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
Search content
- Trigger: the user searches some content in application (for example, search for a product).
- Payload: the object with the search phrase value
WebTracker.track('search', {
value: 'Pampers',
filter: {
age: ['0-1', '1-3'],
sex: ['m'],
},
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
});
type Search = {
value: string;
filter?: Record<string, string[]>;
customParams?: Record<string, string>;
};
value
- search phrasefilter
- (optional) search filterscustomParams
- (optional) custom parameters
Display the advertising banner
- Trigger: viewing advertising content by the user.
- Payload: the object with description of the advertising block, which was viewed by the user.
WebTracker.track('ad_imp', {
placementId: '1',
width: 240,
height: 300,
clickURL: 'https://test.com',
adType: 'banner',
contentId: '2',
contentName: 'Doll',
sku: {
skuId: '2',
skuName: 'Doll',
price: 35,
currency: 'RUB',
},
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
});
type AdImp = {
placementId: string;
width: number;
height: number;
clickURL: string;
adType: 'banner' | 'video' | 'native' | 'product' | 'reach_media' | 'other';
contentId?: string;
contentNam?: string;
sku?: SKU;
category?: Category[];
customParams?: Record<string, string>;
};
placementId
- placement unique identifierwidth
- width of ad placementheight
- height of ad placementclickURL
- URL address that is linked to the the advertising blockadType
- the type of advertising on which the user clicks (see types section)contentId
- (optional) the unique identifier of the content being viewed. By default, the content URL is assumed, if such a division into identifiers is not possible, then any other ideograph clearly distinguishes one viewed content from another.contentName
- (optional) name of the content being viewedsku
- (optional) a group of the fields that describe the product's SKU data (see SKU)category
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
Click on the advertising banner
- Trigger: click on advertising content by user.
- Payload: the object with the description of the advertising block, which was clicked by the user.
WebTracker.track('ad_click', {
placementId: '1',
width: 240,
height: 300,
clickURL: 'https://test.com',
adType: 'banner',
contentId: '2',
contentName: 'Doll',
sku: {
skuId: '2',
skuName: 'Doll',
price: 35,
currency: 'RUB',
},
category: [
{
categoryId: '1',
categoryName: 'Category Name',
children: [
{
categoryId: '11',
categoryName: 'SubCategory Name',
},
],
},
],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
},
});
type AdClick = {
placementId: string;
width: number;
height: number;
clickURL: string;
adType: 'banner' | 'video' | 'native' | 'product' | 'reach_media' | 'other';
contentId?: string;
contentName?: string;
sku?: SKU;
category?: Category[];
customParams?: Record<string, string>;
};
placementId
- placement unique identifierwidth
- width of ad placementheight
- height of ad placementclickURL
- URL address that is linked to the the advertising blockadType
- the type of advertising on which the user clicks (see types section)contentId
- (optional) the unique identifier of the content being viewed. By default, the content URL is assumed, if such a division into identifiers is not possible, then any other ideograph clearly distinguishes one viewed content from another.contentName
- (optional) name of the content being viewedsku
- (optional) a group of the fields that describe the product's SKU data (see SKU)category
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
Scroll
- Trigger: the user scrolled the content page.
- Payload: an object with a content scrolling value as a percentage of the total content.
WebTracker.track("scroll", {
value: 0.6,
contentId: '2',
contentName: "Doll",
sku: {
skuId: "2",
skuName: "Doll",
price: 35,
currency: "RUB",
},
category: [{
categoryId: "1",
categoryName: "Category Name",
children: [{
categoryId: "11",
categoryName: "SubCategory Name",
}]
}],
customParams: {
parameterOne: 'parameter value',
parameterTwo: 'parameter value',
}
}
type Scroll = {
value: number;
contentId: string;
contentName: string;
sku?: SKU;
category?: Category[];
customParams?: Record<string, string>;
};
value
- the value of scrolling the page that the user watches from 0 to 1contentId
- the unique identifier of the content being viewed. By default, the content URL is assumed, if such a division into identifiers is not possible, then any other ideograph clearly distinguishes one viewed content from another.contentName
- name of the content being viewedsku
- (optional) a group of the fields that describe the product's SKU data (see SKU)category
- (optional) taxonomy of categories of viewed content or products. (see Category)customParams
- (optional) custom parameters
Helper fields
Below is a description of the auxiliary fields and their data types used in standard events.
Category
Taxonomy of categories of viewed content or products.
type Category = {
categoryName: string;
categoryId?: string;
children?: Category[];
};
name
- category namecategoryId
- (optional) unique identificator of the categorychildren
- (optional) the nested array of child subcategories for this category
SKU
A group of the fields that describe the product's SKU data
type SKU = {
skuId: string;
skuName: string;
price?: number;
currency?: string;
category?: Category[];
};
skuId
- SKU identificator of the productskuName
- name of the productprice
- (optional) price of the productcurrency
- (optional) product currency (USD, EUR, RUB и т.д.)category
- (optional) taxonomy of product categories (see Category)