В Roistat можно передать два вида данных

  • События, совершаемые пользователем
  • Данные из форм, отправленных пользователем + дополнительная информация о странице, клиенте и заказе (см. Подключение передачи данных из форм)

Важно: Передача событий и других данных будут работать при любых действиях форм, кроме действия "Переход к оплате".

Если вам требуется именно это действие, выберите "Сообщение + Переход к оплате" и укажите очередность не менее 3 секунд:

Настройка передачи событий

Список событий, передаваемых в Roistat:

  • Посетитель открыл сайт
  • Кто-то начал заполнять форму
  • Заявка отправлена
  • Не удалось отправить заявку
  • Переход по ссылке
  • Открыто окно

Шаг 1

Перейдите в раздел ”События→Список событий”:

Шаг 2

Нажмите "Добавить событие":

Шаг 3

Укажите следующие параметры:

  • Название: Посетитель открыл сайт
  • Условие срабатывания: Переход на страницу сайта
  • URL: Адрес вашего сайта

Шаг 4

Добавьте остальные события из списка ниже с параметрами:

  • Название и ID: Название события из списка
  • Условие срабатывания: Передается через Javascript

Список событий, передаваемых через JavaScript:

  • Кто-то начал заполнять форму
  • Заявка отправлена
  • Не удалось отправить заявку
  • Переход по ссылке
  • Открыто окно

Например, событие "Кто-то начал заполнять форму" добавляется так:

Если вам требуется только передача событий, сразу переходите к добавлению кода Roistat в конце инструкции.

Передача данных из форм

Вместе с данными из форм по умолчанию передаются:

  • Тип формы (Форма в карточке товара, форма в корзине, другая форма)
  • Имя формы, если она не находится в карточке товара или на странице корзины
  • Страница, с которой отправлена форма
  • Содержимое корзины, если отправлено со страницы корзины
  • Название и цена товара, если форма находится в карточке товара
  • GET-параметры
  • UTM-метки
  • Roistat Visit
  • Client ID By Google

Шаг 1

Перейдите в настройки интеграций в Roistat и добавьте одну из CRM:

В настройках выбранной интеграции будет отображаться список заявок:

Чтобы заявки также передавались в выбранную CRM, авторизуйте ее:

Шаг 2

Добавьте код Roistat (см. далее)

Передача Roistat Visit и Client ID By Google

  • Roistat Visit - идентификатор посетителя вашего сайта в Roistat, добавляется в куки или обновляется при каждом заходе на сайт. Добавляет или обновляет это значение сам Roistat. Используется для передачи в другие CRM, чтобы одного пользователя можно было идентифицировать в разных сервисах
  • Client ID By Google - идентификатор вашего пользователя в Google. Так же, как и Roistat Visit, хранится в куках. Используется преимущественно для настройки рекламных кампаний

В некоторые CRM roistat_visit передается по умолчанию

Если в выбранную вами CRM он не передается, но это необходимо, нужно поставить единичку напротив переменной sendRoistatVisit (см. Добавление кода Roistat)

Для передачи Client ID By Google следует поставить единичку напротив переменной sendClientIdByGoogle (см. Добавление кода Roistat)


Оба значения передаются только вместе с данными форм, отдельно от этих данных их передать не получится

Добавление кода Roistat

1. Откройте настройки Roistat на вкладке ”Код счетчика” и скопируйте код:

2. В Creatium создайте плагин "Свой код":

3. Добавьте скопированный код в поле "Перед <body>":

4. Сразу под этим кодом добавьте еще один:

<!-- Roistat Creatium -->

<script type="text/javascript">
/* v1.1 */

/* 1 - передавать события, 0 - не передавать */
var sendRoistatEvent = 1

/* 1 - передавать данные из форм, 0 - не передавать */
var sendRoistatForm = 1

/* 1 - передавать roistat visit, 0 - не передавать */
var sendRoistatVisit = 1

