Другие функции

В этом разделе собраны методы, которые чаще используются внутри кампаний, кастомных шаблонов и API-driven сценариев.

Overlay

GF.Overlay создает оверлей: попап или полноэкранное всплывающее окно.

Синтаксис

const overlay = new GF.Overlay(codeObject, options);
overlay.open();

const overlay = new GF.Overlay({
  htmlCode: '<div class="test">123</div>',
  cssCode: '.test { background: #fff; padding: 20px; }',
});

overlay.open();

Отправка кликов кампании

Для кампаний типа Dynamic Content, Recommendations, Overlay и Notification клики отправляются автоматически. В Custom code можно отправить клик вручную, чтобы он попал в отчет кампании.

Синтаксис

GF.ServerUtils.logClick(${slClickObj});

GF.ServerUtils.logClick({
  var: ['${slVariationId}'],
  ver: '${slVersionId}',
  exp: '${slExperienceId}',
  cam: '${slTagId}',
});

Получить список аудиторий

Метод возвращает массив идентификаторов аудиторий текущего пользователя.

Синтаксис

GF.Audiences.getCurrent()

const audiences = GF.Audiences.getCurrent();
console.log(audiences);

Трекинг API-кампании

Методы ниже нужны, когда кампания получена через server-side/API сценарий, а события взаимодействия удобно отправить через web-скрипт.

Показ кастомного элемента

GF.Utils.track отправляет WRIMP, когда переданный элемент попадает в экран.

GF.Utils.track(elementToTrack, ${gfTrackObj});

${gfTrackObj} - техническая переменная редактора вариации. Объект должен содержать как минимум var, а также обычно ver, exp и cam.

Взаимодействия по токену API-ответа

GF.ServerUtils.reportEngagement отправляет события по токену из server-side/API ответа. Используйте готовый decisionId или slotId из ответа API; не собирайте токен вручную.

Синтаксис

GF.ServerUtils.reportEngagement(token, type)

productElement.addEventListener('click', function (event) {
  const slotId = event.currentTarget.dataset.slotId;

  if (slotId && window.GF?.ServerUtils) {
    GF.ServerUtils.reportEngagement(slotId, 'SLOT_CLICK');
  }
});

Отслеживание попадания элементов в экран

Метод возвращает Promise с первыми элементами, которые попали в экран. Если передать название события, скрипт дополнительно отправит CustomEvent на document.

Синтаксис

GF.Utils.detectElementsRealImpresssion(elements, customEventName)

const targetElements = document.querySelectorAll('.product-item');
const decisionId = apiResponse.decisionId;

document.addEventListener('productInViewport', function (event) {
  console.log(event.detail.elements);
});

GF.Utils.detectElementsRealImpresssion(targetElements, 'productInViewport').then(function () {
  GF.ServerUtils.reportEngagement(decisionId, 'WRIMP');
});

Служебные и низкоуровневые методы

Методы ниже экспортируются в публичный объект GF, но обычно используются для внутренних задач скрипта, отладки, кастомных кампаний и нестандартных интеграционных сценариев.

Ajax

GF.Ajax - тонкая обертка над XMLHttpRequest. Для запросов к событиям Gravity Field скрипт автоматически добавляет заголовок section_id.

GF.Ajax.get('/some-endpoint').then(function (response) {
  console.log(response);
});

StorageUtils

GF.StorageUtils работает с localStorage, sessionStorage и cookie-хранилищем скрипта.

Доступные значения storages: localStorage, sessionStorage, cookieStorage.

GF.StorageUtils.set('custom-key', 'custom-value', ['localStorage']);
const value = GF.StorageUtils.get('custom-key', ['localStorage']);

digestString

GF.digestString считает SHA-256 hash строки и возвращает Promise со строкой в hex-формате. Метод используется скриптом, например, для хеширования email перед отправкой события.

GF.digestString('user@example.com').then(function (hash) {
  console.log(hash);
});

ServerUtils

GF.ServerUtils содержит низкоуровневые методы отправки событий и запросов к backend-эндпоинтам скрипта.

GF.ServerUtils.logClick({
  var: ['${slVariationId}'],
  ver: '${slVersionId}',
  exp: '${slExperienceId}',
  cam: '${slTagId}',
});

const baseData = GF.ServerUtils.getEventBaseData();
console.log(baseData.uid, baseData.ses, baseData.ctx);