Web Tracker SDK (SDK)

SDK можно использовать для отслеживания действий, выполняемых пользователями на сайте, с помощью стандартных и индивидуально настроенных событий. С одной страницы можно отправлять несколько событий и включать в них индивидуально настроенные данные. Пиксель желательно установить на все страницы сайта, в том числе на все страницы, являющиеся целевыми (корзина, чек-аут, подписка и другие конверсионные страницы), а также внутрь каждого баннера, если они загружаются в iframe.

Прежде чем начать

Вам должны быть известны следующие параметры, необходимые для инициализации и использования SDK. Попросите команду SDK выдать их вам.

partnerId - идентификатор клиента в рекламной системе.
baseURL - URL API рекламной системы. Например: https://test.com/.
SDK URL - URL для загрузки SDK в веб-приложение (веб-сайт). Например: https://test-sdk.com/wc.js.

Инициализация

Для использования SDK сначала необходимо выполнить инициализацию. После этого можно будет регистрировать события на действия пользователя на сайте.

Инициализация библиотеки выполняется разработчиком посредством вызова метода WebTracker.init().

code exampletypes

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;

bannerURL - выданный вам URL API рекламной системы (см. выше). Например: https://test.com/
partnerId - выданный вам уникальный идентифкатор клиента в рекламной системе (см. выше). For example: bfd0620a5017d1362431aea6c1d6e504
sessionId - Уникальный идентификатор сессии, определяющий текущую сессию приложения. For example: bfd0620a5017d1362431aea6c1d6e504.
uid - (необязательный) уникальный идентификатор пользователя. В качестве идентификатора может служить хэш email-а или номера телефона указанного пользователем при регистрации. Например: bfd0620a5017d1362431aea6c1d6e504.
debug - (необязательный) флаг, включающий запись отладочной информации в console.log. false по умолчанию.
bundle - (необязательный) строковый идентификатор приложения, если их несколько для одного клиента.
nonBounceTimeout - (необязательный) временной интервал, определяющий сколько пользователь должен находиться в приложении, чтобы считать его посещение действительным.
visitTimeout - (необязательный) временной интервал, определяющий минимальный промежуток бездействия пользователя между его посещениями приложения.

Инициализация через Google Tag Manager

Откройте Google Tag Manager.
Выберите контейнер вашего сайта и нажмите Add a new tag (Добавить новый тег).
Нажмите Custom HTML Tag (Пользовательский HTML-тег).
Введите название тега.
Вставьте код инициализации SDK (см. пример выше) в HTML-контейнер в Google Tag Manager
Нажмите раскрывающийся список Advanced Settings (Расширенные настройки) и выберите Once per page (Один раз на страницу) в разделе Tag firing options (Параметры срабатывания тега).
В разделе Fire On (Срабатывать на) выберите All Pages (Все страницы).
Нажмите Create Tag (Создать тег).

User ID (UID)

Пользователь в вашем приложении может находиться в следущем статусе:

анонимный пользователь - ваше приложение имеет публичный функционал и не требует для доступа к этому функционалу авторизации пользователя в системе.
авторизованный пользователь - для доступа к функционалу приложения пользователь должен иметь аккаунт в нем и пройти авторизацию.

SDK предоставляет функцию setUserId, позволяющую выставлять значение уникального идентификатора пользователя, прошедшего авторизацию. Используйте данную функцию для установки значение uid при каждой успешной попытке авторизации пользователя в вашем приложении.

INFO

Данный функционал аналогичен выставлению поля uid в фунции init. Если приложение еще не обладает информацией о пользователе на этапе вызова функции init, тогда данную информацию можно передать позже через функцию setUserId.

code exampletypes

html

<div id="placement_id" class="placement"></div>
<script type="module">
  import WebTracker from 'SDK_URL';
  // Вызов без указания uid
  WebTracker.init({
    baseUrl: 'https://test.com/',
    sessionId: 'bfd0620a5017d1362431aea6c1d6e504',
  });
  // Позже во время входа пользователя в систему, необходимо вызвать функцию setUserId
  WebTracker.setUserId('testUID');
</script>

export type SetUserId = (uid: string) => void;

uid - (обязательный) уникальный идентификатор пользователя, прошедшего успешную авторизацию внутри хост приложения.

Отслеживания действий пользователя.

