> ## Documentation Index > Fetch the complete documentation index at: https://docs.metricanic.com/llms.txt > Use this file to discover all available pages before exploring further. # Landing pages and tracking scripts > Install landing tracking and connect offer buttons with a click URL or data-dtp-link, so clicks and conversions belong to the right visit. A landing page introduces an offer before the visitor reaches the destination where a lead or sale can happen. Use one when visitors need a product explanation, comparison, or prequalification step. Its tracked CTA lets you measure how many visits continue to the offer. Metricanic stores the landing's URL and uses it in campaign routing. You host and edit the page on your website or page builder. Adding a landing in the tracker does not upload or create a website. ## Decide what you want to measure Suppose 1,000 people visit a comparison page and 200 press **Continue**. The campaign has 1,000 visits and 200 tracked offer clicks, giving that page a 20% CTR. A later sale is a separate conversion event. Connecting the CTA is what makes that middle step measurable. Use a **Landers & Offers** path for this flow. If you send visitors straight to an offer, use **Offers only** instead. You do not need to create a dummy landing to record a visit. ## Add the page to your campaign 1. Open **Landings** and click **Create**. 2. Enter a recognizable **Name** and the full HTTPS **URL** of your page. 3. Choose **Country** or **Global** for asset compatibility. This field does not block visitors by location. 4. In the campaign's **Rotator**, select the landing in a **Landers & Offers** path and add at least one offer. 5. Keep the path, landing, and offer enabled with positive weights, then save. The same landing can be used in several campaigns. Editing its saved URL affects campaigns that use that asset. Create another landing asset when you need a separate page version for a test. ## Connect the page and its buttons ### Direct Script Mode Visitors open the page before reaching Metricanic. The tracking script registers their visit, receives the selected offer, and connects CTA links to it. You can identify those links by their tracker `/click` URL or by adding the `data-dtp-link` attribute. 1. Select **Direct Script Mode** in the campaign and save. 2. Open **Finish** and select the arrival page. 3. Copy **Include in \** into the end of the page's ``. Keep the generated attributes and any accompanying meta tag. 4. Copy **CTA click link** into the buttons that lead to the offer, or [mark the links with `data-dtp-link`](#mark-a-link-with-data-dtp-link). 5. Use **Traffic URL** as the destination in the traffic source. Use the same tracking domain for the script and the CTA. Most pages need only this setup, without a custom JavaScript callback. ### 302 Redirect Mode Metricanic records the visit before sending the visitor to the landing. A CTA such as `https://YOUR_TRACKING_DOMAIN/click` then uses the existing visit context to reach the selected offer. You can also install the landing script below. It reads valid context carried from the redirect and prepares the CTA without relying only on cookies on the tracking domain. Keep the campaign parameters added to the arrival URL intact until the script has loaded. The script reuses a visit when it can recover valid context for that campaign and page. This is not an unconditional promise that every reload is deduplicated. If context has been cleared or expired, a new visit may be registered. For a direct campaign, prefer the generated snippet in **Finish**. For a redirect landing, replace the tracking domain and campaign ID below with the values from its **Tracking link**. The campaign ID is the identifier after the domain in that link. ```html theme={null} ``` Place it at the end of ``. Keep its normal loading order and do not add `async` or `defer`. If the page URL contains `cmpid`, that value takes precedence over `data-campaign-id`. Keep both aligned when reusing a page. ### What belongs on a CTA Set the button's link to the tracker URL, using your actual domain: ```html theme={null} Continue to the offer ``` With the script installed, that link may change to the resolved offer URL after the visit is ready. This is expected. The script also attaches click reporting. Do not replace the original HTML link with a fixed affiliate URL just because the browser shows a resolved destination. ### Mark a link with data-dtp-link Use `data-dtp-link` when you want the script to recognize an offer button by an HTML attribute instead of a `/click` URL. Install the campaign's tracking script as described above, then add the attribute to the `` element: ```html theme={null} Continue to the offer ``` For a page builder with custom HTML attributes, use `data-dtp-link` as the attribute name. Leave its value empty, or use `1` if the builder requires a value. Check that the builder adds it to the actual link. Once the visit and page elements are ready, the script replaces `href` with the selected offer URL and connects click reporting. No separate `onclick` code is needed. In this example, `#` is only a placeholder. If the script cannot finish setting up the visit, this link will not reach the offer. The attribute marks a link for processing. Its value does not choose an offer or an offer number. All ordinary CTA links on the page use the offer selected for that visit, whether they were identified by `/click` or `data-dtp-link`. Use this on a landing page in a **Landers & Offers** path. The script does not generate offer links on a page identified as the offer itself. A link added after the initial scan needs another scan, as shown below. A popup or page builder may insert a link after the script has prepared the original page. Add `data-dtp-link` to that link, then run this code after the new element has been inserted: ```js theme={null} metricanicCallback.onReady((api) => { api.generateLinks({ register: true }); }); ``` `onReady` waits for visit setup. It does not wait for a popup to create its buttons. Run the snippet from the callback that follows the popup or button insertion. `register: true` connects click reporting as well as replacing the destination. Do not add a second manual `registerClick()` handler to the same link. ## Verify the whole journey 1. Enter through **Tracking link** for redirect tracking or **Traffic URL** for direct tracking. Opening the landing alone can skip required context. 2. Check that a new visit appears in the campaign report for the correct date and timezone. Allow for processing before refreshing. 3. Inspect the prepared CTA. For `data-dtp-link`, confirm that `href` now contains the selected offer URL instead of `#`. Use a normal left click and check both the reached offer and the report's **Clicks** count. 4. Send the test conversion using [Incoming events](/conversions/incoming-events). Opening an offer alone does not record a conversion. Test both a normal session and a fresh session with cookies restricted. If a visit appears but the click fails, check the CTA domain, script load, and whether a page builder changed the button behavior. Start with [No visits or clicks](/troubleshooting/no-visits-or-clicks). Test opening in a new tab separately if visitors commonly use it. Once the script has replaced a CTA with the direct offer URL, Ctrl/Cmd-click and middle-click can reach the offer without running the click reporting handler. ## Optional integrations Use [landing protection](/tracking/landing-protection) if a redirect landing should reject requests without a recent tracker key. It requires a server-side check and is unsuitable for the initial direct arrival page. Use `onReady` when your own page code needs the Metricanic click ID or traffic parameters. It waits for visit setup, not for every element in the document to exist. ```js theme={null} metricanicCallback.onReady((api) => { const clickId = api.getClickId(); const tokens = api.getTokens(); // Pass these values to your own form or page integration. }); ``` For a custom button that bypasses the ordinary CTA handling, put the button with `id="custom-continue"` before this code near the end of ``: ```js theme={null} metricanicCallback.onReady((api) => { const button = document.querySelector('#custom-continue'); if (!button) return; button.addEventListener('click', async (event) => { event.preventDefault(); const offerUrl = api.getOfferLink(); if (!offerUrl) return; await api.registerClick(); window.location.href = offerUrl; }); }); ``` Use this only on a dedicated custom button. An ordinary tracker CTA already has click handling. Adding both mechanisms can report an extra click. Completion of `registerClick()` means the browser attempted to send the event, so use the report to verify processing.