Zum Hauptinhalt springen

A landing button that leads to the offer

The classic setup: a visitor comes from the ad to your landing page, reads it, and leaves for the offer by a button. In Qubix this is the "Landing with offer" campaign target: Qubix serves your index.html exactly as you uploaded it — it changes nothing in it and injects nothing into it. The move to the offer is done by the Browser SDK library, which you connect yourself.

The main thing you get for free: the offer is picked by the server. Splitting several offers by weight, pinning the offer to the visitor, substituting the tags into the link — all of that has already happened by the time the page opens. Your code only asks the SDK for the ready-made address and puts it on the button.

What you need first

  • The landing is uploaded to Qubix — the Websites window, type "landing". How to upload — Uploading a website.
  • A campaign with the "Landing with offer" target: the campaign has your website and an offer picked (or several offers with a weighted split).
  • A domain connected and activeDomains.

AI mode

Both steps — connecting the SDK and putting the offer on the button — are done with one ask to the AI assistant. Open your website card: the Websites window → your landing → the Files tab, the index.html file. Call the assistant right in that window and describe the task in plain words:

  • "Connect the SDK and make the «Play» button lead to the offer with the tags carried over";
  • "Make every button of the .btn class lead to the offer";
  • "Why doesn't the button get the offer? Here is my code: …".

The assistant writes a ready-made block for your page — all that's left is to insert and save.

Manual mode

The same two steps in your own code — to understand exactly what was inserted, or to do it your own way.

Step 1. Connect the SDK

Add one line to the landing's index.html — the script is served from the same domain the campaign runs on:

index.htmlHTML
<script src="/sdk.js" defer></script>

No settings and no keys needed: the context — which offer was picked, which tags came with the click — is already in a cookie the server set, and the SDK reads it itself.

Step 2. Put the offer on the button

Set the link right after the page loads:

index.htmlHTML
<a id="cta" class="btn" href="#">Play</a>

<script>
window.addEventListener('DOMContentLoaded', function () {
var offer = sdk.getOffer()
if (offer) {
document.getElementById('cta').href = sdk.buildOfferUrl(offer.url)
}
})
</script>

Or at the moment of the click — when there are several buttons or the address is only needed on action:

HTML
<button id="cta" class="btn">Claim the bonus</button>

<script>
document.getElementById('cta').addEventListener('click', function () {
var offer = sdk.getOffer()
if (offer) {
location.href = sdk.buildOfferUrl(offer.url)
}
})
</script>

What each call does:

  • sdk.getOffer() — returns the offer picked for this visitor: { id, url }. If the page was opened outside a campaign (for example, you are looking at it directly), it returns null — so the if (offer) check is mandatory.
  • sdk.buildOfferUrl(offer.url) — builds the final link: substitutes the macros in the offer address ({click_id}, {sub1}…, {all_source_params}) with the values that came with the click. The click id is carried over by itself — the affiliate network receives it under the spelling it expects.

Split and pinning already work

If the campaign has several offers with weights, the server picks one of them before serving the page and remembers the pick for the visitor. A repeat visit by the same person gets the same offer. Your landing code needs nothing for this: sdk.getOffer() always returns the pick already made, it never rolls the dice again.

Statistics — also on its own

The campaign visit is counted by itself — no "visit pixel", no on-load calls needed from you. Your own funnel steps — scrolled to the form, opened a dialog, clicked the button — mark up yourself:

JavaScript
sdk.sendEvent('cta_click', { place: 'hero' })

Where the events land and how to see statistics on them — Your landing's statistics.

Don't confuse this with the prelanding

With the "Prelanding and PWA store" target the button leads not to the offer but to the app store card — there you call sdk.showStore() instead of sdk.buildOfferUrl. If you need the move to the offer — the campaign target must be "Landing with offer". The prelanding scenario is covered in SDK on your prelanding.

Campaign targetWhere the button leadsCall
Landing with offerto the offer, with the tagssdk.buildOfferUrl(sdk.getOffer().url)
Prelanding and PWA storeto the app store cardsdk.showStore()

Verify

  1. Assemble the campaign link (the "Example ad URL" block in the domain card) and open it in a private browser window.
  2. The button must get the offer address with the tags filled in — visible in the browser's status bar on hover or in the developer tools.
  3. The visit shows up in the events window; your own events (sdk.sendEvent) — same place, with a short delay.

What's next