После того как мы завершили установку SDK, можно добавить события, чтобы отслеживать определенные действия посетителей на сайте. Код SDK по умолчанию инициирует событие page_view, с помощью которого можно создавать индивидуально настроенные аудитории, соответствующие реферальным URL. Список всех событий, доступных для отслеживания приведен далее с перечислением их параметров. Для трекинга пользовательских событий необходимо воспользоваться следующей функцией:

WebTracker.track('event_type', { event_values });

где event_type — это строковое наименование типа события, а { event_values } — это набор пар «ключ:значение», соответствующий указанному событию.

Самостоятельная настройка отслеживания событий на сайте

Для того, чтобы самостоятельно настроить отслеживание событий, необходимо при загрузке страницы инициалировать SDK, а после этого сделать вызов функции 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>

Динамические события по нажатию кнопок

Динамические события позволяют активировать SDK не автоматически при загрузке страницы, а при выполнении определенного действия на странице. Например, при нажатии кнопки «Добавить в корзину» активируется стандартное событие add_to_cart. Для этого нужно сделать так, чтобы SDK регистрировал событие add_to_cart при нажатии кнопки «Добавить в корзину». Это может выглядеть следующим образом:

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>

Стоит заметить, что обрабатывать события нажатия можно разными способами. Этот код нельзя использовать в текущем виде, поскольку для привязки к нажатию кнопки требуется селектор, а чтобы пользователи могли продолжать работу в случае ошибки, необходимо добавить обработчики успешного завершения и ошибок.

Динамические события, основанные на видимости элемента

Допустим нам нужно измерить дочитал ли пользователь до нужного места контента или нет. В данном случае от пользователя предполагается скроллирование контента до определенного места. Пример страницы контента:

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_start">START_VIEW 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>

Когда элементы id="fire-tracker_viewing" и id="fire-tracker_stop" появятся на экране пользователя мы должны сгенерировать соотвествующие события в SDK. Для проверки видимости элемента будем использовать код, приведенный ниже:

// 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);
};

После этого, нам необходимо определить как вызвать соответствующие события (viewing и stop_view) при появлении элемента на странице:

// 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',
      },
    },
  ]);
});

Отслеживание событий через диспетчер тэгов (Google Tag Manager)

Сначала создайте новый индивидуально настроенный HTML-тег (Custom HTML Tag).
Введите название тега и вставьте фрагмент кода, относящийся к данному событию, а также другие переменные, которые вы хотите отслеживать в поле Configure Tag (Настройка тега). Помните, что реальные переменные могут отличаться от приведенного ниже примера. Замените PARTNER_ID и параметры на необходимые данные.

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>

В разделе Advanced Settings (Расширенные настройки) выберите Once per event (Один раз на событие) в разделе Tag firing options (Параметры срабатывания тега).
В разделе Tag Sequencing (Последовательность тегов) отметьте галочкой и выберите тег базового кода, чтобы он срабатывал после базового кода.
В разделе Fire On (Срабатывать на) выберите активатор, который подходит для вашего сайта.
Нажмите Create Tag (Создать тег).
Таким же образом создайте теги для других событий на вашем сайте (например, для добавления в корзину или для покупки). Ниже приведены примеры создания тегов для стандартных сайтов.
Когда вы закончите создание тегов, нажмите Publish (Опубликовать), чтобы привести теги в действие.

Стандартные события

Вы можете отправлять (tracking) следующие виды событий:

AddToCart - добавление пользователем товарных позиций в корзину в приложении
Purchase - совершение пользователем покупки каких-либо товарных позиций в приложении
StartView - начало просмотра пользователем контента
StopView - завершение просмотра пользователем контента
Click - нажатие на значимый элемент в приложении (ссылки, кнопки, карточка продукта в списке продуктов и т.д.)
Search - выполнение поиска пользователем (например, поиск товара)
AdImp - просмотр рекламного баннера пользователем
AdClick - нажатие пользователем на рекламный баннер
Scroll - пользователь прокрутил страницу контента

Добавление товара в корзину

Триггер: добавление пользователем товарных позиций в корзину в приложении.
Данные: список товарных позиций, которые добавляются в корзину.

code exampletypes

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 - объект, описывающий товарyную позицию (см. SKU)
deltaQuantity - разница (прибавка или убавка) между текущим количеством товара и новым количеством товара
quantity - количество товара
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Покупка товара