/* 1 - передавать clientIdByGoogle, 0 - не передавать */
var sendClientIdByGoogle = 1

/* Далее ничего менять не следует */
apiRoistat(cr.api)

function apiRoistat(api) {
if (!api) {
console.log('Интеграция с Roistat будет работать только на новой версии редактора, обратитесь в поддержку Creatium')
return
}

cr.api(function(page) {
/**
* ROISTAT EVENT
*/

if ( sendRoistatEvent ) {
var forms = page.getComponentsByClass('cr-form')
var oldForms = $('[data-form]').filter(function() {
return !$(this).hasClass('cr-form')
})

if (!forms) {
console.log('Данные и события форм с этой страницы не будут переданы в Roistat, замените их на новые в редакторе Creatium')
}

setAlertListenersForOldForms()
page.on('popup-show', setAlertListenersForOldForms)

function setAlertListenersForOldForms() {
var oldForms = $('[data-form]').filter(function() {
return !$(this).hasClass('cr-form')
})
oldForms
.on('submit', function() {
console.log('Данные этой формы не будут переданы в Roistat, замените ее на новую в редакторе Creatium')
})
.on('change', function() {
console.log('События этой формы не будут переданы в Roistat, замените ее на новую в редакторе Creatium')
})
}

forms.forEach(function(form) {
$(form.el).on('change', function() {
if ( form.isChanged ) return
roistatEventSend('Кто-то начал заполнять форму', {
'Форма': form.name,
'Страница': location.pathname
})
form.isChanged = true
})

$(form.el).on('submit', function() {
if ( isValid(form) ) {
var data = JSON.parse( $(form.el).attr('data-form') )
if ( /pay/.test( data.after) ) {
wait('.swal-modal', function(el) {
if (!el) return
var isError = $(el).hasClass('swal-modal--error')
if ( isError ) {
roistatEventSend('Не удалось отправить заявку', {
'Форма': form.name,
'Страница': location.pathname,
'Ошибка': $(el).find('.swal-text').text()
}, 2000)
} else {
roistatEventSend('Заявка отправлена', {
'Форма': form.name,
'Страница': location.pathname
})
}
})
} else {
roistatEventSend('Заявка отправлена', {
'Форма': form.name,
'Страница': location.pathname
})
}
} else {
wait('.swal-modal--error', function(el) {
roistatEventSend('Не удалось отправить заявку', {
'Форма': form.name,
'Страница': location.pathname,
'Ошибка': el
? $(el).find('.swal-text').text()
: 'Неправильно заполнены поля'
}, 5000)
})
}
})
})

page.on('popup-show', function(e) {
roistatEventSend('Открыто окно', {
'ID окна': e.popup.id,
'Страница': location.pathname
})
})

$('a').on('click', function() {
var isSelfHost = this.hostname == location.hostname
var isSelfPath = this.pathname == location.pathname
if ( !isSelfHost || !isSelfPath ) {
roistatEventSend('Переход по ссылке', {
'Ссылка': this.href.replace(/http(s)?:\/\//, ''),
'Страница': location.pathname
})
}
})
}

if ( !sendRoistatForm ) return

/**
* ROISTAT FORM
*/

page.on('before-form-submit', function(e) {
if ( !isValid(e.form) ) return

var data = JSON.parse( $(e.form.el).attr('data-form') )

if ( /pay/.test( data.after) ) {
wait('.swal-modal', function(el) {
if (!el) return
var isError = $(el).hasClass('swal-modal--error')
isError ? false : roistatGoalReach(e.form, sendRoistatVisit)
})
} else {
roistatGoalReach(e.form, sendRoistatVisit)
}
})

var cookie = {
getItem(name){
var name = name.replace(/([.$\/?*+\\{}|()\[\]^])/g, '\\$1')
var regex = new RegExp('(?:^|[^\w])' + name + '=(.*?)(?:;|$)')
var matches = document.cookie.match(regex)
return matches ? decodeURIComponent(matches[1]) : undefined
}
}
function getValue(fields, type) {
if (type == 'comment') {
fields = getExtFields(fields)
return getDataByExtFields(fields)
} else {
var field = getFieldByType(fields, type)
if (field) return field.value
}
return ''
}
function getExtFields(fields) {
return fields.filter(function(field) {
return !field.type
})
}
function getDataByExtFields(fields) {
if (!fields) return ''
var data = {}
fields.forEach(function(field) {
if (!field.value) return
var string = getStringByValue(field.value)
string || string === 0
? data[field.name] = string
: false
})
return data
}
function getStringByObject(object) {
var string = ''
for (var key in object) {
if (object[key]) {
string = string
? string + ', ' + key
: key
}
}
return string
}
function getStringByBoolean(boolean) {
return boolean ? 'Да' : 'Нет'
}
function getFileNameByArray(arr) {
return arr[0]
? arr[0].replace(/.+\/([^\/]+)$/, '$1')
: false
}
function getFieldByType(fields, type) {
for (var field of fields) {
if (field.type == type) return field
}
return
}
function getStringByValue(value) {
if ( Array.isArray(value) )
return getFileNameByArray(value)
else if ( typeof value == 'object' )
return getStringByObject(value)
else if ( typeof value == 'boolean' )
return getStringByBoolean(value)
else return value
}
function isValid(form) {
var fields = form.fields.filter(function(field) {
return field.type
? field.value
: getStringByValue(field.value)
})
return fields.length ? form.isValid : false
}
function wait(selector, callback, timeout = 0) {
var i = 0
var delay = 100
var n = setInterval(function() {
var elem = $(selector)
if ( elem.length ) {
clearInterval(n)
callback(elem.get(0))
}
else if ( timeout && i >= (timeout / delay) ) {
clearInterval(n)
callback(null)
}
i++
}, delay)
}
function getParams() {
var couples = window.location.search.substr(1).split('&');
var params = {};
for ( var index in couples ) {
var couple = couples[index];
if (/[^=]+?=[^=]+$/.test(couple)) {
var matches = couple.match(/^(.+?)=(.+)$/)
var key = decodeURI(matches[1])
var value = decodeURI(matches[2])
params[key] = value
}
}
return params;
}
function getLeadName(form) {
var dataItem = $(form.el).closest('[data-item]')

if ( isCart() ) {
return 'Форма в корзине'
}
else if ( isProductCart(form) ) {
var productCart = $(form.el).closest('[data-item]')
var dataItem = JSON.parse( productCart.attr('data-item') )
var itemname;
var itemprice;
dataItem.forEach(function(prop) {
prop.type == 'title'
? itemname = prop.value : false
prop.type == 'price'
? itemprice = prop.value : false
})
itemname = itemname ? itemname : 'Название не указано'
itemprice = itemprice ? itemprice : 'Цена не указана'

return `Форма в карточке товара "${itemname}" (${itemprice})`
}
else {
return `Форма: "${form.name}"`
}
}
function isProductCart(form) {
return $(form.el).closest('[data-item]').length
}
function isCart() {
return location.pathname == '/cart'
}
function getClearPrice(price) {
price = price.replace(',', '.').replace(/[^\d\s\.a-zA-Zа-яА-ЯЁё]/g, '')
var matches = price.match(/([\d\.\s]+)(\D+)?$/)
var number = matches[1] ? +matches[1].replace(/\s/g, '') : 0
var currency = matches[2] ? matches[2].replace(/[\s\.]/g, '') : ''
return {
number: number,
currency: currency
}
}
function isEmpty(obj) {
for ( var key in obj ) {
return key || obj[key] ? false : true
}
}
function devideGETparams(params) {
var utm = {}
if ( !isEmpty(params) ) {
for ( var key in params ) {
if ( /^utm_/.test(key) ) {
utm[key] = params[key]
}
else {
params[`GET ${key}`] = params[key]
}
delete params[key]
}
}
return {getParams: params, utmParams: utm}
}
function getCartProducts() {
var cart = page.cart
var items = cart.items

if ( !items.length ) return

var products = {}
var currency = ''
var subtotal = cart.subtotal
items.forEach(function(item, i) {
var clearprice = getClearPrice(item.price)
var totalprice = clearprice.number * item.quantity
var key = items.length > 1 ? 'Заказ ' + (i + 1) : 'Заказ'

currency = currency ? currency : clearprice.currency
products[key] = `${item.title} = ${totalprice} ${currency} (${clearprice.number} * ${item.quantity})`
})
products['Общая сумма'] = subtotal + ' ' + currency
return products
}
function getProductItem(form) {
var productCart = $(form.el).closest('[data-item]')
var dataItem = JSON.parse( productCart.attr('data-item') )
var itemname;
var itemprice;
dataItem.forEach(function(prop) {
prop.type == 'title'
? itemname = prop.value : false
prop.type == 'price'
? itemprice = prop.value : false
})

itemname = itemname ? itemname : 'Название не указано'
itemprice = itemprice ? itemprice : 'Цена не указана'

return {
'Заказ': `${itemname} = ${itemprice}`,
'Общая сумма': itemprice
}
}
function getFormData(form) {
return {
leadName: getLeadName(form),
text: 'Страница: ' + location.hostname + location.pathname,
name: getValue(form.fields, 'name'),
phone: getValue(form.fields, 'phone'),
email: getValue(form.fields, 'email'),
fields: {
push: function(object) {
if ( !isEmpty(object) ) {
for ( let key in object ) {
this[key] = object[key]
}
}
}
}
}
}
function getRoistatVisit() {
rv = cookie.getItem('roistat_visit')
return rv ? {roistat_visit: rv} : {}
}
function getClientIdByGoogle() {
var cid = cookie.getItem('_ga')
/* GA1.2.1426066414.1596276565 → 1426066414.1596276565 */
cid = cid ? cid.replace(/[^\.]+\.[^\.]+\.(\d+\.\d)/, '$1') : cid
return cid ? {'Client ID by Google': cid} : {}
}
function roistatEventSend(e, data = null) {
roistat.event.send(e, data)
console.log(`Событие "${e}" отправлено в Roistat`)
console.log('roistat-event-data', data)
}
function roistatGoalReach(form, sendRoistatVisit = 0) {
var formData = getFormData(form)
var comment = getValue(form.fields, 'comment')
var dividedParams = devideGETparams( getParams() )

isCart()
? formData.fields.push( getCartProducts() )
: isProductCart(form)
? formData.fields.push( getProductItem(form) )
: false

formData.fields.push(comment)
formData.fields.push(dividedParams.getParams)
formData.fields.push(dividedParams.utmParams)

sendRoistatVisit
? formData.fields.push( getRoistatVisit() )
: false
sendClientIdByGoogle
? formData.fields.push( getClientIdByGoogle() )
: false

delete formData.fields.push

roistatGoal.reach(formData)

console.log('Заявка отправлена в Roistat')
console.log('roistat-form-data', formData)
}
})
}
</script>
<!-- /Roistat Creatium -->

5. Укажите в скрипте из предыдущего пункта, какие данные хотите передавать, для этого поставьте единицу напротив нужных переменных:

  • sendRoistatEvent - передача событий
  • sendRoistatForm - передача форм
  • sendRoistatVisit - передача roistat_visit
  • sendClientIDByGoogle - передача ClientIDByGoogle

6. Сохраните изменения

Важно: передача данных в Roistat может быть заблокирована блокировщиками рекламы, такими, как AdBlock, AdGuard и другие. Отключите их перед проверкой интеграции на работоспособность.


Вы нашли ответ?