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

# Overlay

Данный класс позволяет создать overlay (попап, всплывающее окно)

Синтаксис

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

Параметры

Параметр Тип Описание
codeObject обязательно object Объект с кодом, который будет внутри оверлея, может содержать следующие строковые свойства: htmlCode, cssCode, jsCode
options object Набор опциональных параметров оверлея
Объект options:
destroyOnClose boolean убирает оверлей из DOM при закрытии. По умолчанию true
closeIcon String кастомизированная иконка закрытия оверлея (html в виде строки). По умолчанию есть.
closeEventName String будет отправлено событие с переданным названием при закрытии оверлея, по умолчанию события нет
backdropColor number цвет фона, по умолчанию rgba(0,0,0,.7)
autoHide number количество секунд, после которых оверлей автоматически закроется, по умолчанию - нет.
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 можно также отправлять клики, чтобы они выводились в отчёте по кампании (метрика CTR).

Синтаксис

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

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

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

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

Синтаксис

GF.Audiences.getCurrent()

# Трекинг взаимодействия с АПИ кампанией

  • Для кампаний типа Dynamic content / Recommendations / Overlay / Notification - событие отправляется автоматически.
  • Для кампании типа Custom code можно также отправлять событие, если есть элемент, видимость которого можно однозначно определить. ${gfTrackObj} - техническая переменная.

Синтаксис

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

SL.ServerUtils.reportEngagement(token, type)

  • token* - токен из decisionId или slotId, в зависимости от типа взаимодействия
  • type* - одно из SLOT_CLICK, WRIMP, CLICK

Пример использования:

productElement.addEventListener('click', (event) => {
    // предполагается что в элементе есть data-slot-id
    const slotId = event.currentTarget.dataset.slotId;
    if (window.SL && window.SL.ServerUtils) {
        window.SL.ServerUtils.reportEngagement(slotId, 'SLOT_CLICK')
    }
})

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

Метод возвращает promise с первыми попавшими в экран элементом или элементами.

SL.Utils.detectElementsRealImpresssion(elements, customEventName)
  • elements - DOM элемент или элементы (в случае выбора через querySelectorAll), появление в экране которых необходимо отследить.
  • customEventName - опциональный параметр, при наличии которого будет отправляться кастомное событие

Пример использования:

// после рендера нужных элементов:

const targetElements = document.querySelectorAll('.product-item');
// decisionId из ответа GF Server-side API
const decisionId = '000000000000000000000000:000000000000000000000000:000000000000000000000000:000000000000000000000000';

// опционально, подписка на кастомное событие
document.addEventListener('productInViewport', e => {
   console.log('event', e.detail.elements);
   // данный ивент будет выводить в лог элементы, которые будут отправлены в метод reportEngagement ниже, по мере попадения их в экран
})
if (window.SL && window.SL.Utils) {
    SL.Utils.detectElementsRealImpresssion(targetElements, 'productInViewport').then(elements => {
        // отправляем информацию, что был показ виджета (один из товаров попал в экран)
        window.SL.ServerUtils.reportEngagement(decisionId, 'WRIMP')
    });
}