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.
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
- Finds its own
<script>tag:document.currentScriptor, if there isn't one, the first<script>whosesrccontains/t.js. - Builds the list of checkout hosts:
pay.vipter.complus the values indata-hosts, separated by commas, with leading and trailing spaces trimmed and in lowercase. - Reads the current page address and looks for these parameters:
| Group | Parameters | Rule |
|---|---|---|
| Campaign | utm_source, utm_medium, utm_campaign, utm_content, utm_term, utm_id, src, sck | First touch, as a block. |
| Click IDs | fbclid, gclid, gbraid, wbraid, ttclid, epik, tblci, ob_click_id, msclkid | Last value. |
| Seller | v | Last value. |
- If it found any, it writes them to your domain's
localStorage, under thevpt_attrkey, 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.
atis 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.
2. On a link click
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:
- Adds each parameter stored in
vpt_attrthat the link doesn't have yet. - Reads your page's cookies and adds them, if the link doesn't have them yet:
| Cookie | Parameter in the link |
|---|---|
_fbp | fbp |
_fbc | fbc |
_ttp | ttp |
_ga | ga_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_attrand changes thehrefof 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. WithoutlocalStorage, 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.brdoesn't covercheckout.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
- Open the sales page with
?utm_source=teste&utm_campaign=script&v=ana. - In the browser console, run
localStorage.getItem('vpt_attr'). A JSON with the three values appears. - Run
vipterDecorate('https://pay.vipter.com/x'). The result has the three parameters, plusfbp,fbc,ttporga_client_idif the page has those cookies. - 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-srcorframe-src: the script makes no requests. - If your CSP uses a
noncewith'strict-dynamic', put thenonceon thet.jstag, as on your other scripts. - The script doesn't use
evalor 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
- See what each parameter does in the checkout in Checkout URL parameters.
- Follow the results in sales sources.
Checkout URL parameters
Technical reference for every parameter the checkout link accepts, with format, validation, what happens with an invalid value and how to build the links in your code.
Glossary
The terms used in the Vipter dashboard and Help Center, each with a short definition and its Portuguese and Spanish equivalents.