To integrate an offer created in an affiliate network on the HOQU platform with a website created in the lpmotor builder, follow the instructions below.

In our example, we will use an iframe integration using cookieless tracking technology. Read more here

Getting a tracking link in HOQU

Pixel Integration

When creating or editing an offer, select the Pixel integration type.

The click_id macro must also be present



In the General Offers tab, go to the Integrations section.

In our example, copy the link in the Pixel section.



In the pixel tracking link, replace {action} with the name of the rate, for the request_id parameter add the value $ {window.localStorage.phone} (request_id is a unique conversion identifier, in our example we will use the phone number for this, for click_id - $ {window. localStorage.clickId}.



In our case, the link will look like this

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

Integration on the lpmotor side

Log in to your lpmotor account and go to the site editing mode.

To set up the integration, we need to add two html codes to the site.

The first one goes to the uppermost block on the first page of the site (on the page where the traffic will go, the Tracking link field in the offer settings). It will write to the browser localStorage the request_id (for example, the phone number is taken) and click_id (the unique identifier of the transition). Also, this code must be placed on all pages where there are forms that users fill out.

In our example, go to the site management mode, click on the ellipsis -> edit the first page of the site.



The site page editor will open. Click on the + button in the upper left corner, scroll down, select the HTML block and drag it to the very top of the page.



Next, click on the added block and press the edit button.



A window for editing HTML code will open, add this code there:

<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 - the class of the element in the form for specifying the phone number.
getElementsByTagName ('input') [0] - the value that the user specified when entering the phone number in the form

Click the Apply button



Then Publish in the upper right corner.



Next, we add the second code. It will substitute the written data into the pixel and insert it into the document to make the request.

The second code must be placed on the landing page, which will count towards the conversion. For example, it can be the page “Thank you for the application” when leaving the application in the form on the site.

Go back to the site edit page and find the target page, switch to the edit mode. In our example, this is the very last page.



Similar to the first page, add the HTML code to the very top of the page.



Go to the block editing mode and add the code

<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>


Where
https://trackerhqu.ru/1509/pixel.gif?request_id=$$(window.localStorage.phone)&action=CPA&click_id=$$$AMESwindow.localStorage.clickId} - the link that we prepared earlier.

Apply and publish the code





Integration via iframe

When creating or editing an offer, select the type of integration iframe.

The click_id macro must also be present



In the General Offers tab, go to the Integrations section.



In our example, copy the link in the iframe section.



In the tracking iframe link, replace {action} with the name of the tariff, for the request_id parameter, add the value $ {window.localStorage.phone} (request_id is a unique conversion identifier, in our example we will use the phone number for this, for click_id - $ {window. localStorage.clickId}.



In our case, the link will look like this

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

Integration on the lpmotor side

Log in to your lpmotor account and go to the site editing mode.

To set up the integration, we need to add two html codes to the site.

The first one goes to the topmost block on the first page of the site (on the page where the traffic will go, the Training link field in the offer settings). It will write to the browser localStorage the request_id (for example, the phone number is taken) and click_id (the unique identifier of the transition). Also, this code must be placed on all pages where there are forms that users fill out.

In our example, go to the site management mode, click on the ellipsis -> edit the first page of the site.



The site page editor will open. Click on the + button in the upper left corner, scroll down, select the HTML block and drag it to the very top of the page.

Next, click on the added block and press the edit button.



A window for editing HTML code will open, add this code there:

<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>


This script saves the click_id from the URL in local storage and saves the value from the first form field in local storage to the phone variable when the field changes.

fphone.quiz - the class of the element in the form for specifying the phone number.
getElementsByTagName ('input') [0] - the value that the user specified when entering the phone number in the form.

Click the Apply button

Then Publish in the upper right corner.



Next, we add the second code. It will plug the recorded data into the iframe and insert it into the document to make the request.

The second code must be placed on the landing page, which will count towards the conversion. For example, it can be the page “Thank you for the application” when leaving the application in the form on the site.

Go back to the site edit page and find the target page, switch to the edit mode. In our example, this is the very last page.



Similar to the first page, add the HTML code to the very top of the page.



Go to the block editing mode and add the code

<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>

Where https://trackerhqu.com/1509/pixel.html?request_id=$ {window.localStorage.phone }&action=CPA&click_id=$ {window.localStorage.clickId} is the link that we prepared earlier

Apply and publish the code





Testing

Create a campaign under a test affiliate and take a tracking link from it.



In incognito mode, follow it to the site and take the targeted action. In case of successful integration, a click and conversion should appear in the statistics of this affiliate.

In the list of conversions, the phone number specified by the user was recorded in request_id.

Was this article helpful?
Cancel
Thank you!