VipterHelp Center
Developers

t.js tracking script

What the https://pay.vipter.com/t.js script does on your sales page, step by step, the data-hosts attribute, what it stores and adds to links, how to install it with and without a tag manager and what to allow in your CSP.

Admin or OwnerAll plans

t.js is a small script, about 2.4 KB, for your sales page. It stores the source of the visit (UTMs, click IDs and seller code) and adds this data to the links that lead to the Vipter checkout, at the moment of the click. Without it, the parameters stay in the sales page address and are lost when the visitor clicks to buy.

The version for store owners, with the steps in the dashboard and the sales sources report, is in UTM script and sales sources.

The code

Copy the code from GeneralConversionsPreferences, in the UTM script for your sales page card. Without a custom domain, it is:

<script src="https://pay.vipter.com/t.js" async></script>

With an active custom domain, the copied code already includes data-hosts="<your domain>".

The file is served with Content-Type: application/javascript, Cache-Control: public, max-age=3600 and Access-Control-Allow-Origin: *. A new version reaches visitors within an hour.

What the script does

1. On load

  1. Finds its own <script> tag: document.currentScript or, if there isn't one, the first <script> whose src contains /t.js.
  2. Builds the list of checkout hosts: pay.vipter.com plus the values in data-hosts, separated by commas, with leading and trailing spaces trimmed and in lowercase.
  3. Reads the current page address and looks for these parameters:
GroupParametersRule
Campaignutm_source, utm_medium, utm_campaign, utm_content, utm_term, utm_id, src, sckFirst touch, as a block.
Click IDsfbclid, gclid, gbraid, wbraid, ttclid, epik, tblci, ob_click_id, msclkidLast value.
SellervLast value.
  1. If it found any, it writes them to your domain's localStorage, under the vpt_attr key, in the format {"at": <milliseconds>, "v": {<parameter>: <value>}}. Each value is cut at 500 characters.

The storage rules:

  • Campaign, first touch as a block. If what is stored already has any campaign parameter, the campaign parameters of the new visit are ignored, all together. If not, those of the new visit are stored.
  • Click IDs and seller, last value. Each one that comes in the new visit replaces the stored one.
  • Valid for 30 days from the first write. at is the moment of the first write and doesn't change on later visits. After 30 days, what is stored is discarded and the next visit with parameters starts from scratch.
  • A visit with none of these parameters writes nothing.

The script listens for mousedown, touchstart and the Enter key across the whole page, in the capture phase. When the target is an <a href>, or is inside one, and the link's host is on the list, it rewrites the href before navigation:

  1. Adds each parameter stored in vpt_attr that the link doesn't have yet.
  2. Reads your page's cookies and adds them, if the link doesn't have them yet:
CookieParameter in the link
_fbpfbp
_fbcfbc
_ttpttp
_gaga_client_id, with the last two parts of the cookie: GA1.1.123.456 becomes 123.456

A parameter the link already has is never replaced. The checkout reads these parameters as described in Checkout URL parameters.

Since the rewrite happens on the click, it also works for links created after the page loads, on pages built with JavaScript, and for "open in new tab". HttpOnly cookies are not visible to the script.

3. The window.vipterDecorate function

For navigations that don't go through an <a>, such as window.location or a framework's router, the script exposes:

const url = window.vipterDecorate('https://pay.vipter.com/curso-fotografia?pack=3');
window.location.href = url;

It applies the same rules as the click and returns the full address, as a string. An address whose host is not on the list comes back with no parameters added. The function only exists after the script has loaded: with async, check typeof window.vipterDecorate === 'function' before calling it.

Forms (<form action>) are not changed. If the buy button is a form, replace it with a link or use vipterDecorate.

What the script doesn't do

  • It makes no network requests, creates no cookies and doesn't touch the page layout. It only reads the address and the cookies, writes to vpt_attr and changes the href of checkout links.
  • It doesn't carry the visitor's e-mail, name or other data.
  • It shows no errors: any failure, such as blocked localStorage, is swallowed. Without localStorage, links still get the cookie values.

The data-hosts attribute

data-hosts adds hosts to the list. pay.vipter.com is always on it.

<script src="https://pay.vipter.com/t.js" data-hosts="checkout.sualoja.com.br,pagamento.sualoja.com.br" async></script>
  • The comparison is by exact host, without port. There are no wildcards and no automatic subdomains: sualoja.com.br doesn't cover checkout.sualoja.com.br.
  • List only the checkout hosts. An extra host makes the script add parameters to links that aren't Vipter's.
  • If you activate a custom domain after installing the script, copy the code again or add the domain to data-hosts.

Install

Directly in the HTML

Paste the tag on every page from which the visitor can go to the checkout, before </body>. Keep async: the script doesn't block rendering. In page builders, use the footer scripts field.

With a tag manager

In Google Tag Manager, create a tag of type Custom HTML with the same code, including data-hosts, and fire it on every sales page. The script reads its configuration from its own <script> tag. After publishing, use the check below to confirm that links to your custom domain get the parameters: if they don't, the tag manager didn't keep the data-hosts attribute.

With a tag manager, the script only runs after the container loads. A click before that goes to the checkout without the stored parameters. If the container waits for the visitor's cookie consent, the script waits too.

Putting your GTM container inside the checkout is a separate setting, unrelated to t.js: see Connect Google Tag Manager.

Check

  1. Open the sales page with ?utm_source=teste&utm_campaign=script&v=ana.
  2. In the browser console, run localStorage.getItem('vpt_attr'). A JSON with the three values appears.
  3. Run vipterDecorate('https://pay.vipter.com/x'). The result has the three parameters, plus fbp, fbc, ttp or ga_client_id if the page has those cookies.
  4. Click the buy button. The checkout address opens with the parameters.

To repeat the test from scratch, delete the key: localStorage.removeItem('vpt_attr'). Otherwise, the campaign from the first test stays in effect for 30 days.

CSP

The script only needs to be loaded. With a Content Security Policy on the sales page:

  • Allow the host in script-src: script-src 'self' https://pay.vipter.com.
  • You don't need to allow anything in connect-src, img-src or frame-src: the script makes no requests.
  • If your CSP uses a nonce with 'strict-dynamic', put the nonce on the t.js tag, as on your other scripts.
  • The script doesn't use eval or inline styles.

Privacy

The script stores the campaign data in your domain's localStorage and reads ad cookies that already exist on the page. If your policy requires consent for this kind of storage, load t.js only after consent, through your tag manager or your consent tool. Consent inside the checkout is set up separately, in cookie consent.

What to do next

On this page