Skip to content
On this page

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().

ts
import WebTracker from 'SDK_URL';
WebTracker.init({ partnerId: 'partnerId', sessionId: 'sessionId', baseUrl: 'http://localhost:5173' });
ts
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 is false .
  • 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

  1. Open Google Tag Manager.
  2. Select the container of your site and click Add a new tag.
  3. Click Custom HTML Tag.
  4. Input the name of your site.
  5. Paste initialization code of SDK (see above) into the HTML container in Google Tag Manager.
  6. Click the drop-down list Advanced Settings and select Once per page in the section Tag firing options.
  7. In the section Fire On select All Pages.
  8. 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.

html
<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>
ts
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:

javascript
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. :

html
<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:

html
<!-- 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:

html
<!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:

ts
// 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:

ts
// 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)

  1. First create a new customized HTML tag (Custom HTML Tag).
  2. 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.
html
<script type="module">
  WebTracker.track('search', {
    value: 'Pampers',
    filter: {
      age: ['0-1', '1-3'],
      sex: ['m'],
    },
    customParams: {
      parameterOne: 'parameter value',
      parameterTwo: 'parameter value',
    },
  });
</script>
  1. In the section Advanced Settings, select Once per event in the section Tag firing options.
  2. In the section Tag Sequencing, tick the box and select the base code tag to trigger it after the base code.
  3. In the section Fire On select the activator that is suitable for your site.
  4. Click Create Tag.
  5. In the same way, create tags for other events on your website (for example, to add to the shopping cart or to buy).
  6. 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.
ts
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',
    },
  },
]);
typescript
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 product
  • deltaQuantity - the difference (increment or decrement) between the new and current quantity of the product
  • category - (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
ts
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',
    },
  },
]);
typescript
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 product
  • category - (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.

ts
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',
    },
  },
]);
typescript
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 viewed
  • sku - (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.

ts
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',
    },
  },
]);
typescript
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 percentage
  • 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 viewed
  • sku - (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.
ts
[
  {
    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 percentage
  • 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 viewed
  • sku - (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 .

ts
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',
  },
});
typescript
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 viewed
  • sku - (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

  • Trigger: the user searches some content in application (for example, search for a product).
  • Payload: the object with the search phrase value
ts
WebTracker.track('search', {
  value: 'Pampers',
  filter: {
    age: ['0-1', '1-3'],
    sex: ['m'],
  },
  customParams: {
    parameterOne: 'parameter value',
    parameterTwo: 'parameter value',
  },
});
typescript
type Search = {
  value: string;
  filter?: Record<string, string[]>;
  customParams?: Record<string, string>;
};
  • value - search phrase
  • filter - (optional) search filters
  • customParams - (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.
ts
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',
  },
});
typescript
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 identifier
  • width - width of ad placement
  • height - height of ad placement
  • clickURL - URL address that is linked to the the advertising block
  • adType - 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 viewed
  • sku - (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.
ts
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',
  },
});
typescript
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 identifier
  • width - width of ad placement
  • height - height of ad placement
  • clickURL - URL address that is linked to the the advertising block
  • adType - 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 viewed
  • sku - (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.
ts
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',
  }
}
typescript
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 1
  • 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 viewed
  • sku - (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.

typescript
type Category = {
  categoryName: string;
  categoryId?: string;
  children?: Category[];
};
  • name - category name
  • categoryId - (optional) unique identificator of the category
  • children - (optional) the nested array of child subcategories for this category

SKU

A group of the fields that describe the product's SKU data

typescript
type SKU = {
  skuId: string;
  skuName: string;
  price?: number;
  currency?: string;
  category?: Category[];
};
  • skuId - SKU identificator of the product
  • skuName - name of the product
  • price - (optional) price of the product
  • currency - (optional) product currency (USD, EUR, RUB и т.д.)
  • category - (optional) taxonomy of product categories (see Category)