Триггер: совершение пользователем покупки каких-либо товарных позиций в приложении.
Данные: список товарных позиций, которые были куплены пользователем.

code exampletypes

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 - объект, описывающий товарyную позицию (см. SKU)
quantity - количество товара
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Начало просмотра контента

Триггер: начало просмотра пользователем контента.
Данные: список объектов контента, который просматривается пользователем.

Внимание

Если текущий просматриваемый контент является страницей каталога ( например список тизеров товаров ), то НЕ нужно отправлять событие просмотра для каждого представленного в этом каталоге тизера другого контента/товара. Событие просмотра контент должно быть отправлено один раз и только для самого каталога.

code exampletypes

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 - уникальный идентификатор просматриваемого контента. По умолчанию подразумевается URL страницы контента, если такое разделение на идентифкаторы невозможно, то любой другой иденификатор, явно отличающий один просматриваемый контент от другого.
contentName - наименование просматриваемого контента
sku - (необязательный) объект, описывающий товарyную позицию (см. SKU)
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Завершение просмотра контента

Триггер: завершение просмотра пользователем контента.
Данные: список объектов контента, который просматривался пользователем.

Внимание

code exampletypes

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>;
};

contentId - уникальный идентификатор просматриваемого контента. По умолчанию подразумевается URL страницы контента, если такое разделение на идентифкаторы невозможно, то любой другой иденификатор, явно отличающий один просматриваемый контент от другого.
contentName - наименование просматриваемого контента
value - значение от 0 до 1, описывающее сколько контента было просмотрена в процентах
sku - (необязательный) объект, описывающий товарyную позицию (см. SKU)
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Просмотра контента

DANGER

DEPRECATED

Триггер: продолжение просмотра пользователем контента.
Данные: список объектов контента, которые просматривались пользователем

WebTracker.track('viewing', [
  {
    contentId: '2',
    contentName: 'Lego',
    value: 0.5,
    category: [
      {
        categoryId: '1',
        categoryName: 'Category Name',
        children: [
          {
            categoryId: '11',
            categoryName: 'SubCategory Name',
          },
        ],
      },
    ],
    customParams: {
      parameterOne: 'parameter value',
      parameterTwo: 'parameter value',
    },
  },
]);

contentId - уникальный идентификатор просматриваемого контента. По умолчанию подразумевается URL страницы контента, если такое разделение на идентифкаторы невозможно, то любой другой иденификатор, явно отличающий один просматриваемый контент от другого.
contentName - наименование просматриваемого контента
value - значение от 0 до 1, описывающее сколько контента было просмотрена в процентах
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Нажатие на значимый элемент

Триггер: нажатие на значимый элемент в приложении ( ссылки, кнопки, карточка продукта в списке продуктов и т.д.).
Данные: объект c описанием того, по какому элементу было произведено нажатие ( URL для внешних ссылок ).

Подсказка

Если действие нажатия на элемент аналогично какому-либо из специализированных событий, то лучше использовать специализированное событие. Например для отслеживания нажатия по кнопкам корзины продуктов, необходимо использовать тип события Добавление товара в корзину / Покупка товара.

code exampletypes

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 - строка c описанием того, по какому элементу был произведен клик ( урл для внешних ссылок ).
contentId - уникальный идентификатор просматриваемого контента. По умолчанию подразумевается URL страницы контента, если такое разделение на идентифкаторы невозможно, то любой другой иденификатор, явно отличающий один просматриваемый контент от другого.
contentName - наименование просматриваемого контента
sku - (необязательный) объект, описывающий товарyную позицию (см. SKU)
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Поиск контента

Триггер: выполнение поиска пользователем (например, поиск товара).
Данные: объект со значением поисковой фразы.

code exampletypes

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 - поисковая фраза
filter - (необязательный) поисковые фильтры
customParams - (необязательный) пользовательские дополнительные параметры

Показ рекламного баннера

Триггер: просмотр рекламного баннера пользователем.
Данные: объект с описанием рекламного блока, который просматривался пользователем.

