#
Другие функции
#
Overlay
Данный класс позволяет создать 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 можно также отправлять клики, чтобы они выводились в отчёте по кампании (метрика CTR).
Синтаксис
GF.ServerUtils.logClick(${slClickObj});
// custom usage
GF.ServerUtils.logClick({
var: ["${slVariationId}"],
ver: "${slVersionId}",
exp: "${slExperienceId}",
cam: "${slTagId}"
});
${slVariationId}
, ${slVersionId}
, ${slExperienceId}
, ${slTagId}
, ${slClickObj}
- технические переменные, которые можно использовать, если код написан в рамках редактора вариации. Переменные будут заменены на соответствующие идентификаторы.
#
Получить список аудиторий
Функция позволяет получить список аудиторий текущего пользователя. Возвращает массив с идентификаторами аудиторий.
Синтаксис
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
- опциональный параметр, при наличии которого будет отправляться кастомное событие
Важно: если передавать массив элементов, то они должны иметь примерно одинаковые размеры, иначе может быть некорректно произведен расчет попадения 50% от элемента в экран.
Пример использования:
// после рендера нужных элементов:
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')
});
}