Для интеграции оффера созданного в партнерской сети на платформе HOQU с сайтом, созданным в конструкторе lpmotor, следуйте инструкции ниже.

В нашем примере мы будем использовать вариант с интеграцией через iframe с использованием технологии cookieless tracking. Подробнее читайте тут https://hoqu.crisp.help/ru/article/treking-bez-ispolzovaniya-fajlov-cookie-c9rxzs/

Получение трекинговой ссылки в HOQU

Интеграция с помощью Pixel

При создании или редактировании оффера выберите тип интеграции Pixel.

Также обязательно должен присутствовать макрос click_id



Во вкладке Общие оффера перейдите в раздел Интеграции.



В нашем примере скопируйте ссылку в разделе Pixel.



В трекинговой ссылке пикселя замените {action} на название тарифа, для параметра request_id добавляем значение ${window.localStorage.phone} (request_id - уникальный идентификатор конверсии, в нашем примере мы будем использовать для этого номер телефона, для click_id - ${window.localStorage.clickId}.



В нашем случае ссылка будет иметь следующий вид

https://trackerhqu.com/1509/pixel.gif?request_id=${window.localStorage.phone}&action=CPA&click_id=${window.localStorage.clickId}

Интеграция на стороне lpmotor

Авторизуйтесь в вашем аккаунте в lpmotor и перейдите в режим редактирования сайта.

Для настройки интеграции нам необходимо добавить два html-кода на сайт.

Первый - в самый верхний блок на первой странице сайта (на той странице куда будет идти трафик, поле Трекинг ссылка в настройках оффер ). Он будет ​​записывать в localStorage браузера request_id(для примера взят номер телефона) и click_id (уникальный идентификатор перехода). Так же этот кода нужно разместить на всех страницах, где есть формы, которые заполняют пользователи.

В нашем примере перейдем в режим управления сайта, нажимаем на троеточие -> редактировать первой страницы сайта.



Откроется редактор страницы сайта. Нажмите на кнопку + в левом верхнем углу, прокрутите вниз, выберите HTML блок и перетащите его в самый верх страницы.



Далее кликните на добавленный блок и нажмите кнопку редактирования.



Откроется окно редактирования HTML-кода, добавьте туда данный код:

<script>

// Сохраняем в local storage click_id из URL
window.localStorage.clickId = (new URLSearchParams(location.search)).get('click_id')

// Сохраняем значение из первого поля формы в local storage в переменную phone при изменении поля
(function () {
setTimeout(function() {
window.document.querySelectorAll('.fphone.quiz')[0].getElementsByTagName('input')[0].onchange = (e) => {

if (e.target.value) {
window.localStorage.phone = e.target.value
.replaceAll(' ','')
.replaceAll('(', '')
.replaceAll(')', '')
.replaceAll('+', '')
.replaceAll('-', '')

}
}
}, 1000);
})()
</script>


fphone.quiz - класс элемента в форме для указания номера телефона.
getElementsByTagName('input')[0] - значение, которое указал пользователь при вводе номера телефона в форме

Нажимаем кнопку Применить



После чего Опубликовать в правом верхнем углу.



Далее добавляем второй код. Он будет подставлять записанные данные в pixel и вставлять его в документ, чтобы был сделан запрос.

Второй код должен быть размещен на целевой странице, при показе которой будет засчитываться конверсия. Например, это может быть страница “Спасибо за заявку” при оставлении заявки в форме на сайте.

Возвращаемся на страницу редактирования сайта и находим целевую страницу, переходим в режим ее редактирования. В нашем примере это самая последняя страница.



По аналогии с первой страницей, добавляем HTML-код в самый верх страницы.



Переходим в режим редактирования блока и добавляем код

<script>
(function () {
setTimeout(function() {
const img = document.createElement('img');

img.setAttribute('src', `https://trackerhqu.ru/1509/pixel.gif?request_id=${window.localStorage.phone}&action=CPA&click_id=${window.localStorage.clickId}`)

img.setAttribute('alt', 'HOQU')
img.setAttribute('width', '1px')
img.setAttribute('heigth', '1px')
img.setAttribute('style', 'position: absolute; left: -999px')

document.body.append(img)
}, 1000)
})()
</script>


Где
`https://trackerhqu.ru/1509/pixel.gif?request_id=${window.localStorage.phone}&action=CPA&click_id=${window.localStorage.clickId} `- ссылка, которую мы подготовили ранее.

Применяем и публикуем код





Интеграция через iframe

При создании или редактировании оффера выберите тип интеграции iframe.

Также обязательно должен присутствовать макрос click_id



Во вкладке Общие оффера перейдите в раздел Интеграции.



В нашем примере скопируйте ссылку в разделе iframe.



В трекинговой ссылке iframe замените {action} на название тарифа, для параметра request_id добавляем значение ${window.localStorage.phone} (request_id - уникальный идентификатор конверсии, в нашем примере мы будем использовать для этого номер телефона, для click_id - ${window.localStorage.clickId}.



В нашем случае ссылка будет иметь следующий вид

https://trackerhqu.com/1509/pixel.html?request_id=${window.localStorage.phone}&action=CPA&click_id=${window.localStorage.clickId}

Интеграция на стороне lpmotor

Авторизуйтесь в вашем аккаунте в lpmotor и перейдите в режим редактирования сайта.

Для настройки интеграции нам необходимо добавить два html-кода на сайт.

Первый - в самый верхний блок на первой странице сайта (на той странице куда будет идти трафик, поле Тренинг ссылка в настройках оффер ). Он будет ​​записывать в localStorage браузера request_id(для примера взят номер телефона) и click_id (уникальный идентификатор перехода). Так же этот кода нужно разместить на всех страницах, где есть формы, которые заполняют пользователи.

В нашем примере перейдем в режим управления сайта, нажимаем на троеточие -> редактировать первой страницы сайта.



Откроется редактор страницы сайта. Нажмите на кнопку + в левом верхнем углу, прокрутите вниз, выберите HTML блок и перетащите его в самый верх страницы.



Далее кликните на добавленный блок и нажмите кнопку редактирования.



Откроется окно редактирования HTML-кода, добавьте туда данный код:

<script>

(function () {
window.localStorage.clickId = (new URLSearchParams(location.search)).get('click_id')
setTimeout(function() {
window.document.querySelectorAll('.fphone.quiz')[0].getElementsByTagName('input')[0].onchange = (e) => {

if (e.target.value) {
window.localStorage.phone = e.target.value
}
}
}, 1000);
})()
</script>


Данный скрипт сохраняет в local storage click_id из URL и сохраняет значение из первого поля формы в local storage в переменную phone при изменении поля.

fphone.quiz - класс элемента в форме для указания номера телефона.
getElementsByTagName('input')[0] - значение, которое указал пользователь при вводе номера телефона в форме.

Нажимаем кнопку Применить

После чего Опубликовать в правом верхнем углу.



Далее добавляем второй код. Он будет подставлять записанные данные в iframe и вставлять его в документ, чтобы был сделан запрос.

Второй код должен быть размещен на целевой странице, при показе которой будет засчитываться конверсия. Например, это может быть страница “Спасибо за заявку” при оставлении заявки в форме на сайте.

Возвращаемся на страницу редактирования сайта и находим целевую страницу, переходим в режим ее редактирования. В нашем примере это самая последняя страница.



По аналогии с первой страницей, добавляем HTML-код в самый верх страницы.



Переходим в режим редактирования блока и добавляем код

<script>
(function () {
setTimeout(function() {
const iframe = document.createElement('iframe');

iframe.setAttribute('src', `https://trackerhqu.com/1509/pixel.html?request_id=${window.localStorage.phone}&action=CPA&click_id=${window.localStorage.clickId}`)

iframe.setAttribute('width', '1px')
iframe.setAttribute('heigth', '1px')
iframe.setAttribute('frameborder', '0')
iframe.setAttribute('scrolling', 'no')

document.body.append(iframe)
}, 1000)
})()
</script>


Где https://trackerhqu.com/1509/pixel.html?request_id=${window.localStorage.phone}&action=CPA&click_id=${window.localStorage.clickId} - ссылка, которую мы подготовили ранее

Применяем и публикуем код





Тестирование

Под тестовым вебмастером создайте кампанию и возьмите из нее трекинговую ссылку.



В режиме инкогнито перейдите по ней на сайт и совершите целевое действие. В случае успешной интеграции, в статистики данного вебмастера должен появиться клик и конверсия.

В списке конверсий указанный пользователем номер телефона записался в request_id

Была ли эта статья полезна?
Отменить
Спасибо!