code exampletypes

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 - идентификатор инвентаря, где был показан рекламный блок
width - ширина рекламного блока
height - высота рекламного блока
clickURL - URL адрес, который привязан к рекламному блоку
adType - тип рекламы, по которой происходит клик пользователем (см. описание типа данных)
contentId - (необязательный) уникальный идентификатор просматриваемого контента. По умолчанию подразумевается URL страницы контента, если такое разделение на идентифкаторы невозможно, то любой другой иденификатор, явно отличающий один просматриваемый контент от другого.
contentName - (необязательный) наименование просматриваемого контента
sku - (необязательный) объект, описывающий товарyную позицию (см. SKU)
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Нажатие на рекламный баннер

Триггер: нажатие пользователем на рекламный баннер.
Данные: объект с описанием рекламного блока, который был нажат пользователем.

code exampletypes

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 - идентификатор инвентаря, где был показан рекламный блок
width - ширина рекламного блока
height - высота рекламного блока
clickURL - URL адрес, который привязан к рекламному блоку
adType - тип рекламы, по которой происходит клик пользователем (см. описание типа данных)
contentId - (необязательный) уникальный идентификатор просматриваемого контента. По умолчанию подразумевается URL страницы контента, если такое разделение на идентифкаторы невозможно, то любой другой иденификатор, явно отличающий один просматриваемый контент от другого.
contentName - (необязательный) наименование просматриваемого контента
sku - (необязательный) объект, описывающий товарyную позицию (см. SKU)
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Прокрутка контента

Триггер: пользователь прокрутил страницу контента.
Данные: объект со значением прокрутки контента в процентном соотношении от величины всего контента.

code exampletypes

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 - величина прокрутки страницы, которую смотрит пользователь от 0 до 1
contentId - уникальный идентификатор просматриваемого контента. По умолчанию подразумевается URL страницы контента, если такое разделение на идентифкаторы невозможно, то любой другой иденификатор, явно отличающий один просматриваемый контент от другого.
contentName - наименование просматриваемого контента
sku - (необязательный) объект, описывающий товарyную позицию (см. SKU)
category - (необязательный) таксаномия категорий товара (см. Категория)
customParams - (необязательный) пользовательские дополнительные параметры

Вспомогательные поля

Ниже приводится описание вспомогательных полей и их типов данных, используемых в стандартных событиях.

Категория

Таксаномия категорий просматриваемого контента либо товара.

typescript

type Category = {
  categoryName: string;
  categoryId?: string;
  children?: Category[];
};

name - имя категории
categoryId - (необязательный) уникальный идентификатор категории
children - (необязательный) вложеннный массив дочерних подкатегорий для данной категории

SKU

Объект, описывающий товарную позицию.

typescript

type SKU = {
  skuId: string;
  skuName: string;
  price?: number;
  currency?: string;
  category?: Category[];
};

skuId - уникальный идентификатор товара
skuName - наименование товара
price - (необязательный) цена товара
currency - (необязательный) валюта товара (USD, EUR, RUB и т.д.)
category - (необязательный) таксаномия категорий товара (см. Категория)

Web Tracker SDK (SDK) ​

Инициализация ​

Инициализация через Google Tag Manager ​

User ID (UID) ​

Отслеживания действий пользователя. ​

Самостоятельная настройка отслеживания событий на сайте ​

Динамические события по нажатию кнопок ​

Динамические события, основанные на видимости элемента ​

Отслеживание событий через диспетчер тэгов (Google Tag Manager) ​

Стандартные события ​

Добавление товара в корзину ​

Покупка товара ​

Начало просмотра контента ​

Завершение просмотра контента ​

Просмотра контента ​

Нажатие на значимый элемент ​

Поиск контента ​

Показ рекламного баннера ​

Нажатие на рекламный баннер ​

Прокрутка контента ​

Вспомогательные поля ​

Категория ​

SKU ​

Web Tracker SDK (SDK)

Инициализация

Инициализация через Google Tag Manager

User ID (UID)

Отслеживания действий пользователя.

Самостоятельная настройка отслеживания событий на сайте

Динамические события по нажатию кнопок

Динамические события, основанные на видимости элемента

Отслеживание событий через диспетчер тэгов (Google Tag Manager)

Стандартные события

Добавление товара в корзину

Покупка товара

Начало просмотра контента

Завершение просмотра контента

Просмотра контента

Нажатие на значимый элемент

Поиск контента

Показ рекламного баннера

Нажатие на рекламный баннер

Прокрутка контента

Вспомогательные поля

Категория

SKU